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

Tip: Debugging Feature Event Receivers in SharePoint Sandbox Solutions

I accidently discovered this yesterday and thought I’d share. If only this same technique worked with farm solutions…

If you’ve done any sandbox development you have probably had many moments when you pressed F5 to start debugging or done Build|Deploy only to see a failure because one of your feature receivers threw an error. To debug these problems in farm mode, you attach the debugger and then try to activate the feature via the site, PowerShell, or stsadm. It’s kind of a pain.

In sandbox mode, if you attach the debugger to the worker process manually before you deploy the solution you can catch and debug problems in your feature event receivers. To do so, select Debug|Attach to process and attach to SPUCWorkerProcess.exe.


Then, simply hit F5 or select Build|Deploy Solution. I wish I’d figured this out a year and a half ago. It would have saved me a great deal of time!

Happy coding!
–Doug

Author: Doug Ware

Hiding a SharePoint Ribbon Button with CSS

I spent far too long this morning trying to hide a single ribbon button on a single page. The page is part of a sandbox solution so I couldn’t do the work server side, and because the page was a one-off in a library I didn’t want to use a HideCustomAction.

My first attempt was CSS, but that didn’t work. I assumed (incorrectly) that the reason my style didn’t stick was because the ribbon’s JavaScript was toggling the display. The problem turned out to be that I didn’t understand CSS quite as well as I thought!

The ribbon’s various elements use ID attribute values that contain periods. The values correspond to the cmdui.xml file that defines the ribbons for SharePoint Foundation. To affect the elements by via their ID’s with CSS you have to use an escape (backslash) before the period. For example, to hide the New Item button, use the following syntax:

#Ribbon.ListItem.New.NewListItem-Large
{
display:none;
}

 

This is why I love software development! Frustration turns to joy!

–Doug

Author: Doug Ware