The situation: you have a great blog article you would like to rollup to a page on your site, but it is in a different site collection. What do you do? Content Query Webparts won’t do it! Well, you could create a custom webpart. You could pay a consultant and some developers to create one for you. You could find something prebuilt.

Or you could insert a few lines of jQuery and call it a day!

We’re looking to create something like this (the link would be dynamically rolled up from across a site collection):

Latest Blog Article: Rollup articles across a site collection (using jQuery) in SharePoint 2010

Skip ahead:
Download/link to SPServices
The Code
Final Result

Step 1: Download/link to SPServices

(This assumes you have already loaded jQuery itself…do that first!). SPServices is a jQuery library created by Marc D Anderson that helps you hook into SharePoints services. It does a freaking lot of stuff, but for this article we’re going to use it for rolling up some content from across a site collection. So download it from codeplex and let’s get started!

We’re going to do everything in the page using SharePoint Designer. You could load this script in your master page, or page layouts, or wherever you want. But for now, we’re going to do a one-page example. So copy this script onto your page:

<script type="text/javascript" src="/Style%20Library/scripts/jquery.SPServices-0.7.0.min.js"></script>

Step 2: the Code

First, let’s setup our placeholder for this article’s title. We will set up a span (or p, div, whatever) with and ID so we can use jQuery to find it and append the dynamically created link.

<span id="sitecollectionlink">Latest Blog Article:</span>

Next, we’ll start writing our code. I’ll break it down and then paste everything at the end. I’ve created this solution by trial and error, but there were a few discussions and examples by much smarter people on the codeplex forums that helped me with a few of the hard bits.

First let’s create a new script and call a new jQuery function on $(document).ready:

<script type="text/javascript">
$(document).ready(function() {

//code will go here

});
</script>

Let’s get into it! Our call to SPServices comes next. We’ll set the operation to “GetListItems”, set our webURL to where our blog is residing (in a separate site collection), and we pass it the list “name”. For default SharePoint blogs the list name is “Posts.” Next, we call in the fields using CAML. You’ll need two for this example, the Title field and the EncodedAbsUrl field. And finally, I’ve limited the results to just 1 because I want only one blog post showing up on my home page. Default I believe is 30 or so…

$().SPServices({
 operation: "GetListItems",
 async: false,
 webURL: "/YOUR-SITE/CHANGETHIS",
 listName: "Posts",
 CAMLViewFields: "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='Title' /></ViewFields>",
 CAMLRowLimit:1,
  
// we're not finished...more coming!

  });

Next we call a function that runs when everything is complete. (Be sure to read the documentation on the codeplex for an explanation of why the code should be SPFilterNode instead of find). Ok, the code below first sets a variable called “url”. We set this from the EncodedAbsUrl variable. Don’t forget to include ows_ before the variables when you call them here. Next we have an if statement that tests whether or not the returned item is a document. This is not very relevant for this tutorial, but it’s good to see what happens. Because this is not a document, it’s a list item, the code inside the if statement will run. SharePoint URLs are stored really horribly, so this takes out all the junk and formats it nicely. It cuts off everything after the last forward slash and replaces it with “/Post.aspx?ID=” (this is the default viewing page for a SharePoint post). Then it brings in the ID to append to the URL. Finally, we set a variable called “link”, using the newly formatted URL as the href tag and putting our Title as the anchor text. And to wrap it all up we locate the span we created earlier using jQuery and append the new link we’ve created. The link will be put in dynamically after the page has loaded!

completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
      	var url = $(this).attr("ows_EncodedAbsUrl") + "";
      	if(($(this).attr("ows_EncodedAbsUrl") + "").match(/000$/))
      	{
      		url = url.substring(0, url.lastIndexOf("/", url.length));
      		url = url + "/Post.aspx?ID=" + $(this).attr("ows_ID");
      	}
         var link = "<a href='" + url + "'>" + $(this).attr("ows_Title") + "</a>";
        $("#sitecollectionlink").append(link);
      });
    }

So hopefully this tutorial was fairly straightforward. If you got lost, don’t worry, leave a comment and I’ll help you out. And for your ease, the full code is below. Copy and paste to your heart’s content!

Final Result

Copy and paste this into your page and you should be good to go. Remember to change the path to your javascript and the webUrl to your list.

<script type="text/javascript" src="/Style%20Library/scripts/jquery.SPServices-0.7.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$().SPServices({
operation: "GetListItems",
async: false,
webURL: "/YOUR-SITE/CHANGETHIS",
listName: "Posts",
CAMLViewFields: "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='Title' /></ViewFields>",
CAMLRowLimit:1,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var url = $(this).attr("ows_EncodedAbsUrl") + "";
if(($(this).attr("ows_EncodedAbsUrl") + "").match(/000$/))
{
url = url.substring(0, url.lastIndexOf("/", url.length));
url = url + "/Post.aspx?ID=" + $(this).attr("ows_ID");
}
var link = "<a href='" + url + "'>" + $(this).attr("ows_Title") + "</a>";
$("#sitecollectionlink").append(link);
});
}
});
});
</script>

<span id="sitecollectionlink">Latest Blog Article:</span>