SharePoint Status And SharePoint Notifications

Introduction

In this article, we will explore all the possible functions of SharePoint status and SharePoint notifications.

Why Go for Status and Notifications

Whenever we need to notify a user about some field value or when we want to describe the current state of the form, we usually go ahead and use Alerts or Message box.

Well, there is another way of notifying the users about the changes or validations on the forms by using SharePoint Notifications and Statuses.

Scenarios and usage of SharePoint Status messages

We have some methods of the class SP.UI.Status, which we will explore and learn where and how it can be used.

Among the methods of Status class, there is one method which sets the level of importance of the status message. This method serves the purpose by setting different colors for different status messages, which gives a clear idea about the importance of the status to the user.

As Microsoft states, the priority is shown in the below table.

Value	Priority
Red	Very Important
Yellow	Important
Green	Success
Blue	Information

Now, one by one, we will explore each method of the status class.

Methods of SharePoint Status class

addStatus()

This method adds a status bar on the page.

Ex.

Here, we will add a status on the page and name it Primary Information which will display some information on the page with a color code of blue which indicates the information.

Code

var statusId = SP.UI.Status.addStatus("Status Messages : ", "Primary Information", true);
SP.UI.Status.setStatusPriColor(statusId, "blue");

Output

appendStatus()

This method appends this status to the existing Status bar.

Ex.

We use this if we have a Primary message displayed on the page, and due to some changes in the field values on the forms, we need to append more information to the Primary Information.

Code

SP.UI.Status.appendStatus(statusId, "Status Messages : ", " Appended Status", false);
SP.UI.Status.setStatusPriColor(statusId, "blue");

Output

updateStatus()

This method updates the Existing Status message.

Ex.

We use this method if we have a Primary message displayed on the page, and due to some changes in the Primary Message itself in the course of executin, we need to update the Status.

Code

SP.UI.Status.updateStatus(statusId, "Updated Status Message goes here");
SP.UI.Status.setStatusPriColor(statusId, "blue");

Output

Initial Information

Updated Information

setStatusPriColor()

This method sets the priority color of the status message.

Ex.

We use this method if we have to display some status on the page specifying the priority or the level of importation of the status message. There are 4 priority indicators, they are named in following colors:

Red
Can be used to display an error message

Code
SP.UI.Status.setStatusPriColor(statusId, "red");

Output
Yellow
Can be used to display a warning message

Code

SP.UI.Status.setStatusPriColor(statusId, "yellow");

Output
Green
Can be used to display completion or acceptance message

Code

SP.UI.Status.setStatusPriColor(statusId, "green");

Output
Blue
Can be used to simply display information on the page

Code

SP.UI.Status.setStatusPriColor(statusId, "blue");

Output

removeStatus()

This method removes a specific status message or we can say, it removes the last added status message if the same variable is associated with all the statuses.

Code

SP.UI.Status.removeStatus(statusId);

removeAllStatus()

This method removes all status messages present on the page.

Code

SP.UI.Status.removeAllStatus(true);

Now so far we have seen some methods which give fixed Status messages which stay on the page until the next page loads or triggered to hide on some condition.

So we will see one more thing on statuses on how to hide the status message after a specified time period.

addStatus() & setTimeout()

Ex.

We use this combination when we have to hide the Status message after some time interval. Can be used to display a validation error as demonstrated below.

Code

ExecuteOrDelayUntilScriptLoaded(function() {
statusId = SP.UI.Status.addStatus("Save Conflict or Validation error");
SP.UI.Status.setStatusPriColor(statusId, 'red');
setTimeout(function() {
SP.UI.Status.removeStatus(statusId);
}, 4000);
}, 'sp.js');

Output

Well… it disappears after 4 seconds :)

Scenarios and Usage of SharePoint Notifications

We have some methods of the class SP.UI.Notify, which we will explore and learn where and how it can be used.

Methods of SharePoint Notify class

addNotification()
This method adds the notification on a page, now such notifications can be used to notify any click event or processing milestone. Like email sent to some user or the form saved successfully.
Code

var notifyId = SP.UI.Notify.addNotification("You are being Notified!!", true);

Output
removeNotification()
This method removed the specific notification from a page.
Code

SP.UI.Notify.removeNotification(notifyId);

showLoadingNotification()
This Method displays a notification which can be very helpful to indicate the processing operation. The appearance of the notification gives an animation of loading. It can be used in two ways as shown below

showLoadingNotification()

This Working on it notification lasts for some time being handled by SharePoint

Code

SP.UI.Notify.showLoadingNotification();
showLoadingNotification(true)

This Working on it notification lasts forever until the page is reloaded or notification is removed in some condition or event.

Code

SP.UI.Notify.showLoadingNotification(true);

Output of both the types of Loading Notification

Now so far we have seen some methods which give fixed Notification messages which stay on a page until the next page loaded or triggered to hide on some condition.

So we will see one more thing on notifications on how to hide the notification after a specified time period.

addNotification() & setTimeout()

We use this combination when we have to hide the Notification after some time interval.

Code

ExecuteOrDelayUntilScriptLoaded(function() {
notifyId = SP.UI.Notify.addNotification("Notification with Timer");
setTimeout(function() {
SP.UI.Notify.removeNotification(notifyId);
}, 4000);
}, 'sp.js');

Output

This notification disappears after 4 seconds.

Hope this article gives you a better idea of the usage of SharePoint Statuses and SharePoint Notifications. Please find the complete code in the attachments.