Pass arguments from/to Modal Dialog

Anatoly Mironov

December 15, 2011

To pass arguments from a ModalDialog is easy. Provide some buttons and invoke close function:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, someValue);

The first argument is result, it is a enumeration with three alternatives: cancel, invalid and OK. The value you pass back to the main window can be a simple string, or a complex javascript object. In this example I’ll create a html element which is hidden (id=“modal-form” class=“s4-die”):

<div id="modal-form" class="s4-die">
   <input type="text" class="todo-text"/><br/>
   <input type="button" value="save"
      onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, {title: 'Johannes', property: $(this).siblings('.todo-text')});"/>
   </div>

Then we get the hidden html element and pass it as options to Modal Dialog, provide a callback (cb).

var t = $("#modal-form").clone(true).removeClass("s4-die").get(0);
function cb(result, value) {
	console.log("result: " + result);
	console.log("value: ");
	console.log("title: " + value.title);
	console.log("property: " + value.property);
}
var options = {
	html: t,
	title: "hej",
	dialogReturnValueCallback: cb }
SP.UI.ModalDialog.showModalDialog(options);

Pay attention to clone function. You must copy your div in order to use it more than one time. Therefore we have refine the selection of the input: $(this).siblings(’.todo-text’), otherwise wrong input is selected. A tip for further reading: SharePoint Development blog. If some values shown on the page must be refreshed, just invoke RefreshPage, like Tobias Lekman suggests.

In options you pass to SP.UI.ModalDialog.showModalDialog you can define args property. It can be any object with any complexity.

var options = {
	//...
	args: {
		title: "title from arguments"
	}
};
SP.UI.ModalDialog.showModalDialog(options);

To use it in a modal dialog, you have to get the args this way:

var args = SP.UI.ModalDialog.get\_childDialog().get\_args();

It is even better to ensure sp.js is loaded:

ExecuteOrDelayUntilScriptLoaded(function(){
    var args = SP.UI.ModalDialog.get\_childDialog().get\_args();
    var title = args.title;
    console.log(title);
}, "sp.js");

comments from wordpress

jess — 2012-08-05

How do I get the args object I assigned to the ModalDialog BACK? Basically I have a modal dialog box which I create with an args object attached to it. I want to pass those arguments into the modal dialog box (already done) and, if the user does not select something on the Modal Dialog box, I need to RETURN the same values that I passed in. How do I reference the args object from inside of a JavaScript “cancel” or “close window” method OF THE MODAL DIALOG ITSELF?

function cancelForm() { 
	var dialogResult = SP.UI.DialogResult.OK; 
	var args = SP.UI.ModalDialog.get_childDialog().get_args(); 
	var returnValue = Array(); 
	returnValue[0] = SP.UI.ModalDialog.get_childDialog().get_args("SupervisorCn"); returnValue[1] = SP.UI.ModalDialog.get_childDialog().get_args("Supervisor"); 
	SP.UI.ModalDialog.commonModalDialogClose(dialogResult, returnValue); 
}

I’m getting “undefined” when I check the value of returnValue[0] after this assignment takes place. Also “args” is “undefined” after the call to “get_args()” as well. Any feedback you can offer is appreciated.

Anatoly Mironov — 2012-08-05

Hi, Jess. I can’t test it now, but I think, you should get the args first, and then get your properties:

var returnValue = []; // [] is the same as Array();
var args = SP.UI.ModalDialog.get_childDialog().get_args();
returnValue[0] = args["SupervisorCn"];
returnValue[1] = args["Supervisor"];

I would even use the same names for properties, like:

returnValue["SupervisorCn"] = args["SupervisorCn"];
returnValue["Supervisor"] = args["Supervisor"];

Jess — 2012-08-05

Hello Anatoly and thank you for your rapid response. I am off work and offsite until Monday so cannot try this but will do so when I return first thing Monday morning. I appreciate your help. Have a good weekend.

Anatoly Mironov — 2012-08-05

You’re welcome! I am actually off work, too. On Monday I am at work so I can test it and try it, too.

Sachin — 2013-01-04

Hey Anatoly, I tried doing the same thing you have done here, but instead of the input value I keep getting the [object Object] as a result… I tried attaching a .toString() the property, but that didn’t work either, have you seen this before or do you have any ideas?

Anatoly Mironov — 2013-01-05

Hi! How do you output this property? running alert of an object would result in [object Object]. But it doesn’t mean you get “[object Object]”. Maybe it works fine. Try console.log in a web browser (but not in IE :) ).

Nolan Shaw — 2021-10-05

Awesome blog yoou have here

Pass arguments to Modal Dialog and use it

comments from wordpress