CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Pass arguments from/to Modal Dialog

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.

Pass arguments to Modal Dialog and use it

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");
Advertisements

6 responses to “Pass arguments from/to Modal Dialog

  1. jess 2012-08-10 at 17:29

    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-10 at 18:51

      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-10 at 19:03

        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-10 at 20:58

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

  2. Sachin 2013-01-10 at 16:16

    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-11 at 16:07

      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 🙂 ).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: