Thursday, May 29, 2014

SharePoint 2010/2013 - Notifications options

SharePoint provide OTB model dialog which can be used from client side to show a message or loading splash which you load a application page on your model dialog. Below are the options that can be used in a content editor or JavaScript file on your SharePoint page.
Add this tag to avoid null ref error ( like 'SP.UI.Notify' is null or not an object or 
Message: 'SP.UI.ModalDialog' is null or not an object).
 < script src="/_layouts/SP.UI.Dialog.js" type="text/javascript" >
Try adding this in code after option declaration while calling popup.
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

To give a Loading Notification for a model dialog. 
Start of displaying the notification
var waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Working on it', 'Please wait while we load your screen...', 70, 340);
To Stop the loading Screen
If you want to display notification in the top right corner then use this.
To Start notification
var notification;
ExecuteOrDelayUntilScriptLoaded(function () 
notification = SP.UI.Notify.addNotification("BI Charts are getting loaded!", true);
 // ExecuteOrDelayUntilScriptLoaded this function prevent the null ref error and it wait till the SP.UI.Dialog.js loads.
To Stop notification

< script type="text/ecmascript" language="ecmascript" >

var statusId = '';
var notifyId = '';

function AddNotification() {
    notifyId = SP.UI.Notify.addNotification("Hello World!", true);

function RemoveNotification() {
    notifyId  = '';

function AddStatus() {
    statusId = SP.UI.Status.addStatus("Status good!");
    SP.UI.Status.setStatusPriColor(statusId, 'red');

function RemoveLastStatus() {
    statusId = '';

function RemoveAllStatus() {

< /script >
PS: Please correct the tags spacing and add js file ref.


Happy Browsing!

No comments:

Post a Comment