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