B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > B l o g P o i n t > Posts > Multiple Lists from Different Sites – Viewing Tool
Multiple Lists from Different Sites – Viewing Tool

What If:

Have you ever wanted to view multiple lists or document libraries from multiple sites in one place?

How about doing it without having to crack open SharePoint Designer or any other authoring tool?

What if we can use OOTB web parts and lists to make this happen?

Overview:

Interested, then lets look at how we can do this.  First off I have give thanks to Christophe for he developed the code to be able to view lists or libraries from different sites.  You can find his two articles here:  A simple method to display a list in another site and Display a list in another site (Cont’d)

Now his code shows us how to view a list on a page, but what we are going to do is allow you to create a list of lists (sounds odd) that you can easily select to view.

So what is this good for?  Well let’s say that you access a task list, issues list, and a document library, which are all on different sites.  Right now you have to go to each site to view the list that you are following.  So now we have a solution so that on one site you can view all those list in one central place.  We will also make it very easy for you to add a list or library to this view.

image (List and Libraries on Multiple Sites)

Now we will be able to go ton one web page on a site and view all of those list in one place.   For example this could be done on your My Site if you have MOSS or can be done on any other page within that site collection.

image

(List and Libraries viewed in one central place)

How To:

We will use a Custom List, Content Editor Web Part (CEWP) and some JQuery/Javascript.  Don’t worry the JQuer/Javascript is really just a cut and paste so a non-techie can very easily accomplish this task.  Actually I geared this so that it would be that easy.

Step 1

In the first step we need to create a list.  This will be a custom list with only two additional columns added.  So locate a site where you want to add this list.  Feel free to name this list anything that you like.

After you add this custom list, you will then add the following two columns.

  • Link – The field name should be “Link” and it should be a “Single line of text”. Do NOT make it a Hyperlink field.
  • Site Link – The field can be any name, I chose “Site Link”.  This field should be a calculated column.  Then add the following code:
    • ="<DIV><a href='#' onclick='ShowList("""&Link&""", """&Title&""")' title='"&Title&"' id='LinkList'>"&Title&"</a></DIV>"

image

(View of new list with list/libraries added)

Nothing is wrong when you see Site Link looking like code.  This is correct it to look like this.  We will transform this code into a nice looking link later on.

Step 2

In step two we are going to create a web part page.  If you have a web part page that has already been created then skip to step 3.

Create a web part page and name anything you like.  One thing I like to do when naming a page that is multiple work, like “List Collection” is to have the name as one word, like “ListCollection”.  Why do I advocate this?  It makes for clean URL’s.  No “%20” in a URL.  Then after the page is created I can edit the title of the page so that the name is changed from “ListCollection” to “List Collection”.

Ok, so you have created a web part page and so now it is time to add the web parts.

Step 3

First we are going to add the custom list to the web part.  I recommend that you add this web part to the left part of the page.  Once added we need to make a few changes. 

  1. Change the the columns being viewed to just show the Site Link column.
  2. Change the Toolbar Type to “Summary Toolbar”.
  3. Do not worry that the Site Link look so much like code, we will address that next.

image

  (View after adding the custom list)

Step 4

Ok, so this is where we make it come alive.  We are now going to add a CEWP and code to this web part page.

  1. Add a  Content Editor Web Part (CEWP)
  2. Next click “open the tool pane” or select from edit “Modified Shared Web Part”.
  3. Now we are going to add the code needed by selecting “Source Code”
  4. Add the following code into the window that popped open:

<table cellspacing='0' cellpadding='0' border='0' width='100%'><tbody><tr class='ms-WPHeader'><td style='width: 100%;'><h3 class='ms-standardheader ms-WPTitle'><nobr><span id="ListPlaceholderTitle">List Details</span></nobr></h3></td></tr></tbody></table>
<div id="ListPlaceholder">List will show up here:</div>

<script type="text/javascript">
if(typeof jQuery=="undefined"){
    var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
    document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript">
function ShowList(url,title)
{

    $("#ListPlaceholderTitle").html("<a href='"+url+"'>"+title+"</a>");
    $("#ListPlaceholder").html("<IMG width='32' height='32' src='/_layouts/images/GEARS_AN.GIF'>");
    $("#ListPlaceholder").load(url+" .ms-listviewtable", function() {  
        $("#ListPlaceholder *").removeAttr("id");  
        $("#ListPlaceholder *").removeAttr("onclick");  
        $("#ListPlaceholder *").removeAttr("onfocus");  
        $("#ListPlaceholder *").removeAttr("onmouseover");
        $("#ListPlaceholder a").each(function() {  
            if ($(this).attr("href").indexOf("?") > 0) {$(this).attr("href", $(this).attr("href")+"\&Source="+location.href);}  
            else {$(this).attr("href", $(this).attr("href")+"?Source="+location.href);}  
        });  
        jQuery.getScript("http://www.bitsofsharepoint.com/Documents/jquery/calcHTML.js", function() { } );
    });
}

</script>

<SCRIPT type=text/javascript>
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
    try {
        TDContent = theTDs[i].innerText || theTDs[i].textContent;
        if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
            theTDs[i].innerHTML = TDContent;
        }
    }
    catch(err){}
    i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    var tbody=document.getElementById("tbod"+groupName+"_");
    var wrapDiv=document.createElement("DIV");
    wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
    var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
    while (j < theTBODYTDs.length) {
        try {
            TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
            if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
                theTBODYTDs[j].innerHTML = TDContent;
            }
        }
        catch(err){}
        j=j+1;
    }
    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</SCRIPT>

 

Now you should be seeing something like this.  See how the links that looked like code are now looking normal.  Now click on any of your links on the left and your should see your list show up.

image

Step 5

Last setup is to now just begin to add the list that you would like to see here.  Go to the list itself, select a view or create a view.  Once you are viewing the list in the view you like, select the URL and copy it.  Come back to this site and click “Add new item”.  Put a title in, past the URL in and save.  You will now see your list, listed.  Click and the view of your list will show up.

image

(Final result should look something like this)

Hope this helps.

Peter

Comments

Links in the list details not working

Hi Peter,

This post is a lifesaver! I've been struggling with trying to show lists from different sites that are not on the same domain and your solution worked beautifully.  My question is that when I display a list that has links in the List Details, the URL gives me a 404. I noticed that the List Details's URLs all try to take on the domain of the page.  Is this because of the javascript or because of the way each link is created?

Thanks!
KC
at 7/24/2009 1:50 PM

RE: Links in the list details not working

KC,

The links in the list should work fine.  How are the links entered in?  Can you send a screen shot?

Peter
Peter Allen at 7/27/2009 10:51 AM

Datasheet

This is AWesome, thanks so much for creating this.  Makes displaying lists on the page so much easier. 

I tried providing a datasheet link, but did not see it displayed?  Any ideas on how I could get this to work?

Thanks,
RT
at 1/12/2010 3:09 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Addition: 2 + 1 = *


Please complete this equation.

Email


This is optional.
Attachments

 T o p i c P o i n t

 E x a m p l e P o i n t