Opening a Page as modal window using JSOM in SharePoint 2013

There are many scenarios where we need to open custom pages or OOTB pages in a pop up. SharePoint provides an API to open the pages in pop up and in this post we will see how we can achieve the same using on the client side using JSOM

We will explore the following methods from the SharePoint 2013 client side library which will help us in opening the page as a dialog.

We will consider the following scenario when opening the page as a dialog:

• How to open the page in a dialog
• How to pass data to the dialog page
• How to return parameters or data back to the calling page from the dialog page

First we will see how to open the page in a dialog window. In order to open the page in a dialog, first we need to set the dialog window properties such as

• Dialog Window Title
• URL of the page to be shown in dialog window
• Width and height
• Allow dialog to maximize
• Allow dialog to close
• Need callback from the dialog window to the parent window
• Data for the dialog window that needs to be passed from the parent window

So, I have written a function in javascript with those parameters that can be called from the parent window. The below JavaScript code will show that information

	openInDialog = function (dlgTitle, dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, needCallBackFunction, pageUrl, dialogData) {
	var options = { title: dlgTitle, url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize, showClose: dlgShowClose, args: dialogData };
	if (needCallBackFunction) {
	options.dialogReturnValueCallback = Function.createDelegate(null, closeDialogCallBack);
	}
	SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
	}

view raw openInDialog hosted with ❤ by GitHub

We have written a function called openInDialog which can be called from the Parent page and to this method we are passing all the parameters such as title, width, height etc. that discussed above

Then we have created a variable called options which has to be a JSON object that needs to be passed to the SharePoint JavaScript function which we will discuss later

	var options = {
	title: dlgTitle,
	url: pageUrl,
	width: dlgWidth,
	height: dlgHeight,
	allowMaximize: dlgAllowMaximize,
	showClose: dlgShowClose,
	args: dialogData };

view raw dialog properties.js hosted with ❤ by GitHub

Ensure that you use the same key names in the options variable such as args, showClose, allowMaximize etc

Its always better to pass data in JSON format to the modal window

If we need callback from the dialog window, we need to set a property called dialogReturnValueCallback. To that property, we need to set a custom call back function that will be called when the user closes the dialog window

options.dialogReturnValueCallback = Function.createDelegate(null, closeDialogCallBack);

view raw dialogReturnValueCallback.js hosted with ❤ by GitHub

Here the closeDialogCallBack is a custom callback function that will be called when the user closes the dialog window. We will explore this custom callback function later in this post

To open the page in a dialog, we need to call a sharepoint function called showModalDialog which is defined in the namespace SP.UI.ModalDialog and this name space is present in the JS file sp.ui.dialog.js

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

view raw showModalDialog.js hosted with ❤ by GitHub

To showModalDialog function, we are passing options as a parameter which we have created above

In the dialog window, we can access the data that is passed from the parent window as follows

var options = JSON.parse(window.frameElement.dialogArgs);

view raw Dialogdata.js hosted with ❤ by GitHub

dialogArgs contains the data that is passed from the parent window
Once the business is completed in the dialog window, the user will press OK or Cancel button in the dialog window.

Before clicking on OK or Cancel button, we need to prepare data that needs to be passed to the parent window. We will see how to prepare the data that needs to be passed to the parent windows

	var popData = [];
	popData[0] = "Test1";
	popData[1] = 'Test2';
	popData[2] = JsonData;

view raw Popup data.js hosted with ❤ by GitHub

In the above code, we have created a javascript array and to this javascript array we are setting some data and we want to send this data to the parent window and the parent window can take some action based on the data that is sent from the dialog

There are two actions that can be done in the pop up either OK or Cancel. Here are the SharePoint functions for OK and Cancel click events

When the user click on "OK" button, we can call the below SharePoint function
 
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);

When the user click on "Cancel" button, we can call the below SharePoint function

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, popData);

 As you can see, we are passing popData javascript array to both ok and cancel button.

 commonModalDialogClose sharepoint function internally calls the callback function that we discussed earlier in this post.

In our case we have created a call back function called closeDialogCallBack and this will be called when we close the pop up

	closeDialogCallBack = function (dialogResult, returnValue) {
	//If the user presses OK button in the dialog window
	if (dialogResult === SP.UI.DialogResult.OK ) {
	if (returnValue && returnValue != undefined) {
	//Access the data that is passed from the dialog window
	//From the dialog window we are passing three values
	//returnValue[0] - will be having "Test 1"
	//returnValue[1] - will be having "Test 2"
	//returnValue[2] - will be having JSON data
	}
	}
	//If the user presses cancel button in the dialog window
	if (dialogResult === SP.UI.DialogResult.cancel){
	//Do action related to cancel button
	}
	}

view raw closeDialogCallBack.js hosted with ❤ by GitHub