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 > Categories
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

SharePoint /_layout/images/ Full List - Update
I have updated the area where you can see all the different images that SharePoint provides OOB.  The original setup called up each image, well with a grouping of over 900 images that could be a over a meg of data, not acceptable. 
 
So the new setup is one image showing all the individual images with the name of the file below.  This will make it much faster to view the images.
 
 
Click to View SharePoint Images
 
SharePoint /_layout/images/ Full List
Not everyone has admin access to see under the hood of SharePoint.  One of those areas is the "/_layout/images/" directory where SharePoint stores its images. 
 
As user who customizes SharePoint and uses JQuery and Javascript to improve the experience I found that I wanted to use the same images that came with SharePoint, but I did not have access.  So with the help of Paul Greneir I was able to get my hands on the 2000+ images found in "/_layout/images/".
 
My first reaction was wonderful, now I can organize and have access to all these images.  Then when I realized it was 2000+ images, I took great pause.  That is a lot of images to review and organize.
 
Here is what I am attempting, not to loose my sanity.  So far I have grouped these in two ways.  First, I have grouped them alphabetically.  Second, I have grouped them by size of the image (Small, Medium, Large).
 
I have also identified which images can be found in WSS and MOSS (both) and only on MOSS (MOSS Only).
 
Here is a sample view: 
 
 
 
Click to View SharePoint Images
 
Print - Clean Pages and Lists on any Page
There was a question on www.endusersharepoint.com stump the Panel about how to print a list of issues one issue on a page.  This got me to thinking about the solutions that are out there and how I would solve this problem.  I decided to put together a list of solutions that I know of for printing.
 
I have three solutions.  The first allows you to print any page with out the top portion of the page.  Second is the solution that Paul Grenier (www.endusersharepoint.com) put together to print any list on a page. And the Third is one that I put together that combined Paul's solutions and Christophe's (pathtosharepoint.wordpress.com) solution to have a calculated column have HTML, which allows us to create a page break after each issue, thus be able to print an issue on its own page.
 
 
Enjoy,
 
Peter
Calculated Column - HTML - The Progress Bar
This is one of the best finds for SP that I have come across. Part of it has to do with I am implementing several project management sites for the company. One has to do with the Product to Market process and the others have to do with PMO. The development of these sites needed to communicate progress in an easy way.

I looked at using KPI's, but I was not impressed with what I could do with them. They to me did not make it easy to tell the story of how the project was progressing. Most people used to progress bars and so I went searching for a way to do this with SP. I looked far and wide and it was looking like I would need to purchase a third party tool. Did not like the prospect of having to convince upper managment of the tool or to have to convince IT to install a thrid party tool, they are not keen on doing this.

Then I found the site Path to SharePoint. Christophe provided a solution that cost nothing and required no installation from IT. The solution used the caclualted column to do html and you could base it on caculations from any field. It was this post that got me all excited about what could be done. A progress bar for your tasks list. I then played around with it and developed a solution that met the needs of my users.



In the interest of sharing, Peter Allen from California has sent me his own implementation of the progress bar for task lists.
I’d be surprised that his example exactly fits your needs, but the purpose here is to show that the method can be pushed far beyond the basic examples I used in my tutorial.
Peter takes into account three fields to build the progress bar: process status (choice), progress (choice) and % complete. Here is the formula:

="<DIV style='background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",([% Complete]*100),100)&"%;'></DIV></DIV>"


The legend at the bottom is plain HTML inserted in a separate Content Editor Web Part:

<SPAN class=style7><STRONG>Legend</STRONG></SPAN><SPAN class=style6>:&nbsp; <FONT style="BACKGROUND-COLOR: #c0c0c0">[&nbsp;&nbsp;&nbsp; ]</FONT> Not Started&nbsp; <FONT style="BACKGROUND-COLOR: #ccff66">[&nbsp;&nbsp;&nbsp; ]</FONT> On Track&nbsp; <FONT style="BACKGROUND-COLOR: #ffff99">[&nbsp;&nbsp;&nbsp; ]</FONT> Early warning of potential risk&nbsp; <FONT style="BACKGROUND-COLOR: #ff5050">[&nbsp;&nbsp;&nbsp; ]</FONT> Serious risk to completion&nbsp; <FONT style="BACKGROUND-COLOR: #99ccff">[&nbsp;&nbsp;&nbsp; ]</FONT> Completed&nbsp; <FONT style="BACKGROUND-COLOR: #000000">[&nbsp;&nbsp;&nbsp;&nbsp; ]</FONT> Excluded</SPAN>

Update [09/30/2008]Below a second version that displays the % complete value on the chart. Note the use of absolute positioning, so that the value doesn’t interfere with the bar. The formula is written for both Internet Explorer and Firefox.



="<DIV style='position:relative; background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),TEXT(1,"0%"))&";'>&nbsp;</DIV><DIV style='position:absolute;top:0px;left:0px'>"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),"")&"</DIV></DIV>"
 
Related info on BitsOfSharePoint:
Calculated Column - HTML - Java Script to Use
Here is the Javascript to use to do that caclulated columns.
 
This was copied from Chrstophe's site.  Click here to get the latest version. 
 

<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>
 
 
This blog is about HealthCare, SharePoint, Technology and things that catch my interest.
 

 
Below is BitsOfSharePoint related links:
 

 ‭(Hidden)‬ Content Editor Web Part ‭[2]‬

 T o p i c P o i n t

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

 All Posts

 > SharePoint Book - Global Navigation Solution 2010
 > SharePoint 2007 - Wiki View Solution
 > SharePoint - Global Navigation 2010 Solution In Progress
 > SharePoint – A Global Navigation Solution Across Site Collections – Permissions
 > SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution
 > SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment
 > Tab Page for SharePoint Version 2.0
 > SharePoint - A Global Navigation Solution across Site Collections
 > Search Lists and Document Libraries by Metadata
 > SharePoint Information Architecture with MindManager by MindJet
 > SharePoint Themes – More than Pretty Colors – Information Architecture
 > Site Owners – Display and Manage
 > SharePoint: ToolTip 2.0 (Posted on EndUserSharePoint.com)
 > jQuery – List and Document Library Filter Version 2.2
 > SharePoint CEWP Solution Interface – Part II
 > SharePoint CEWP Solution Interface – Introduction
 > jQuery – List and Document Library Filter Version 2.1 - Released
 > jQuery – List and Document Library Filter Version 2.0 – Part 2
 > What's next? List Filter, Search and CEWP Options Interface
 > jQuery - List and Document Library Filtering Solution
 > Wiki Customization Update: Add List Views to Wiki Content
 > Presenting at Sacramento SharePoint User Group
 > Where have I been?
 > Launch of Peter Allen's Blog
 > Multiple Lists from Different Sites – Viewing Tool
 > Wiki Customization - Update
 > Tab Page for SharePoint
 > JQuery - View a list from any site with Auto Refresh
 > Wiki - Customization
 > Challenge: Twitter and Managing/Following Multiple Interests - One Account or More?
 > SharePoint /_layout/images/ Full List - Update
 > SharePoint /_layout/images/ Full List
 > JQuery - Improved Pop-up for Lists, Document Libraries, Calendar and Username with Examples
 > JQuery - List Collapse/Expand Multi-line Text Fields
 > JQuery - Pop-up for Lists
 > Document Library - Another great article on using metadata
 > JQuery - View a list on any site from any other site
 > CSS - View all aspects of your SharePoint Site CSS Theme
 > JQuery - Manage Multiple implementations of a JQuery Solution
 > JQuery - Quick Launch with Tool tips with Simple Tip plug-in
 > JQuery - Solutions - Highlight list Item -Updated
 > Navigation - QuickLaunch add with CEWP and JavaScript
 > EndUserSharePoint.com - Become Your Company’s SharePoint Superstar
 > Print - Clean Pages and Lists on any Page
 > Document Library - Setup a Content Type (Link to a Document)
 > Meeting Minutes - Use of a Blog to manage
 > Blogs - How to change Blog Posts to allow multiple selections for Categories
 > Lists - Cascading Columns
 > Topic Point - Update - Added Ranking
 > Document Library - URL Length Problem/Solution
 > JQuery - Calendar with Mouseover preview pain
 > Navigation - Custom Quick Launch Look
 > JQuery - Solutions - Highlight list Item
 > Site Navigation - Quick launch in Webpart Pages (Continued)
 > Site Navigation - Quick launch in Webpart Pages
 > Issue Tracking - Custom Setup
 > BitsOfSharePoint Launched Today
 > Blog Setup - Comments and Spam - Today's date column
 > Calculated Column - Formula - Yes/No Field
 > SharePoint Add-ons - Embed Video in a Blog
 > Meeting Minutes - Use a Blog
 > Calculated Column - Formula - Fix Sort by Date
 > Calculated Column - HTML - The Progress Bar
 > SharePoint Blog lack of Features - Statistics - Part 1
 > Calculated Column - HTML - Java Script to Use
 > BitsOfSharePoint - What is this site and blog about?