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:

1. Red
   Can be used to display an error message
   
   Code
   SP.UI.Status.setStatusPriColor(statusId, "red");
   
   Output
   
   
   
   
2. Yellow
   Can be used to display a warning message
   
   Code
   
   SP.UI.Status.setStatusPriColor(statusId, "yellow");
   
   Output
   
   
   
   
3. Green
   Can be used to display completion or acceptance message
   
   Code
   
   SP.UI.Status.setStatusPriColor(statusId, "green");
   
   Output
   
   
   
   
4. 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

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



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.