Working with Status and Notification in SharePoint using sp.js

There are certain business situations where we need to show status and notifications to user.
these are important because these are used to inform business users that something is happening in the back end.
lets have a look of what are the methods available in sp.js to show status and notifications and later i will put a working code here that can be used for showing status and notifications.

Working with Notification 

SP.UI.Notify module is used to work with notifications. this class has two methods

1. addNotification(notificationHtml,sticky)

notificationHtml : it is a string value that is shown as Notification
sticky : it is a boolean value that if true then notification will not be removed until we will not           remove  it by calling remove notification. if false then notification is removed in three seconds.

2. removeNotification(nid) 

nid : it is notification id that has to be removed

I will show an example at the end of this post.

Working with Status

SP.UI.Status module is used to work with the status here are the methods that are there in Status module

addStatus(strTitle, strHtml, atBegining) : used to add status

SP.UI.Status.setStatusPriColor(sid, strColor) : set the background colour of status

removeStatus(sid) : remove the status

appendStatus(sid,strhtml) : append in existing status

updateStatus(sid,strhtml) : update the status

There can be four options while setting background colour of status red : very important , yellow : important , green : everything ok , blue : for information

below is a working example you can copy the code and same in a .html file in a SharePoint library

then anywhere you can used content editor with content link pointing to this file.

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript">

    var notificationid='';

    var statusid='';

    function ShowNotification()

    {

       notificationid= SP.UI.Notify.addNotification("Working on it...",true);

    }

    function RemoveNotification()

    {

        if(notificationid!='')

        {

            SP.UI.Notify.removeNotification(notificationid);

            notificationid='';

        }

    }

    function AddStatus()

    {

        statusid=SP.UI.Status.addStatus("test","Task has been completed successfully.");

        SP.UI.Status.setStatusPriColor(statusid,'green');

    }

    function RemoveStatus()

    {

        if(statusid!='')

        {

            SP.UI.Status.removeStatus(statusid);

            statusid='';

        }

    }

</script>

<div>

    

    <input type="button" value="Show Notification" onclick="ShowNotification();"/>

    <br/><br/>

    <input type="button" value="Remove notification" onclick="RemoveNotification();"/>

    <br/><br/>

    <input type="button" value="Add Status" onclick="AddStatus();"/>

    <br/><br/>

    <input type="button" value="Remove Status" onclick="RemoveStatus();"/>

</div>

for more information you can have a look on msdn

https://msdn.microsoft.com/en-us/library/office/ff407632%28v=office.14%29.aspx?f=255&MSPPError=-2147217396#Notifications