Ads

Thursday, 4 July 2013

How to use Notifications in SharePoint 2010

In SharePoint 2010, Notifications is another way to display information/warnings without distracting user. It'll be shown in top right below Topbar and Ribbon. Just like Status bar, No Server side code or manual setup required to use Notifications. The required functions are bundled in SP.UI.Notify class that defined in SP.Js/SP.Debug.Js and it's included in SharePoint master page. So no manual include of Js is required.

Well, Status bar is used to display content and to hide developer has to invoke RemoveStatus or RemoveStatusAll Method, whereas Notifications by default getting hide after few seconds. It's possible to make notifications Sticky(stay until closed by code).

SP.UI.Status Notify
The SP.UI.Notify class has 2 functions. They are
  1. SP.UI.Notify.addNotification(strHTMLContent, boolIsSticky) This function used to display specified content in Notification area. The parameters are self explanatory. boolIsSticky parameter specifies whether this content should be shown as sticky(true) or hide after few seconds(false). It's possible to show multiple Notifications at a time and they getting aligned themselves.
  2. SP.UI.Notify.removeNotification(strNotifyID) This function hides the Notification that passed as parameter.
Sample Code
<
Script type="text/javascript">
var
strNotificationID, strStickyNotificationID;

function showNofication()
{
  strNotificationID = SP.UI.Notify.addNotification(
"Quick Info : <font color='#AA0000'>Registration in Progress..</font> <img src='/_Layouts/Images/kpiprogressbar.gif' align='absmiddle'> ", false);
  

strStickyNotificationID = SP.UI.Notify.addNotification("Sticky Notes : <font color='#AA0000'>Welcome to My World.</font> <img src='/_Layouts/Images/lg_ICPINNED.gif' align='absmiddle'> ", true);
}

function removeNofication()
{
 
if (strStickyNotificationID != null)
    SP.UI.Notify.removeNotification(strStickyNotificationID);
}
</Script>

<
div class="ms-toolpanefooter">
  <
input type="button" onclick="Javascript:showNofication();" value="Show Nofitication" class="UserButton" />
 
<input type="button" onclick="Javascript:removeNofication()" value="Remove Nofitication" class="UserButton" />
</div>
Notifications

No comments:

Post a Comment

Ads