This article is the second part of “jGrowl Notifications for SharePoint 2010” series. If you haven’t read the first part of the series, you can read it here.
In the first article, we implemented the infrastructure for “jGrowl Notifications for SharePoint 2010”. From now on, i’ll refer to it as SPNotifications. First version was pretty raw in the sense that it was still using soap envelopes which are really hard to construct and not that practical to use. Also first version was just a teaser and it was missing some business logic too.
What’s in this article?
In this article i’ll try to show how to replace AJAX calls using soap envelopes with SPServices calls.
“SPServices is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client side and requires no server install.”
Once we have a cleaner syntax, we’ll add a simple logic where notifications will be read from a custom list called -you guessed it- Notifications. Also upon closing a notification, we’ll implement a close callback logic which will mark notification as read. That should do it as for the scope of this second article. Further improvements will be explained in future articles of the series.
Implementation
First of all, let’s try to list implementation tasks:
- Include SPServices default syntax.
- Generate CAML query for AJAX call.
- Implement completeFunc details.
- Implement MarkAsRead function.
- Test it!!!
1. Include SPServices
Inside document.ready include this SPServices call as shown below.
// ***************************************
$().SPServices({
operation: “GetListItems“,
async: false,
listName: “Notifications“,
CAMLQuery: query,
CAMLViewFields: fields,
completefunc: function (xData, status){
} // end – completefunc
}); // end – SPServices
// ***************************************
Operation is GetListItems – since we want to read items from Notifications list.
listName is Notifications – a custom list with additional fields Description, Assigned To and Status (Read, Unread).
Choice values for Status field are ‘Read’ and ‘Unread’. Also, at this point you can add some sample items in Notifications list.
2. Generate CAML Query
Now, we have the skeleton for SPServices call, we can go ahead and specify our CAML query. We want to show only notifications where:
- Assigned To values is “current user”
- Status is different from ‘Read’
‘query‘ variable will store CAML query to be executed. ‘fields‘ variable will have fields that we want to display in the notification.
// ***************************************
var query = “<Query><Where><And><Eq><FieldRef Name=’AssignedTo’ /><Value Type=’Integer’><UserID Type=’Integer’ /></Value></Eq><Neq><FieldRef Name=’Status’ /> <Value Type=’Choice’>Read</Value> </Neq> </And> </Where> </Query>”;
var fields = “<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’Description’ /></ViewFields>”;
// ***************************************
You can include these variables at the top of the script as shown below.
3. Implement completefunc
This is the part that now we have our results returned and ready to be formatted before displayed. As mentioned in first article too, jGrowl will be used for presentation of notification messages. Here we will be setting some jGrowl options.
Position:
Life:
Sticky:
Close:
Let’s set position and life params at the beginning of completefunc.
Next, we can start looping through each row returned and display them in the format we want. All data returned will be stored in xData.responseXML object.
// ***************************************
completefunc: function (xData, status){
$.jGrowl.defaults.position = “bottom-right”;
$.jGrowl.defaults.life = 10000;
$(xData.responseXML).find(“z\\:row”).each(function() {
// Format your row here…
}); // end – each function
} // end – completefunc
// ***************************************
Here, let’s stop for a minute and think of how to implement a header part of the notification messages saying “Your messages for today” for instance. For that i introduce a flag called firstMessage, which will help us to construct header message by executing the code only once as implemented below. This header has a lifespan of 5 seconds.
Next we start formatting notification messages for each entry in Notifications list. First let’s get notification ID – SPListItem ID – so that we can provide a link to notification. In messageHtml variable, we basically construct the html part for each notification.
Layout is an icon for the notification followed by its title – linked to notification list item – and below its description.
4. Implement “Mark as Read” logic
Almost done for this article! One thing left, which is marking notifications as read upon clicking close button, so that they are not displayed each time page is loaded. This logic is definitely a must. Imagine having SPNotifications for your intranet and assume that notifications are displayed when you visit homepage of your intranet – or any other department landing page. In that case, showing same notifications every time you visit the home page wouldn’t be that nice, as some point it’d get annoying!! Since this is the case, we need to implement a ‘close callback’ logic here to mark notifications as read.
jGrowl has already an option for close callback – as mentioned in section 2 above. So all we have to do is to implement it in a way that notification list item is updated using SPServices UpdateListItems operation.
Here is our MarkAsRead function which only takes notification ID as input parameter. I’m capturing all script structure so you can see where this function sits. Basically it’s right out of document-ready function scope, at the global level of entire javascript.
Now we have the ‘MarkAsRead’ function ready, all we have to do is to add the code snippet to call it. You can include this right below where we constructed the html for notification messages as shown below.
…and we are done!!! it’s time to test it now..
5. Test your first SPNotifications
To test it, drop a CEWP to your homepage and provide the link SPNotifications script in CEWP options. For example, you can upload the script to Shared Documents, just for testing purposes.
In my Notifications list, i created 3 entries having them assigned to myself and their status being ‘Unread’. Visiting my homepage, I see the following.
After 5 seconds, notifications header ‘Your messages for today’ will disappear. Note that in jGrowl options, I set sticky to true.
Now let’s say, I read the ‘Parking Lot Closed’ notification and clicked that little ‘X’ button. This will trigger close callback function and status for that notification will be set to ‘Read’, i.e. that notification will be marked as read. You can check it from Notifications list as shown below.
Now, let’s visit our homepage again and see only 2 unread notifications are left instead of 3 notifications.
That concludes this article – jGrowl Notifications for SharePoint 2010 – Part 2.
Now I have to think a better way to store and populate those notifications from power user or admin perspective.
Thanks for reading. If you have any suggestions, feedback, having trouble to implement; feel free to drop a note.
zieglers
Zieglers 
You must be logged in to post a comment.