Sunday, October 18, 2009

SharePoint Cross Site List Views with jQuery

Displaying or sharing lists across webs or site collections is not supported out of the box by SharePoint. The best way to overcome this limitation is by loading the list dynamically. Ok, sounds great but how am I supposed to do that? No worries, it's really pretty easy. I will use jQuery's load function to do the bulk of the work. The code here has been adapted from Christophe's solution . There are a number of changes, the most important being enabling sorting by column.

Load the jQuery library
I'm adding a content editor web part to include the jQuery library. You should probably add the library to your master page. Once you start using it you'll want to add it all over the place. Add a CEWP to your page and add the following script tag. This will load jQuery from Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Add the Script to the page
Add a new CEWP, yes you have to, to your page and add the following script.

<DIV id="ListPlaceholder"><span><b>...Loading...</b></span></DIV>

<script type="text/javascript">
// Make sure the page has been loaded
$(document).ready(function() {

    // Paste the URL of the source list below:
    var SelectedView = "http://test/sites/test/Lists/Tasks/AllItems.aspx";

    // Paste the URL of Add new items page
    var AddNewItems = "http://test/sites/test/Lists/Tasks/NewForm.aspx" + "?Source="+location.href;

    // Title
    var mTitle = "My List Name";

    // Title tool tip
    var MouseOverHeader = "My List Name Description";

    var innerHTML = "<a href=" + AddNewItems + " tabindex='0' accesskey='W'><nobr><span>" + mTitle + "</span><span id='WebPartCaptionWPQ6'/></nobr></a>";

    // Load the list
    $("#ListPlaceholder").load(SelectedView+" [id^='WebPartWPQ'] .ms-listviewtable", function(){processView();setColumnClicks();});

    // Format the returned list view
    function processView(){

        //set the header of the content place holder
        var hdrNode = $("#ListPlaceholder").closest('tr').prev().find('h3');
        hdrNode.html(innerHTML);
        hdrNode.parent(0).attr('title', MouseOverHeader);

        //Remove the dropdown menus for items
        $("#ListPlaceholder *").removeAttr("id").removeAttr("onclick").removeAttr("onfocus").removeAttr("onmouseover");
    
//Format the Items
        $("#ListPlaceholder a").each(function() {
            if ($(this).attr("href").indexOf("javascript") == -1){
                if ($(this).attr("href").indexOf("mailto") == -1){
                    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);}
                }
            }
        });// close each
    }// close processView

//Make the titles sortable
    function setColumnClicks(){
        $("#ListPlaceholder a[sortingfields]").click(function(){
            var srtFields = $(this).attr('sortingfields');
            $("#ListPlaceholder").load(SelectedView +"?" + srtFields + "  [id^='WebPartWPQ'] .ms-listviewtable", function(){processView();setColumnClicks();});
        });   
    }

});//Close document.ready
</script>

Explaining the script
This line in the script really does all of the work

$("#ListPlaceholder").load(SelectedView+" [id^='WebPartWPQ'] .ms-listviewtable", function(){processView();setColumnClicks();});

This line means the following. Find the element on this page with an id of ListPlaceholder and load the content from SelectedView. Only load the content where the element id starts with WebPartWPQ and has the class ms-listviewtable. After loading the content run functions processView() and setColumnClicks().
Another question you may have is what is this Source used all over the place for ? SharePoint uses Source= in the url to return to the previous page.

No comments:

Post a Comment