jQuery Plugin to Display SharePoint 2010 List Views

I’m working on a new line of products for SharePoint Online / Office 365. A few of the pages need to display list views whose locations are unknown at design time – the lists are created on the fly and can have any title and a single page displays a view based on what the user chooses. This means that I can’t use a data view Web Part because it is tied to a specific list and view.

RenderAsHtml

My first attempt involved the use of the RenderAsHtml method of SPList and SPView. The code for this is super simple:

When I tested the Web Part, I couldn’t believe my eyes. It worked on the very first try!

Unfortunately, this was just my old friend SharePoint playing a fun joke on me. As soon as I clicked an item I saw the following error message:

Yes – This item is no longer available. It may have been deleted by another user.

The reason this error displays is that the HTML emitted by RenderAsHtml is for the V3 UI. It doesn’t match what the SharePoint 2010 JavaScript expects and the result is this error. I started digging into how I might make this sucker work. Along the way I learned a lot about the client side behavior. In fact, I learned so much that I decided a general solution based on RenderAsHtml was not going to fly.

Near as I can tell, the RenderAsHtml method in SharePoint 2010 is Microsoft’s little joke on us – it’s there to make you think you can get it to work if you just try hard enough.

jQuery Pluggin

My next step was to cry out in frustration and rage redouble my efforts and get creative. It occurred to me that a SharePoint site is just full of properly functioning list views. I thought ‘hmmm, jQuery Get()’. In jQuery the Get() method issues an asynchronous HTTP get for a page and gives you a string that contains the returned HTML. The final solution is a jQuery plugin extracts the view HTML and script from a list’s view page, e.g. AllItems.aspx, and inserts it into the current page.

Of course it’s not quite that simple – I’ll explain how it all works in the next post. In the meantime, you can get the plugin from here: http://www.elumenotion.com/Downloads/listViewPlugin.zip

To use the plugin you will need to first include jQuery – I built this with jQuery 1.6.2 and I have not tested it with earlier versions!

Second: you will need to modify the site’s default master page to include a DIV that marks the end of PlaceHolderMain:

<div id="MSO_ContentDivEnd" style="display:none"></div> makes it easy for the pluggin to know where the view ends. You can probably modify the plugin to avoid this requirement, but I have a custom master page already and this was the easiest solution for me!

Third: Include the listViewPlugin.js. (very important!)

Fourth: Add an anchor element to the page where you want the view as follows:

<a href=[/listurl/viewPage.aspx] class="listView"></a>

 

The href is the URL to the view and class is either listView or libraryView depending on if the view is a list or a library, respectively.

Finally: add the script to load the view on document ready.

<script type="text/JavaScript">

    jQuery(document).ready(function($) {

        $('a.libraryView').loadListView();

    });

</script>

 

The Result

Below you see the result in a Content Editor Web Part. Note that the menu works!

Filtering, sorting, and paging all work too!

Let’s filter by document type.

I’ve tested this on IE, FireFox, Chrome, and Safari. It works with basic list and library types. It does not work with Calendar or GANTT views – however, in the case of Calendar views I think the missing step is to link to the appropriate style sheet.

Enjoy!
–Doug

Author: Doug Ware