Showing a list from another SharePoint site (or cross-site listing)

One of the frustration about developing SharePoint page is that you can not use a list view from another Site. If two sites are under the same Site collection, then it will be possible but our IT people created each division’s site as independent site and not as a site collection (and there was a good reason for doing this way, 4 years ago. I am aware of that too.)

Christophe Humbert from Path to SharePoint has a solution to this. One of his online tools will generate a JavaScript snippet that you can drop into CEWP to show a list or calendar from another site page.  He uses JQuery to extract a list out of the target page and insert where the CEWP is located.

This “Cross site list Snapshot tool” works pretty well.  However, the list “extracted” in this manner can not take advantage of TextToHTML script.

The TextToHTML is another gem from Christophe that uses calculated columns to display colored text, background or even bar charts and also traffic signals (as KPI). If you have not seen his solution, take a look at this,this and this.  Along with Easy Tabs (another Christophe’s creation)  my colleagues in the office think I am a SharePoint wizard (far from the truth)

The reason the combination does not work is because  TextToHTML will execute as soon as the browser read the script. Unfortunately at that time, the Cross site list snapshot script is still busy working on extracting the list so TexttoHTML does not see the list.

In his response to one of the comments in his blog, Christophe mentioned a use of callback function that is available for JQuery so that two scripts can talk to each other.

The idea is for the JQuerry load function to “call back” textToHTML script once the load function finishes its primary job.

I have experimented with this concept and came up with (my) solution so I am presenting it here.  This works with scripts available from PathToSharePoint site as of November 1, 2010

First we have to modify the TextToHTML script.  Download the script from Christophe’s site and look for the following section of the code. (I use “light version” of the script)

// Calendar views
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);

// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);

Change  the code above as follows. In essense, we are turning the executable codes to function declarations.

// Start of modifications
//Calendar views

function calendarT2H() {
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);
}
// List views

function listT2H(){
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);

}

//maintains the original functionality of the script.

// Omit below two lines if no other part of the page uses TexttoHtML

calendarT2H();
listT2H();

//end of modifications

Save the above script as your TextToHTML.

Now generate your list snapshot script using Path To SharePoint’s  Tool -Cross-Site-List-Snapshot page

Open the Script with text editor. Search for the following string toward the end of the script.

..(“href”,$(this).attr(“href”)+s+”Source=”+location.href);});});};LoadView…

Change

“location.href);});});};”

to

“location.href);},listT2H());});};”

What I did was to add a callback function parameter to JQuery’s  load() function.  [Replace listT2H() with calendarT2H() if the target is calendar.]

The JQuery load() function works like this
Load (url,parameters,callback)
Here, url is the URL of the resource being fetched, parameters is a Javascript object whose properties hold values to send to the server, and callback is a callback function that jQuery will call when the Ajax operation is complete. In the snapshot code, url is our list page url, parameters is a magic that Christophe is passing on to modify the list output. However,
as supplied by Christophe’s code generator, There is no callback.

Save the Script text.

I am using SharePoint2007 and I found the cleanest way to use CEWP for scripting is to link a file to CEWP, rather than entering source code directly in CEWP.  I create “webpart” document library and upload both text files to the library.

So, in the above set up,   A Web Part Zone has two webparts. Both are CEWP.

WepPart 1 – CEWP  linked to ../webpart/CrossSiteListSnapshot-modified.txt
WebPart 2 – CEWP (Hidden) linked to ../webpart/TexttoHTML-modified.txt

The page now shows a list from another site with calculated columns correctly rendered.