SharePoint Modal Dialog: Show wait screen to user

There are certain business scenarios where we need to show wait screen to user as SharePoint does and shows “working on it…” dialog.

Fortunately, we have api available in sp.ui.dialog.js there are two methods available for showing wait screen.

1. showWaitScreenWithNoClose(title,description,height,width)

This method shows a wait screen without close option or button on it. once you show wait screen, parent screen gets freezes and you need to close by calling close method.

For example, it will look like this.

SP.UI.ModalDialog.showWaitScreenWithNoClose("Working on it...", "this should not take long.", 100, 400);

Before writing this code you need to make sure that sp.js and sp.ui.dialog.js is loaded. complete code is given below.

<script type="text/javascript">

function ShowWaitScreen()

{

ExecuteOrDelayUntilScriptLoaded(function(){

ExecuteOrDelayUntilScriptLoaded(function(){

window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Working on it...", "this should not take long.", 100, 400);

},"sp.ui.dialog.js");

},"sp.js");

}

</script>

Just call ShowWaitScreen and it will start showing wait screen.

To close wait screen call waitDialog.close(). Please note waitDialog is defined in window object you here you need to call like this

if(window.waitDialog)

{

window.waitDialog.close();

}

2.  showWaitScreenSize(title,description,callbackfunction,height,width)

unlike above method, it also shows close and cancel buttons. You can also pass a callback function which will be called when dialog will be closed.

An example is given below.

var waitDialog=SP.UI.ModalDialog.showWaitScreenSize("Working on it...","this should not take long.",closeDialogCallback,200,400);

Please note that we need to make sure that sp.js and sp.ui.dialog.js is loaded as in first case.