SharePoint Status And SharePoint 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.

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

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

Output

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

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

Output

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

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

Output

Initial Information

Output

Updated Information

Output

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:

  1. Red
    Can be used to display an error message

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

    Output

    Output

  2. Yellow
    Can be used to display a warning message

    Code

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

    Output

    Output

  3. Green
    Can be used to display completion or acceptance message

    Code

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

    Output

    Output

  4. Blue
    Can be used to simply display information on the page

    Code

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

    Output

    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

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

Output

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

    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

    1. showLoadingNotification()

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

      Code

      SP.UI.Notify.showLoadingNotification();

    2. 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

Output

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

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

Output

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.