12MAR
Sometimes when using the
SharePoint Modal Dialog we need to pass data to the dialog and receive data back from it. This is a little straight forward tutorial that shows how to do it.
On Parent Page
Use the property args to pass a parameter to the Dialog.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var data = {};
data.Title= "Lorem ipsum";
data.Body = "Lorem ipsum dolor sit amet";
var dataAsString = JSON.stringify(data);
var options = SP.UI.$create_DialogOptions();
options.title = "Award Cover Page and Email Body";
options.width = 600;
options.height = 550;
options.showClose = false;
options.url = 'DialogPage.aspx';
<strong>options.args = dataAsString;</strong>
options.dialogReturnValueCallback = OnPopClosed;
SP.UI.ModalDialog.showModalDialog(options);
|
On Modal Page
1
2
|
var data = JSON.parse(window.frameElement.dialogArgs);
alert(data.Title + ' ' + data.Body);
|
The important piece of code here is the dialogArgs property. This is where you get the value you passed to your modal. As you can see in my case I’m creating the object that I just passed as a string.
Now to pass a value back to the parent page you can use the method SP.UI.ModalDialog.commonModalDialogClose.
It will close the dialog with the result you want like “OK”, “Cancel” and you can passa aditional information.The example below I close the modal and pass a message to be shown on the parent page.
1
|
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, "Created with success");
|
Back to the Parent Page..
You’ll need to get the value from the modal. When you created the modal, you probably noticed on the code above the following line: options.dialogReturnValueCallback = OnPopClosed;
That line is assigning the OnPopClosed function to be called when the dialog is closed. The code below shows how to get the message and show an alert on the screen.
1
2
3
4
5
6
7
8
|
function OnPopClosed(dialogResult, returnValue) {
if (dialogResult == SP.UI.DialogResult.OK) {
if (returnValue){
alert(returnValue);
}
}
}
|
That’s it, hope this little tutorial helps
<script type="text/javascript">
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
if(result== SP.UI.DialogResult.OK)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Data successfully populated to text boxes from Pop-up");
SP.UI.Status.setStatusPriColor(sId, 'green');
document.getElementById('<%= txtData1.ClientID %>').value = returnValue[0];
document.getElementById('<%= txtData2.ClientID %>').value = returnValue[1];
}else if(result== SP.UI.DialogResult.cancel)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
SP.UI.Status.setStatusPriColor(sId, 'yellow');
}
}
</script>
Script in Popup Page
Script for Passing the Value from Popup
<script type="text/javascript">
function closePopupAndPassData() {
var popData = [];
popData[0] = document.getElementById('<%= txtPopData1.ClientID %>').value;
popData[1] = document.getElementById('<%= txtPopData2.ClientID %>').value;
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);
}
</script>
Passing the value
1
<input id="btnClientOk2" type="button" value="Client Side OK and pass Value to Base Page" onclick="closePopupAndPassData()" />
No comments:
Post a Comment