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:
Using my scripts, here is how the list is rendered in a sub-site:
The list is pulled twice in this demo: the first using an iframe, the second using jQuery.
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:
You can also decide to stick to the default view:
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:
- 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
Update [April 11, 2010]: check out this post for an updated version of the jQuery code.
We can get a similar result with jQuery’s load function:
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!