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:
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
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
- 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
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
0 komentar:
Posting Komentar