Released: SharePoint LiveListData

Last week I published my fourth CodePlex project, called SharePoint LiveListData. It is an “assembly-free” solution which means that it contains no server side code. It is implemented as a jQuery plugin.

So what does it do? It uses AJAX to automatically reload any list-based Web Parts as soon as a change in the underlying list data is detected. You can also have your custom web parts refreshed, as long as they have a web part property that contains the ID of the list they depend on!

I have put online a screencast that demonstrates the the user experience.

Want to know how it works? Allow me to describe using some pseudo code..

OnDocumentLoaded

Make a single call to WebParts.asmx web service using AJAX to return an xml document with all web parts on the current page

Parse returned xml and find all web part nodes that contain a ListID element (which holds the value for the ListID web part property)

Create and populate a javascript object that contains a list of all ListIDs that we found in the returned xml, plus a list of all WebPartIDs per ListID, also retrieved from the xml (more or less creating a hashtable with the key being the ListID and the value being an array or WebPartIDs).

LOOP with interval = $configured_interval

Make a single call to Lists.asmx web service using AJAX to retrieve “LastDeleted” and “Modified” properties for each ListID in the hashtable that was created earlier.

For each ListID in hashtable

compare values for LastDeleted and Modified with those values retrieved as part of the previous loop iteration for this ListID (unless it’s the first iteration).

If a change in one of the two property values has been detected (indicating that someone inserted, updated or deleted an item) mark this ListID as “UpdatePending”, storing it on our javascript object that holds our ListIDs and WebPartIDs.

If any of the ListIDs are marked as UpdatePending

Make an AJAX request to page that is currently loaded in the browser (allowing us to get a fresh copy of the current page containing the new list data)

For each ListID marked as UpdatePending

For each WebPartID associated with ListID in our javascript hashtable object thingy

Replace div with matching WebPartID attribute in current document with “same” div in AJAX response (which contains the new list data).

This is basically how it works in a nutshell.

For examples on usage, check out the downloads tab on the SharePoint LiveListData CodePlex site, where you can also download the script!

20 Responses

Using SharePoint LiveListData on AJAX enabled WSS 3.0. Dropped the jquery.sharepoint.livelistdata.cewp.txt on a page that also contains the OOB Tasks list WebPart. WebPart is not updating…. Do I need to alter the text before inserting into the CEWP? Thanks for the work on this.

unfortunately, because of the way it reloads a web part (it does a web request to the current page in the background), it will not remember the state of the webpart before it was refreshed (there is no postback).

I would be interested to hear more about your xslt scenario you descried in your comment from 21 November. Would like to find out why that isn’t working. Could you let me know how created your webpart?

Would be great if there was a step by step to use this, I have yet to be able to get it to function in any way.
I added all .js files to my _layouts, referenced them in the masterpage and nothing happens when I update a list item.
Yes did change wpproperties: [“ListName”], to my list name.
Don’t have a clue whats wrong their are no errors, I even disabled all of my other scripts to see if it was being blocked nope not it.
Any help would be nice.

Aloha Dave,
If you’re required to use CEWP like me download the “jquery.sharepoint.livelistdata.cewp.txt” version, save it to a document library on your site, copy the URL where you saved it to, paste the URL into the “Content Link” field of the CEWP.

You can copy the code inside the “jquery.sharepoint.livelistdata.cewp.txt” and paste it into the “Source Editor” of the CEWP if you like instead. Both will work. I just like to use the link method because if I reuse the code on other pages then make a change to the original file it will automatically be populated to all pages.

Aloha,
This tool works realy well when I test it at home where I have an internet connection but at my office only intranet is allowed. No Internet. I’ve been trying to modify your code to use a local copy of JQuery with no success. Do you have a copy of the code that doesn’t use Google? Any pointers would be greatly appreciated. Using IE 7, SharePoint 2007.

I could use some pointers for another requirement. I need to have a specific CEWP refresh right after a list is refreshed.

WHY: I’m using TextToHTML to display colors in a list but when the list is refreshed using your LiveListData it shows the HTML instead of the color unless I reload the whole page. I assume this is because the TextToHTML has already run and needs to be initiated again.

Where and what would I add to reload just that specific CEWP after the list has refreshed?