Notifications in Sharepoint 2010

In SharePoint 2010 UI model, there are lots of improvements in Notifications or status, Grid Views, Menus, Popups, etc…

Here I will demonstrate you, How to Display Notifications and Status messages in SharePoint 2010 portal.

We can use these notifications or status to Display, processing messages like “Loading…” “Processing…”

“Wait…” or Status like “Thank you for contacting” “Your request has been processed” or Caught exception messages.

Display Notification (ECMAScripts):

var value = SP.UI.Notify.addNotification(strHtml, bSticky);

strHtml = The message inside the notification.

bSticky = Specifies whether the notification stays on the page until removed. Default notification remains for 5 seconds.

Display Status (ECMAScripts):

var statusId = SP.UI.Status.addStatus([strTitle], strHtml,[atBegining]);

strTitle [Optional] = The title of the status message.

strHtml = The contents of the status message.

atBegining [Optional] = Specifies whether the status message will appear at the beginning of the list.

SP.UI.Status.setStatusPriColor(statusId, strColor); // Sets the priority color of the specified status message.

statusId = The ID of the status message.

strColor = The color to set for the status message.

The following table lists the values and their priority. [Note: color name is in lower case]

Value	Priority
red	Very Important
yellow	Important
green	Success
blue	Information

SP.UI.Status.removeStatus(statusId); // Removes the specified status message.

SP.UI.Status.removeAllStatus(true); // Removes the all status messages.

Overall code (HTML & JavaScript)

<script language="javascript" type="text/javascript">

    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

    var statusId = '';

    var notifyId = '';

    function Initialize() {

    }

    function AddNotificationAutoHide() {

        notifyId = SP.UI.Notify.addNotification("Loading…", false);

    }

    function AddNotification() {

        notifyId = SP.UI.Notify.addNotification("Loading…", true);

    }

    function RemoveNotification() {

        SP.UI.Notify.removeNotification(notifyId);

        notifyId = '';

    }

    function AddStatus(color) {

        statusId = SP.UI.Status.addStatus("Error", "Invaild input string", true);

        SP.UI.Status.setStatusPriColor(statusId, color);

    }

    function RemoveLastStatus() {

        SP.UI.Status.removeStatus(statusId);

        statusId = '';

    }

    function RemoveAllStatus() {

        SP.UI.Status.removeAllStatus(true);

    }

    function ShowNotificationMessage(tooltip, message, sticky) {

        SP.UI.Notify.addNotification(message, sticky, tooltip, null);

    }

</script>

<input type="button" value="Add Notification(Auto Hide)" onclick="AddNotificationAutoHide()" />

<input type="button" value="Add Notification" onclick="AddNotification()" />

<input type="button" value="Remove Notification" onclick="RemoveNotification()" /> <br /><br />

<input type="button" value="Add Status (Red)" onclick="AddStatus('red')" />

<input type="button" value="Add Status (Green)" onclick="AddStatus('green')" />

<input type="button" value="Remove Last Status" onclick="RemoveLastStatus()" />

<input type="button" value="Remove All Status" onclick="RemoveAllStatus()" />

Use literal control to add notification from server side.

Screen Cast: