How to use SharePoint Status Bar And Notification?

Sharepoint 2010 have many new UI enhancements. Two enhancements are Status Bar and Notification Area. Both of these can be used to provide useful information to the users. Both of these appears under Ribbon Tab. Status Bar is mostly for something like permanent information. Notifications appears for certain period of time then disappers with some transition effects.

Working with Status Bar
We can provide HTML content to the message. We can add images and styles. The status bar can have one of the pre defined colors(red, green, blue, yellow) depending on priority of the immage. For example if message is very important we can show it in red.
Status bar is exposed SharePoint JavaScript API defined inside sharepointroot\templates\layouts\SP.js

Methods exposed by SP.UI.Status

• addStatus: Accepts three parameters Title, Message as HTML , show at begining as boolean. Returns status ID
  sid = SP.UI.Status.addStatus(strTitle, htmlMessage, boolatBegning)  
• removeStatus: removes status specified by status id.
  SP.UI.Status.removeStatus(sid)
• removeAllStatus: Removes all Status bar messages. Pass true if you want to hide bar.
  removeAllStatus(true)
• setStatusPriColor: Takes two parameter status id and colorsetStatusPriColor(sid,"red")

<script langauage="javascript">
var statusID;

function ShowStatus()
{
   statusID = SP.UI.Status.addStatus("Information","This is my first status bar",true);
}
</script>

The above script will show status bar in red.


SharePoint 2010 Status Bar

We can show status bar in diffrent colors depending on importance of message. If very important then use red, if warning message in then use yellow color.

Working with Notifications

Notification Area usually appears rigth corner below the ribbon. this is used when the users needs to to updated for the processess being performed. Like saving content, saved content.

Methods exposed by SP.UI.Notify

• addNotification: Accepts two parameters Message as html and a boolean value indicating sticky or not. If second parameter is passed as false then notification disappers after 5 seconds. This method returns notification id.
• removeNotification: Removes notification specified by notification id.

<script type="text/javascript">

notificationID = SP.UI.Notify.addNotification(

}

var notificationID;function ShowNotification() {"This is my first notification", true, " Tooltip", "Helloworld");
</script> 

The above script will show sticky Notification. Pass second parameter as false in above script to hide Notification after 5 seconds.



SharePoint 2010 Notification