SharePoint ModalPopup: Show Modal Dialog in SharePoint

Modal Dialog in SharePoint

there are certain business conditions which requires to show modal popups and let the action decided by user.

I already have written a post to show how to show wait screens in SharePoint. sp.ui.dialog.js in SharePoint is responsible for showing modal dialogs also.

there is a method actually there are more, the one which looks most convenient to me is :

SP.UI.ModalDialog.showModalDialog(options)

only point you need to make sure is sp.js and sp.ui.dialog.js are loaded. one can use ExecuteOrDelayUntilScriptLoaded

all you need to do is to create options and pass argument to modal dialog. options is created as below.

var newPopUp = SP.UI.$create_DialogOptions();

now you can set url to open as dialog , title , height, width and many other thing please have a look on msdn link given below. here the important point is you can pass a callback function that can be called when dialog is closed.

dialog is closed by following method

SP.UI.ModalDialog.commonModalDialogClose(dialogresult,url); dialog result can be SP.UI.DialogResult.cancel or SP.UI.DialogResult.invalid or SP.UI.DialogResult.OK also you can pass a url to callback method using url parameter.

lets define a method to open the dialog with callback fuction and a method for opening dialog.

function openModalPopup(url, title, width, height,callbackfunction) 

     {

       // create options

        var newPopUp = SP.UI.$create_DialogOptions();

        newPopUp.url =url;

        if (title != null)

            newPopUp.title = title;

        if (width != null)

            newPopUp.width = width;

        if (height != null)

            newPopUp.height = height;

      //set callback function        

       newPopUp.dialogReturnValueCallback = Function.createDelegate(null, callbackfunction);

        //show popup

        SP.UI.ModalDialog.showModalDialog(newPopUp);

    }

now our function is ready to show modal dialog. now lets create a function and pass actual parameters to show the modal dialog.

function showpopup()

{

    var url =<url of your page>;

   //call our above method and define callback

    openModalPopup(url,"Test Popup",500,500,function(result,target){

          switch (result) {

       case SP.UI.DialogResult.invalid, -1:

                            // invalid has been passed from commonModalDialogClose

           SP.UI.Status.removeAllStatus(true);

           var sidErr = SP.UI.Status.addStatus("there was an error while performing task", target, true);

           SP.UI.Status.setStatusPriColor(sidErr, "yellow");

           break;

            case SP.UI.DialogResult.cancel, 0:

                           // dialog has been closed or cancelled

           SP.UI.Status.removeAllStatus(true);

           var sidErr = SP.UI.Status.addStatus("task was cancelled", target, true);

           SP.UI.Status.setStatusPriColor(sidErr, "green");

           break;

       case SP.UI.DialogResult.OK, 1:

                           // operation was done and ok

           SP.UI.Status.removeAllStatus(true);

           var sid = SP.UI.Status.addStatus("task performed successfully.", "", true);

           SP.UI.Status.setStatusPriColor(sid, "green");

                             // if you want you can refresh the page lets say after one seconds.

           setTimeout(

               function() {

                   SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

               }, 1000);

           break;

       }

    });

}

now the code is ready for showing modal popup just call showpopup method.

we should think how we will close the popup. so if you are opening an out of the box page then you will not write any thing.

but when you create your own page say in layouts then you define your OK and Cancel buttons 

on click of cancel just make a call to commonModalDialogClose with cancel option as below

function closepopuppage() {
// should be written in popup page

              SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, _spPageContextInfo.webAbsoluteUrl);

          }

similarly on click of OK you will perform your task , close the dialog using SP.UI.DialogResult.OK option and in case of exceptions you will pass invalid option.

in all cases you can register script from server side to close the popup( in the cs file of popup).

for ex.

string script = "var url='" + SPContext.Current.Web.Url +

                                    "';SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK,url);";

 Page.ClientScript.RegisterStartupScript(GetType(), "testscript", script, true);

for all the option values you can have a look on msdn.

https://msdn.microsoft.com/en-us/library/office/ff410058%28v=office.14%29.aspx?f=255&MSPPError=-2147217396

Working with Status and Notification in SharePoint using sp.js

There are certain business situations where we need to show status and notifications to user.
these are important because these are used to inform business users that something is happening in the back end.
lets have a look of what are the methods available in sp.js to show status and notifications and later i will put a working code here that can be used for showing status and notifications.

Working with Notification 

SP.UI.Notify module is used to work with notifications. this class has two methods

1. addNotification(notificationHtml,sticky)

notificationHtml : it is a string value that is shown as Notification
sticky : it is a boolean value that if true then notification will not be removed until we will not           remove  it by calling remove notification. if false then notification is removed in three seconds.

2. removeNotification(nid) 

nid : it is notification id that has to be removed

I will show an example at the end of this post.

Working with Status

SP.UI.Status module is used to work with the status here are the methods that are there in Status module

addStatus(strTitle, strHtml, atBegining) : used to add status

SP.UI.Status.setStatusPriColor(sid, strColor) : set the background colour of status

removeStatus(sid) : remove the status

appendStatus(sid,strhtml) : append in existing status

updateStatus(sid,strhtml) : update the status

There can be four options while setting background colour of status red : very important , yellow : important , green : everything ok , blue : for information

below is a working example you can copy the code and same in a .html file in a SharePoint library

then anywhere you can used content editor with content link pointing to this file.

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript">

    var notificationid='';

    var statusid='';

    function ShowNotification()

    {

       notificationid= SP.UI.Notify.addNotification("Working on it...",true);

    }

    function RemoveNotification()

    {

        if(notificationid!='')

        {

            SP.UI.Notify.removeNotification(notificationid);

            notificationid='';

        }

    }

    function AddStatus()

    {

        statusid=SP.UI.Status.addStatus("test","Task has been completed successfully.");

        SP.UI.Status.setStatusPriColor(statusid,'green');

    }

    function RemoveStatus()

    {

        if(statusid!='')

        {

            SP.UI.Status.removeStatus(statusid);

            statusid='';

        }

    }

</script>

<div>

    

    <input type="button" value="Show Notification" onclick="ShowNotification();"/>

    <br/><br/>

    <input type="button" value="Remove notification" onclick="RemoveNotification();"/>

    <br/><br/>

    <input type="button" value="Add Status" onclick="AddStatus();"/>

    <br/><br/>

    <input type="button" value="Remove Status" onclick="RemoveStatus();"/>

</div>

for more information you can have a look on msdn

https://msdn.microsoft.com/en-us/library/office/ff407632%28v=office.14%29.aspx?f=255&MSPPError=-2147217396#Notifications

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.