Microsoft Office 365

JSOM Office 365 SharePoint 2013 SharePoint 2013 Online showModalDialog

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

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

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

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

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

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

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

Pages

Microsoft Office 365

Recent Post

Adding the Bond Email Module to your iLearn Welcome Page

Adding the Email Module to your iLearn Welcome Page

Most students use iLearn as their online 'home base' for working between systems and communicating via email with Bondies

If you find you're constantly switching back and forth between iLearn and your Student email account, why not follow this quick procedure to add Bond Email as a module to your Welcome Page

That way you can link to your email from within iLearn in a new tab while keeping your iLearn tab open and accessible

What do I need to do?

Bonus tip:

Opening a Page as modal window using JSOM in SharePoint 2013

1 TB of free Online storage for all Bond Students

Office 365 for all Bond Students, now with 1 Terabyte of free Online Storage

Never lose a file again!

Put away that USB storage stick and back up everything in the Cloud!!

In addition to your 50 GB email inbox, Bond Students never need to worry about running out of storage room for file storage

Want more information?

Send Quick Massage