jGrowl Notifications for SharePoint 2010 – Part 1

Once I again I start an article with a sentence like “Recently a client needed this, needed that…”. This one is not any different from previous posts’ start-up, intro, motivation …etc. paragraphs. Yes, once again a client needed a alert box, or notification box type of functionality for their SharePoint 2010 homepage. While gathering requirements in client meetings, i just remembered Jan Tielen’s article about using jGrowl to display notifications in SharePoint 2007. So, I thought ‘Why not make it work for SharePoint 2010?’. That’s basically the motivation for this article. Let’s get jGrowl work for SharePoint 2010 first!!! Customizations and nice-to-have features will probably be explained in following articles of this series.

Well, our first questions is “How do I integrate jQuery with SharePoint 2010?” They are many articles written on that, so I won’t be explaining the details of that. Instead I can suggest you to follow masterpage update approach and include your jquery script references in masterpage rather than keeping those files in Shared Documents or some other library in your site. Basically I followed this article.

You start reading that article and ready to customize your masterpage using SharePoint Designer 2010. But now you need the jQuery lib and jGrowl files. You can get the current release of jQuery here. For this article I used version 1.6.2. Also you can download jGrowl and CSS file package from Jan’s article or here. If you want the latest jGrowl lib, then you can get it from jGrowl site.

I created a folder called jQuery in 14 hive and put jQuery and jGrowl files in there. It’s really up to you where you want to store your jQuery related lib files.

So far, it was getting the grounds ready. After you modify your masterpage, it should look like this.

Since in this article I keep the same scenario as explained in Jan’s article, we’ll see notifications for open tasks assigned to your user.

Now go ahead, switch to your site, possibly (but not restricted to ) a team site, and create some sample tasks as shown below.

Next, create a test page and insert a Content Editor Web Part in it.

Then, insert the code provided here. This part of the code is the same with the one Jan provided in his article with the exception of two minor changes.

1. L_Menu_BaseUrl is added while calling lists.asmx web service as highlighted in red below.

2. jQuery and jGrowl references are moved from CEWP to masterpage.

====================================================================

Testing jGrowl for SharePoint 2010…<br/>

<script language=”JavaScript”>

$(document).ready(function() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \
<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: L_Menu_BaseUrl + “/_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='” + L_Menu_BaseUrl + “/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>

====================================================================

Refresh your page and there you go.. Your jGrowl notifications for SharePoint 2010. 🙂

Hope you enjoyed reading this article.

zieglers