Custom Notification Status And Waiting Screen In SharePoint

This is a common requirement to display some notification, status or a waiting screen in SharePoint custom applications. SharePoint comes with ready to use notification framework which can be used in any custom page, web part, app part, hosted apps, etc. It is supported in SharePoint 2010 and 2013. I tried to put a simple example on how to implement it using a simple web part page.

Prerequisites

Internet connection for jQuery file reference or physical (in Site or in file system) jQuery reference.

Solution

1. Create a web part page in your SharePoint 2013 or Office 365 SharePoint Site.
   
   
2. Add Content Editor Web part on the page.
   
   
   
   
3. Edit ‘HTML Source’ of content editor web part and copy the following html. Hit OK!
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="/_layouts/15/sp.js" type="text/javascript"></script>
   
   <script type="text/javascript">
       $(function() {
           $('#btnNotify').click(btnNotify_Click);
           $('#btnStatus').click(btnStatus_Click);
           $('#btnWait').click(btnWait_Click);
   
       });
   
       function btnNotify_Click() {
           var notiMsg = "Operation is in progress.";
           SP.UI.Notify.addNotification(notiMsg);
       }
   
       function btnStatus_Click() {
           var staMsg = "Operation is in progress, please try after sometime!";
           var staColor = "yellow";
           myStatus(staMsg, staColor);
       }
   
       function myStatus(message, colour) {
           var status = SP.UI.Status.addStatus(message);
           SP.UI.Status.setStatusPriColor(status, colour);
       }
   
       function btnWait_Click() {
           varTitle = "Transaction in progress...";
           varMsg = "Operation is in progress, please wait for few seconds.";
           var waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(varTitle, varMsg, 150, 430);
       }
   </script>
   <div>
       <hr/>
       <h1>Show Notification</h1>
       <br/>
       <input id="btnNotify" type="button" value="Notify Me" />
       <hr/>
       <h1>Show Status</h1>
       <br/>
       <input id="btnStatus" type="button" value="Show Status" />
       <hr/>
       <h1>Show Wait Screen</h1>
       <br/>
       <input id="btnWait" type="button" value="Wait Screen" />
       <hr/>
   </div>

4. Web part page will be displayed like the following:
   
   
   
   
5. To display a notification, click on ‘Notify Me’ button. It will display your custom notification in SharePoint style as in the following screenshot:
   
   
   
   
6. To show status, click on ‘Show Status’ button. It will display your custom status with correct color and icon in SharePoint style as in the following screenshot:
   
   
   
   
7. To display a waiting screen without any close button, click on ‘Wait Screen’ button. It will display your custom waiting screen similar to displayed by SharePoint as in the following screenshot:
   
   

JS explained

JS starts with required script references (jQuery, sp.js etc.). In document ready, button click events are associated to the button.

• Function btnNotify_Click() displays a notification using “SP.UI.Notify.addNotification”, there are no parameters passes except message so notification will be displayed only for 5 seconds. It can be set as time out or can be removed by another function ‘SP.UI.Notify.removeNotification’ in JS as per requirement. Please refer MSDN link for details.
  
  
• Function btnStatus_Click() is to display some status on the page. The importance (icon) of the status depends on the color supplied as parameter. Please refer MSDN link for details.
  
  
• Function btnWait_Click will display a waiting screen and block the page for any changes. Users should not be able to perform any action until wait dialog is closed (waitDialog.close();) [either waiting event is completed or timed out]. Closing dialog can be handled based on requirement. Please refer MSDN link for details.