This is one of the frustrations with the SharePoint UI: you can’t display on your site a list from another site.

Well, of course, you have the Page Viewer Web Part, which allows you to embed in your page another Web page. But usually the result doesn’t look good, as the embedded content doesn’t fit nicely in the host page.

If you are looking for something nicer, there is still hope. You may for example have SharePoint Designer, in which case you can use the Data View Web Part to display a list from another site. However, in SharePoint 2007 I have not been able to make it work across site collections (did I miss something?).

The next level is to build your own viewing interface, and use XML to retrieve the content of the list (through the URL protocol, Web Services or RSS for example).

For today, let’s keep it simple. I’d like to offer an alternate option: a “quick and not too dirty” way to display a simple, flat list in another site.

I already mentioned that the iframe was part of my toolbox, so let’ s put it to work. As you’ll see, there are several limitations to my method, but it should be helpful if for example you’d like to share a contacts list, an announcements list or an events list across sites or even site collections. Also, just like for the “HTML calculated column”, I hope to bring some improvements in the future.

I have also written an adaptation using jQuery, as it seems to quickly gain popularity in the Microsoft world.

First, a demo

On my top level site, I maintain a list of updates:
http://www.pathtosharepoint.com/Lists/Updates/Newsletter.aspx

Using my scripts, here is how the list is rendered in a sub-site:
http://www.pathtosharepoint.com/CrossSite/default.aspx
The list is pulled twice in this demo: the first using an iframe, the second using jQuery.

Your turn!

The first step is easy, you may already have done it: choose the list that you want to display in other sites, and create a specific view if needed. The URL of your page will look like:
http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx
You can also decide to stick to the default view:
http://domain.com/SiteCollection1/SourceSite/SourceList/AllItems.aspx
Or maybe you have no control over the source site, in which case you’ll simply pick one of the existing views.

Second step: in the following code, replace the dummy URL with the URL of your source list. Then, on the target site drop the code in a CEWP:

<!-- Load and display list - iframe version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->

<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>

<!-- Paste the URL of the source list below: -->
<iframe id="SourceList" style="display:none;" src="http://domain.com/SiteCollection/SourceSite/SourceList/MyView.aspx" onload="DisplayThisList()"></iframe>

<script type="text/javascript">
function DisplayThisList()
{
var placeholder = document.getElementById("ListPlaceholder");

var displaylist = null;
var sourcelist = document.getElementById("SourceList");

try {
   if(sourcelist.contentDocument)
      // Firefox, Opera

      {displaylist = sourcelist.contentDocument.getElementById("WebPartWPQ1") ;}
   else if(sourcelist.contentWindow)
      // Internet Explorer

      {displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ1") ;}
   else if(sourcelist.document)
      // Others?

      {displaylist = sourcelist.document.getElementById("WebPartWPQ1") ;}
}
catch(err) { alert ("Loading failed");}

displaylist.removeChild(displaylist.getElementsByTagName("table")[0]);
var allDescendants = displaylist.getElementsByTagName("*");
for (i=0;i<allDescendants.length;i++) {
allDescendants[i].removeAttribute("id");
allDescendants[i].removeAttribute("onclick");
allDescendants[i].removeAttribute("onfocus");
allDescendants[i].removeAttribute("onmouseover");
}
placeholder.innerHTML = displaylist.innerHTML;
}
</script>

Some limitations

- for now, the above code will only work for simple, flat lists. For example it won’t work with grouped items. I plan to share improved versions in the future, your proposals are welcome!
- the context menus won’t work, and are actually disabled. You can only view the items and click to open them.
- it works fine if the source list and the target site are on the same domain (same http://domain.com). If you try on different domains, let me know the result (it may depend on your browser).

An adaptation for jQuery

We can get a similar result with jQuery’s load function:

<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>

<script type="text/javascript">
// Paste the URL of the source list below:
var SelectedView = "http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id");
$("#ListPlaceholder *").removeAttr("onclick");
$("#ListPlaceholder *").removeAttr("onfocus");
$("#ListPlaceholder *").removeAttr("onmouseover");
});
</script>

Note: remember that jQuery is actually JavaScript. jQuery gives a nice crisp look to the code, but it doesn’t necessarily mean that it runs faster.

How it works

Each Web Part on a page has a unique identifier. WebPartWPQi. If only one list is diplayed on the page, its identifier is WebPartWPQ1. This is what we use in the script to call the list.

Update [Jan 22, 2009] I checked a couple MOSS implementations, and it seems that the WebPartWPQ1 id is assigned to the search drop-down menu. In this case, you should replace WebPartWPQ1 with WebPartWPQ2 in the above scripts.

Any jQuery experts out there?

I am very curious about the load function. It looks quite powerful, and I wonder what’s behind… Feel free to step in if you have any information!

Possibly related posts: (automatically generated)