SharePoint 2010 Notifications and Status

Using the ECMAScript of SharePoint 2010

SharePoint Server 2010 comes with a flashy UI. On the home page of a SharePoint Site, we see many components like the ribbon tool bar, Notifications, Status message, Quick Launch etc., As a developer we should be able to customize all these components. In this article lets explore how to create custom 'Notifications' and 'Status' messages using the ECMAScript of SharePoint 2010

What are these Notifications and Status messages?
A Notification is a small text area which gets displayed at the top right corner of the window, while we perform some actions like saving a page, checking out a page etc., (this is like the notification which we see while sending a mail through gmail). This is a simple text area with yellow background and a dark yellow border as shown in the screen below. This is something new in SharePoint 2010 which is not available in MOSS 2007.

A Status message is also like a Notification, but it stretches to the width of page. This lies between the body and header of the page. To be more precise, it comes below the title bar (where title and breadcrumb are displayed), or below the ribbon toolbar (when it is opened). This can have different colored backgrounds, signifying the severity of the message. Shown below is a default Status message displayed when we check out a page for editing.

Creating Custom Notification

Using 'SP.UI.Notify.addNotification()' method we can create custom notifications on a page.

var value = SP.UI.Notify.addNotification(strHtml, bSticky);
strHTML - the HTML text that is to be displayed in the notification area.
bSticky - true/false. A boolean value which specifies whether the notification should be fixed or to auto closed.
value - The ID of the notification added to the page.

By default if we add a Notification with bSticky value as false, it closes after 5 seconds. If we specify its value as true, then we have to explicitly close the notification by passing the ID (return value while creating the notification) to the SP.UI.Notify.removeNotification(nid) method. These two methods are part of the SP.UI.Notify class of the ECMAScript library.

Creating Custom Status Messages

The class SP.UI.Status provides seven methods for managing custom Status messages.

• SP.UI.Status.addStatus(strTitle, strHtml, atBegining);
• SP.UI.Status.appendStatus(sid, strTitle, strHtml);
• SP.UI.Status.removeAllStatus(hide);
• SP.UI.Status.removeStatus(sid);
• SP.UI.Status.setStatusPriColor(sid, strColor);
• SP.UI.Status() - This is the constructor which creates a 'Status' object
• SP.UI.Status.updateStatus(sid, strHtml);

Using these methods we can create a Status message, update it, change the color and remove the status when needed.

Code Snippet

Now lets put this into action. Create a page and add a 'Content Editor' webpart to the page. Copy the below script and paste it in the content editor webpart. Make sure you go to the 'Edit HTML Source' view of the content editor webpart and add this script, if we add this in normal view, the scripts gets removed and will not work.

<script language="ecmascript" type="text/ecmascript">
var statusId = '';
var notifyId = '';
function AddNotification(strTitle, isSticky) {
var txtnid = document.getElementById("txtNotifId");
notifyId = SP.UI.Notify.addNotification(strTitle, isSticky);
txtnid.value = notifyId;
}
function RemoveNotification(nid) {
SP.UI.Notify.removeNotification(nid);
notifyId  = '';
}

In brief the above script has some buttons which are bound with some javascript functions through which we create and close the Notifications and Status messages.

POSSIBLE COLORS FOR STATUS MESSAGES
The status messages displayed on the pages supports only four colors. Below are the four color and their priorities

	Very high priority
	Important
	Success
	Information

So, only four colors are supported by SharePoint 2010 for status messages. However we can show the status messages with other colors by changing some CSS styles. Check this article, which gives a detailed explanation on doing this.

NOTE: In the above example we are creating a page using the OOB layout and master page. So, these scripts will work as expected. For the ECMAScript to work, we need to load the sp.js and sp.ui.js files. As we are using the default master page (which loads these JS files), our code snippet will work. If you are using a custom master page, make sure you load all the JS files needed.
Note:SP.UI Namespace is defined in the following JS files

• SP.Core.js
• SP.js
• SP.UI.Dialog.js