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!
   
   1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   2. <script src="/_layouts/15/sp.js" type="text/javascript"></script>
   4. <script type="text/javascript">
   5. $(function() {
   6. $('#btnNotify').click(btnNotify_Click);
   7. $('#btnStatus').click(btnStatus_Click);
   8. $('#btnWait').click(btnWait_Click);
   10. });
   12. function btnNotify_Click() {
   13. var notiMsg = "Operation is in progress.";
   14. SP.UI.Notify.addNotification(notiMsg);
   15. }
   17. function btnStatus_Click() {
   18. var staMsg = "Operation is in progress, please try after sometime!";
   19. var staColor = "yellow";
   20. myStatus(staMsg, staColor);
   21. }
   23. function myStatus(message, colour) {
   24. var status = SP.UI.Status.addStatus(message);
   25. SP.UI.Status.setStatusPriColor(status, colour);
   26. }
   28. function btnWait_Click() {
   29. varTitle = "Transaction in progress...";
   30. varMsg = "Operation is in progress, please wait for few seconds.";
   31. var waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(varTitle, varMsg, 150, 430);
   32. }
   33. </script>
   34. <div>
   35. <hr/>
   36. <h1>Show Notification</h1>
   37. <br/>
   38. <input id="btnNotify" type="button" value="Notify Me" />
   39. <hr/>
   40. <h1>Show Status</h1>
   41. <br/>
   42. <input id="btnStatus" type="button" value="Show Status" />
   43. <hr/>
   44. <h1>Show Wait Screen</h1>
   45. <br/>
   46. <input id="btnWait" type="button" value="Wait Screen" />
   47. <hr/>
   48. </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: