Thursday, May 7, 2009 6:11 AM Jan Tielens

Using jQuery in SharePoint to Display Notifications for Open Tasks

In my previous post I explained how you can make use of the Lists.asmx web service of SharePoint, to load list items by using the jQuery Javascript library. The example discussed in that post is simple and easy to understand, but very, very boring. Let’s try to do something useful with that technique: display fancy, unobtrusive notifications for open tasks, when a user visits a SharePoint site. The screenshot below shows the result, but it’s static. In real life the user would see the yellow boxes popping up, and after a couple of seconds they would disappear again (they don’t block the user interface at all).

 

To display these notifications I’ll use the excellent jGrowl extension for jQuery. So to make use of this demo, you’ll need to upload both the jquery.jgrowl_minimized.js and jquery.jgrowl.css files to SharePoint (check the download at the end of this post to get the files). The code below assumes that those two files, and the jQuery library itself, are uploaded to a document library called Shared Documents (which is created by default in a Team Site).

<script type="text/javascript" src="Shared Documents/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="Shared Documents/jquery.jgrowl_minimized.js"></script>

<link href="Shared Documents/jquery.jgrowl.css" rel="Stylesheet"></link>

<script type="text/javascript">

$(document).ready(function() {
    var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Tasks</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='Body' /> \
                           </ViewFields> \
                        </viewFields> \
                        <query> \
                            <Query><Where> \
                                <And> \
                                    <Eq> \
                                        <FieldRef Name='AssignedTo' /> \
                                        <Value Type='Integer'><UserID Type='Integer' /></Value> \
                                    </Eq> \
                                    <Neq> \
                                        <FieldRef Name='Status' /> \
                                        <Value Type='Choice'>Completed</Value> \
                                    </Neq> \
                                </And> \
                            </Where> \
                        </Query>\
                        </query> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
            
        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
});

function processResult(xData, status) {
    $.jGrowl.defaults.position = "bottom-right";
    $.jGrowl.defaults.life = 10000;
    
    var firstMessage = true;
    
    $(xData.responseXML).find("z\\:row").each(function() {
        if(firstMessage)
        {
            firstMessage = false;
            $.jGrowl("<div class='ms-vb'><b>You have open tasks on this site.</b><div>",
                {   
                    life: 5000
                }
            );
        }
    
        var messageHtml =
            "<div class='ms-vb'>" +
                "<a href='Lists/Tasks/DispForm.aspx?ID=" + $(this).attr("ows_ID")
                     + "&Source=" + window.location + "'>" +
                     "<img src='/_layouts/images/ITTASK.GIF' border='0' align='middle'> " +
                     $(this).attr("ows_Title") + "</a>" +
                "<br/>" + $(this).attr("ows_Body") +
            "</div>";
        $.jGrowl(messageHtml);
    });
}
</script>

Since we’d like to display those notifications when a user visits the site, we need to put a Content Editor Web Part of the home page (typically /default.aspx). In this content editor web part, copy and paste the Javascript code from above. In this code once again, first the SOAP envelope message is constructed. Notice that both the Title and Description fields are requested (the internal name of the Description field is Body). In the query element two conditions are set; the AssignedTo field should be equal to the currently logged on user, and the Status field can’t be equal to Completed. The message is POST-ed to the Lists.asmx web service by using jQuery’s ajax function.

The response of the web service call is processed in the processResult function. For every row element in the result, the jGrowl function is called to display a notification. The contents of such a notification are a small HTLM string containing a link to the task, and the body of the task. So that’s the story of how a small piece of Javascript code can have a pretty nice result in SharePoint! :-)

You can download the source code for this demo here. The zip file contains the necessary libraries and CSS files (which you have to upload to the Shared Documents document library for example) and the code you have to copy/past in a Content Editor Web Part (using the Source Editor button!). Additionally you can also find an exported web part (.dwp file) in the zip file, which you can very easily import or add to the web part gallery of a site (so you don’t have to copy/past the code yourself).

Filed under:

Comments

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Sunday, May 10, 2009 11:01 AM by Sandeep

Great post.. you got good handle on JQuery...when you get some time.. Is it possible to quickly demonstrate JQuery modal popup in Sharepoint.. i tried it and it works but it then started breaking the Modify the Shared webpart section...

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Monday, May 11, 2009 2:07 PM by Walter

The notification box opens up at the bottom left of my screen... below all content on the page... I changed  $.jGrowl.defaults.position = "bottom-right"; to "top-left" with no effect.

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Tuesday, May 12, 2009 6:19 AM by Mandar

Hi,

I was going through u r blog and found it very informative.

But if I am looking for help for any particular feature i cannot search

in your blog.

Is there any search feature available on your blog

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Tuesday, May 19, 2009 1:17 PM by Didier Jeanson

The notification box opens below the SharePoint page (a scroll bar appears in IE7).

But it works fine with Firefox 3.

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Tuesday, May 19, 2009 5:37 PM by Eric Maurer

My notifications where showing up below the SharePoint page also. I changed the adding position:absolute to the div.jGrowl in the CSS fixed the problem.

div.jGrowl {

padding: 10px;

z-index: 99999;

position:absolute;

}

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Tuesday, June 30, 2009 9:40 AM by Tobias Zimmergren

Jan, this is brilliant.

I just got tons of new ideas to work with :-)

Cheers mate.

# re: Using jQuery in SharePoint to Display Notifications for Open Tasks

Monday, July 27, 2009 10:51 AM by Lars

Hi Jan,

Is it possible to retrive values for a lookup coulmn in a query?

I have a field of the LookupMulti type in my query but it always returns null. Is there a way (using jQuery) to retrive the values?

Thanks