Display a list in another site collection

The Idea

Original Post: http://blog.pathtosharepoint.com/2009/01/22/a-simple-method-to-display-a-list-in-another-site/

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

Update: http://blog.pathtosharepoint.com/2010/04/09/cross-site-list-snapshot-version-2-0-beta/

The main improvements in version 2:
– the script now works for both lists and calendars
– there won’t be any conflict if you place several scripts on the same page
– a form helps you select your options, and includes a debugging utility

Script Generator: http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Cross-Site-List-Snapshot.aspx

This script allows you to display in a SharePoint page a view taken from another site or site collection. In SharePoint, the standard way to achieve this is to use a Page Viewer Web Part. Compared to a PVWP, my solution:
– looks better, as the content from the other site is integrated in the page layout
– offers less functionality, as most of the interactivity is lost in the process. This is why I am using the term “snapshot”, rather than “view”.

Display Grouped Items: http://mekalikot.blogspot.co.uk/2011/11/display-grouped-items-in-list-or.html

<!-- Load and display list - iframe version for Grouped Items SP2010-->
<div id="ListPlaceholder" style="display: none"><img src="/_layouts/images/GEARS_AN.GIF" alt=""/></div>
<!-- Paste the URL of the source list below: -->
<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("WebPartWPQ2") ;}
else if(sourcelist.contentWindow)
// Internet Explorer
{displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ2") ;}
else if(sourcelist.document)
// Others?
{displaylist = sourcelist.document.getElementById("WebPartWPQ2") ;}
}
catch(err) { alert ("Loading failed");}
placeholder.style.display = "none";
sourcelist.contentDocument.getElementById("ctl00_IplsFooter").style.display = "none";
sourcelist.contentDocument.getElementById("MSO_ContentTable").style.marginLeft = "0px";
sourcelist.contentDocument.getElementById("s4-ribbonrow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-titlerow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-leftpanel").style.display = "none";
}
</script>

My Revision

Before we begin, you need to make sure that the view your using has the “Basic Table” style applied (Library/List Settings > Views).

Add a “Script Editor” web part to your page and add the following script.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function DisplayThisList()
{
$("#SourceList").contents().find(".ms-gb a").click(function() {
DisplayThisList();
});

$("#SourceList").contents().find("#suiteBar").hide();
$("#SourceList").contents().find("#s4-ribbonrow").hide();
$("#SourceList").contents().find(".ms-core-navigation").hide();
$("#SourceList").contents().find("#contentBox").css('margin-left','0px');
$("#SourceList").contents().find("#contentRow").css('padding-top','0px');
//$("#SourceList").contents().find("#MSOZoneCell_WebPartWPQ2").css('margin-bottom','0px');
$("#SourceList").contents().find("#Hero-WPQ2").hide();
$("#SourceList").contents().find("#titleAreaBox").hide();
$("#SourceList").contents().find("#s4-titlerow").css({'height' : '0px','padding-top' : '0px','padding-bottom' : '0px'});

$("#SourceList").contents().find("th.ms-vh").removeAttr("onmouseover");
$("#SourceList").contents().find("th.ms-vh2").removeAttr("onmouseover");
$("#SourceList").contents().find("a.ms-headerSortTitleLink").removeAttr("onclick onfocus href").css('text-decoration', 'none');

setTimeout(function(){
$("#SourceList").contents().find(".ms-subtleLink").attr('target', '_blank');
$("#SourceList").contents().find(".ms-vb2 a").removeAttr("onclick onfocus onmousedown").attr('target', '_blank');
}, 1000);

}
</script>
<ifram id="SourceList" src="http://intranet/Shared Documents/Forms/SelectedViewGroupBy.aspx" frameborder="0" onload="DisplayThisList()" width="100%" height="500"></ifram>

Note: Replace ifram with iframe (iframe are not allowed on WordPress.com for security reasons).

list-in-another-site

I hope you find my solution helpful.

Advertisements

2 comments

  1. Kelly

    Hi there – this in theory is what I am looking for. I am using SharePoint 2013 and when I add your script to Script Editor webpart, the whole page inserts into the webpart (including – I am after just the list view (much list a list view webpart). Is that possible?

    • Kelly

      Just to add to this – once I refreshed the page, it actually didn’t “minimise” and show just the list view. Each time I refresh, it shows the whole page for a second or two and then minimises to just the list. Not perfect. If anybody else has any other suggestions for this or another solution?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s