Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

jGrowl Notifications for SharePoint 2010 – Part 1

Posted by zieglers on July 28, 2011

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

Advertisements

3 Responses to “jGrowl Notifications for SharePoint 2010 – Part 1”

  1. […] jGrowl Notifications for SharePoint 2010 – Part 1 […]

  2. […] https://zieglers.wordpress.com/2011/07/28/jgrowl-notifications-for-sharepoint-2010-part-1/ […]

  3. […] jGrowl Notifications for SharePoint 2010 – Part 1 […]

Leave a Reply

Please log in using one of these methods to post your comment:

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

 
%d bloggers like this: