SharePoint 2013 system status notifications

sp.ui.notify.addnotification sharepoint online
Check out Best Alternative to InfoPath


Here we will discuss how we can show system status and notifications in SharePoint 2013.


Why to go for Status and Notifications:

Whenever we need to notify 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 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 as 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:

1) addStatus() : this method Adds a status bar on the page.

Ex.: Here we will add status on the page and name it Primary Information which will display some information on the page. With a colour code blue which indicated information.

Code:

var statusId = SP.UI.Status.addStatus(“Status Messages : “, “Primary Information”, true);

SP.UI.Status.setStatusPriColor(statusId, “blue”);

Output:

sharepoint 2013 system status notifications
sharepoint 2013 system status notifications

2) appendStatus() : This methods 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 on 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:



sp.ui.notify.addnotification sharepoint 2013
sp.ui.notify.addnotification sharepoint 2013

3) updateStatus() : This methods 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 execution 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:

sharepoint 2013 notification bar
sharepoint 2013 notification bar

Updated Information:

sharepoint online notification bar
sharepoint online notification bar

4) setStatusPriColor() : This methods 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 colours:

  1. Red :Can be used to display an error message

Code:

SP.UI.Status.setStatusPriColor(statusId, “red”);

Output:



sharepoint 2013 notification message
sharepoint 2013 notification message
  1. Yellow :Can be used to display a warning message

Code:

SP.UI.Status.setStatusPriColor(statusId, “yellow”);

Output:

sharepoint notification banner
sharepoint notification banner
  1. Green :Can be used to display completion or acceptance message

Code:

SP.UI.Status.setStatusPriColor(statusId, “green”);

Output:

sharepoint 2013 status bar javascript
sharepoint 2013 status bar javascript
  1. Blue :Can be used to simply display information on the page

Code:

SP.UI.Status.setStatusPriColor(statusId, “blue”);

Output:

Custom Notifications and Status Messages in SharePoint 2013
Custom Notifications and Status Messages in SharePoint 2013

5) removeStatus() : This methods removed a specific status message or we can say, it removes the last added status message if the same variable is associated to all the statuses.

Code:

SP.UI.Status.removeStatus(statusId);

6) removeAllStatus() : This methods 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 page until the next page load 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.

7) 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:

SP.UI.Notify Methods
SP.UI.Notify Methods

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:

1) addNotification() 

Ex.: 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 form saved successfully.

Code:

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

Output:

sp.ui.notify.addnotification sharepoint online
sp.ui.notify.addnotification sharepoint online

2) removeNotification() 

Ex.: This method removed the specific notification from a page.

Code: 

SP.UI.Notify.removeNotification(notifyId);

3) 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

  1. showLoadingNotification()

Ex.: This Working on it notification lasts for some time being handeled by SharePoint

Code:

SP.UI.Notify.showLoadingNotification();

  1. showLoadingNotification(true)

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

Code: 

SP.UI.Notify.showLoadingNotification(true);

Output of both the types of Loading Notification:

sp.ui.notify.addnotification sharepoint not working
sp.ui.notify.addnotification sharepoint not working

Now so far we have seen some methods which give fixed Notification messages which stay on page until the next page load 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.

4) addNotification() & setTimeout()

Ex.: 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:

sp.ui.notify.addnotification position
sp.ui.notify.addnotification position

This notification disappears after 4 seconds.

Hope this article gives you a better idea about the usage of SharePoint Statuses and SharePoint Notifications.


Please find the complete code in the Attachments.


You May Also like the Following SharePoint Online Tutorials:

About Akash Kumhar

I am Akash Kumhar a SharePoint Consultant.

View all posts by Akash Kumhar →