SharePoint Adding a View More Link to the Web Part

When we’re designing or mocking up a SharePoint Intranet, Extranet or Internet we always talk about content roll up. SharePoint does a great job with content roll up OOTB (within the same Site Collection at least) using the Content Query Web Part. However, any time you show the client the power of the Content Query Web Part a typical question usually follows…

I love how I can see the top 5 most recent documents… but where is the link to “view more”? How do I get to the rest of the documents?

Like anything else with SharePoint it’s the 80-90% that’s easy and the little questions like this that cause the grief. Now, you could modify the Content Query Web Part styles but that’s not very manageable. Or you could drop a Content Editor Web Part on the page but that seems like a lot of work for one link. Heck, with SharePoint 2010 you could even use an inline Web Part in your main content area and just include the link yourself.

ISN’T THERE AN EASIER WAY?

What if you wanted something that looks like this:
Let’s keep this simple, make it flexible and allow you to use this technique on any Web Part, OOTB or custom.

THE WEB PART CONFIGURATION

First, we’re going to put the URL that we want the link to point to in the Title URL of the web part. Normally this would make the title of the Web Part clickable… but using some jQuery we can disable that link later. Next we’re going to use the Description to hold the link caption (You we’re using the description anyways… were you?). Now when we save the web part SharePoint will automatically display the tooltip of the Web Part title as “Web Part Title – Web Part Description”. We’re going to use this detail to our advantage next.

THE JQUERY

$('.ms-WPHeaderTd').each(function() {
     var title = $(this).attr('title');
     var titleIndex = title.indexOf(' - ');
 
     if (titleIndex != -1) {
          $(this).attr('title', title.substring(0, titleIndex));
          title = title.substring(titleIndex + 3);
   if ($(this).find('a').length) {
        var link = $(this).find('a');
        var url = link.attr('href');
               $(this).find('h3').html(link.html());
               $(this).parent().append('<td class="view-more"><a href="' + url + '">' + title + '</a></td>');
          }
     }        
});

The code above is going to perform the following:

1. Loop through all Web Part Headers on the page
2. Find the title of the Web Part
3. Determine if the Web Part is using a description (we make some assumptions to do this)
4. Remove the description from the Web Part title
5. Make sure the Web Part has a Title URL configured
6. Remove the link from the Web Part title
7. Add a new table cell at the end of the Web Part title to show our view more link

THE CSS

Last but not least let’s style our links! You can do anything you want at this point but here’s the CSS I’m using in the screenshot above:

.view-more { text-align: right; width: 70px; }
.view-more a { color: #29466F; }
.view-more a:hover { text-decoration: underline; }

jQuery to the rescue… again!

This was the cool Post by Cory Peters