How to: Creating transient notification/status bars in SharePoint 2010

Hi all,

SharePoint 2010 technical team has done an impressive job by giving end-user a great user interface. They wanted users to complete tasks as quickly as possible in the context with familiar, intuitive interface and provide reusable controls. SharePoint came up with new user interface platform with following changes:

• Masterpages (v4.master (with ribbon UI), default.master (with SharePoint 2007 UI) etc)
• Status bar and Notification Area (this post) 
• Client object model such as javascript/ecmascript and SilverLight (have posted few articles on Client OM)
• Customizable Ribbon UI (have posted few articles on Client OM)
• Dialog framework (have posted few articles on Client OM)
• Reduced of the tables (but its still there on few pages)

Lets dive into the main agenda which is notification area and status bars

Notification area:  

Few salient features of notification area:

• Notifications are used to show end-users what is happening on the page,web part or ribbon without distracting them. 
• These are transient or semi-transient messages. 
• By default, these messages disappear within 5 seconds.  
• Notification areas use javascript for the extensibility and could have HTML, icons etc. as well
• Optional "sticky" parameter can be set if caller wishes to manually remove the message. 

APIs: (14/Template/Layouts)

SP.UI.Notify.addNotification(strHtml, bSticky)

SP.UI.Notify.removeNotification(nid)

Status bars: 

Few salient features of status bars:

• They are shown just below the ribbon interface. 
• Used to display persistent information such as page status, versions, messages on the central administration and we can write our own custom status bars. 
• Status bars could be one Ribbon UI, application pages and also on web parts. 
• Its possible to set 4 pre-set background colors which depends on the importance. 
• Status bars use javascript for the extensibility and could have HTML, icons etc. as well. 

APIs: (14/Template/Layouts)

SP.UI.Status.addStatus(strTitle, strHtml, atBegining)

SP.UI.Status.appendStatus(sid, strTitle, strHtml)

SP.UI.Status.updateStatus(sid, strHtml)

SP.UI.Status.setStatusPriColor(sid, strColor)

SP.UI.Status.removeStatus (sid)

SP.UI.Status.removeAllStatus(hide)

Let's get started:

Step1: Create a New project in VS2010 RC New Project >> SharePoint 2010 as template >> Choose "Empty SharePoint Project" >> Project Name: ShowNotificationStatus >> Click OK.

Step2: Verify the site you want to debug and choose  "Deploy as a farm solution".

Step3: Right click on the "ShowNotificationStatus" >> Add >> "SharePoint Layouts Mapped Folder"

 

Step4: Right click on the "ShowNotificationStatus" folder >> Add >> Application Page >> Name: AppPage.aspx >> Click OK.

Step5: Under "PlaceHolderMain", I added 2 textbox namely: Notification and Status for entering for users notification area and status bars respectively. 

Also, we add 5 buttons which will do these activities: 

Notification Area:  

>>   "Enter New Notification" - When user enters a new notification area, we hookup to a javascript function. 

-----------------------------------------------------------------------------

 function Notification() {

            // Displays Notification
            var notification = document.getElementById("notification").value;

            if (notification == '') {
                alert('Please enter a notification!');
            }
            else
            {
                var notificationId = SP.UI.Notify.addNotification(notification);
                latestNotifyId = notificationId;
            }
        }

----------------------------------------------------------------------

We get the value of  textbox for entering the new notification. Then, we use javascript APIs to leverage new SP2010 client object model: SP.UI.Notify.addNotification(notification)

>> "Remove Notification" : By Default, notification area disappears within 5 seconds but if we click the "Remove Notification" button, with the time frame of  less than 5 seconds, then we can observe that notification disappears. 

----------------------------------------------------

  function RemoveNotification() {

            // Remove Notification
            SP.UI.Notify.removeNotification(latestNotifyId);
            latestNotifyId = '';
        }

-----------------------------------------------

Status bars: 

>>  "Enter New Status": This for entering a new user customized status bars. We can also assign a red status bars by setting "setStatusPriColor".

----------------------------------

        function AddStatus() {

            // Add the Status
            var addStatus = document.getElementById("addStatus").value;
            var statusId = SP.UI.Status.addStatus(addStatus);
            SP.UI.Status.setStatusPriColor(statusId, 'red');
            latestStatusId = statusId;

        }

--------------------------------

>> "Remove Last Status": We can remove the last status as well.

--------------------------------

        function RemoveLastStatus() {

            // Remove last Status
            var addStatus = document.getElementById("addStatus").value;
            if (addStatus == '') {
                alert('There is no status!');
            }
            else {
                SP.UI.Status.removeStatus(latestStatusId);
                latestStatusId = '';
            }

        }

---------------------------

>> "Remove All Status": We can remove all the status using javascript APIs. 

---------------------------------

        function RemoveAllStatus() {

            // Remove all status
            var addStatus = document.getElementById("addStatus").value;
            if (addStatus == '') {
                alert('There is no status!');
            }
            else {
                SP.UI.Status.removeAllStatus(true);
            }

        }

--------------------------------

Cheers,

--aaroh 

Download the source here.