Jaap Vossers' SharePoint Blog

Just another WordPress.com site

Released: SharePoint LiveListData

with 20 comments

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!

Written by jvossers

November 3, 2009 at 11:40 pm

20 Responses

Subscribe to comments with RSS.

  1. Hi,
    any chance to make it work with grouped views?

    Cheers

    Wiktor

    November 18, 2009 at 4:50 pm

  2. 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.

    Bill

    Bill Burke

    November 21, 2009 at 11:48 pm

  3. After further testing your solution works as advertised (really well)… I have found that it will not work after converting to xslt. It did however, as a web part, work with grouped and filtered views.

    Bill Burke

    November 22, 2009 at 6:29 am

  4. If the view used in the LVWP is group and collapsed, after refreshing the data it expands all items.

    Is there something I can do to prevent that from happening?

    Thanks, Bill

    Bill Burke

    November 22, 2009 at 9:18 pm

  5. Hi Bill,

    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?

    Jaap Vossers

    November 22, 2009 at 11:05 pm

  6. @Wiktor, it should work just fine with grouped views.

    Jaap Vossers

    November 22, 2009 at 11:05 pm

  7. Jaap,

    Great work, your script does exactly what I needed, is very efficient, and easy to implement. Thank you for sharing this!

    Lee Osenton

    February 22, 2011 at 10:28 pm

  8. Hi,

    any chance to make it work on SharePoint 2010?
    Thanks

    Vicki

    March 7, 2011 at 2:10 pm

  9. 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.

    Tom

    March 24, 2011 at 5:26 pm

  10. I might not be understanding how to use this. I copied the js text into a CEWP. But it just shows up with all the code language. Can you give me some direction on how to install?

    Dave

    August 9, 2011 at 4:24 pm

    • 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.

      Rogue Veggie

      November 18, 2011 at 9:17 pm

  11. 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.

    Rogue Veggie

    November 18, 2011 at 1:11 am

    • OK, I was obviously tired and figured it out as soon as I looked at it today. Besides just changing the inital script load location to:

      And removing the below jquery loader and wrapper:

      google.load(“jquery”, “1.3.2″);
      google.setOnLoadCallback(function() {
      … …
      });

      I forgot to replace the the above wrapper with:

      $(window).load(function(){
      … your original code …
      });

      Rogue Veggie

      November 18, 2011 at 9:11 pm

  12. 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?

    Rogue Veggie

    November 18, 2011 at 10:04 pm

    • Hi Rogue,

      I have similar problem. We use priority indicators in the list provided by jquery.
      LiveList data is great stuff but we need to have it working together with our priority indicators.

      Did you find any solution for this?

      Thanks

      Lukas

      June 19, 2012 at 8:14 am

  13. Somebody got it working on SP 2010 ?
    it is exactly what i’m looking, but can push it to work in sp2010.. :(

    multimedijaEugenijus

    February 28, 2012 at 8:08 pm

    • Hi there,

      in SP2010, the XsltListViewWebPart has autorefresh functionality built-in. All you need to do is configure it properly.

      Regards,

      Jaap

      jvossers

      February 28, 2012 at 9:01 pm

  14. I have some filtered Datasheet view web parts and the CEWP version doesn’t update them. Is there something different I need to do for this setup?

    jbetts

    June 14, 2012 at 12:21 pm

  15. Hi All,

    I need some help. I’ve tested it and works great! However, I have an issue and I don’t know what’s the best way to resolve it.

    I have a board with a lot of webparts. In one of them, I have the following piece of code:
    //
    // Text to HTML
    // Feedback and questions: Christophe@PathToSharePoint.com
    //
    var theTDs = document.getElementsByTagName(“TD”);
    var i=0;
    var TDContent = ” “;
    while (i < theTDs.length) {
    try {
    TDContent = theTDs[i].innerText || theTDs[i].textContent;
    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("”) >= 0)) {
    theTDs[i].innerHTML = TDContent;
    }
    }
    catch(err){}
    i=i+1;
    }
    //
    // ExpGroupRenderData overwrites the default SharePoint function
    // This part is needed for collapsed groupings
    //
    function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    var tbody=document.getElementById(“tbod”+groupName+”_”);
    var wrapDiv=document.createElement(“DIV”);
    wrapDiv.innerHTML=””+htmlToRender+””;
    var theTBODYTDs = wrapDiv.getElementsByTagName(“TD”); var j=0; var TDContent = ” “;
    while (j < theTBODYTDs.length) {
    try {
    TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("”) >= 0)) {
    theTBODYTDs[j].innerHTML = TDContent;
    }
    }
    catch(err){}
    j=j+1;
    }
    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
    }

    So at page load, this is run, but not when the list is refreshed. Therefore the layout is completely screwed up, until I refresh the whole page.

    I guess that when the list is refreshed, this piece of code will need to rerun, but I’m not sure of where to put it.

    I’m using the CEWP.txt version.

    Any help would really be appreciated.

    Thank you
    Patrick

    Patrick

    February 14, 2013 at 6:43 pm


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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: