Passing Data To and From SharePoint Modal Dialogs

SharePoint Modal Dialogs

SharePoint 2010 introduced the ECMAScript Client Object Model. One of the things that it included was the Dialog Framework. This allows modal dialogs to be easily displayed inside of SharePoint. This is typically done by specifying a web page to be displayed as the dialog on top of the current web page. In this first example, a page named BasePage.aspx is displaying a dialog that is popupForm.aspx.

Displaying Dialogs

It is fairly trivial to display a dialog. All you have to do is initialize an options object and call SP.UI.ModalDIalog.showModalDialog. In this example, the page popupForm.aspx will be displayed as the modal dialog. When the dialog is closed, the method named “callbackMethod” will be called.

Passing Arguments in the URL

In many cases, you will want to pass a value to the dialog. The first way to do this is to pass it in as a query string. All that needs to be done is to append the appropriate item and value to the URL. In this example, “7” would be passed to the dialog in a query string named “ItemID”.

The value would be retrieved by the dialog in the code behind just as any query string would be retrieved. In this example, the code behind written in C#.

Passing Arguments in the Options Object

The other way to pass arguments to the use the args field in the options object. In this example, a value of 7 would be passed to the dialog as an argument.

The value would be retrieved in javascript using the window.frameElement.dialogArgs property.

Returning a Value from the Modal Dialog

When the user closes the modal dialog, at least one value is returned to the base form. This value is passed to the callback function specified in the options object. This value is the dialog result. The value will depend on how the dialog was closed.

• If the dialog was closed by calling window.frameElement.cancelPopUp, the result will be SP.UI.DialogResult.cancel.
• If the dialog was closed by called window.frameElement.commitPopup, the result will be SP.UI.DialogResult.ok.
• If the dialog was closed with window.frameElement.commonModalDialogClose, the result is specified in the first parameter.

Side Note: The method named cancelPopUp capitalizes the ‘U’. The method named commitPopup does not.

Here is an example of how the callback would handle the result in JavaScript.

Handling the Callback


function callbackMethod (dialogResult, returnValue) {
    if(dialogResult == SP.UI.DialogResult.ok){
        // The user clicked the OK button.                 
        // handle commitPopup         
    } else{
        // The user clicked the Cancel button.                 
        // handle cancelPopup         
    }
}

If the dialog needs to be closed from the code behind and not from client side code, the JavaScript is simply inserted in the response.

Returning an Argument

If you want to return an argument from the dialog, it is passed as the first parameter to the commitPopup. In this example, the dialog would return 7.

The value is received in the second parameter of the callback method. In the following example, the return value is placed into a hidden field on the base page.

8 comments

1. Lexus says:

   June 23, 2011 at 5:43 pm

   I found just what I was ndeeed, and it was entertaining!

   Reply
2. Herman says:

   July 19, 2011 at 9:49 pm

   Hi Please help
   How can i pass a textbox value from mainpages to a label on the SP.UI.Dialog

   Reply
   • Eric says:

     September 2, 2011 at 6:58 pm

     There are two ways you could move data from the textbox on the main form to the label on the popup. You could pass the text of the textbox as a query string to the popup. Then you could set the text of the label in the Page_Load method of the popup page. This would be very similar to the ‘Passing Arguments in the URL’ section of the post.

     If you wanted to do so, you could handle the whole thing in javascript. This would follow the ‘Passing Arguments in the Options Object’ section of the post. I’ll assume you are using jQuery.

     Let’s say that your main page has a text box named txtInput. You could modify the code labeled ‘Argument in the Options Object’ to be the following:

     function DisplayDialog() {

     var options = {
     url: ‘PopupFormExample.aspx’,
     args: $(‘#txtInput’).val(),
     title: ‘Select Value’,
     dialogReturnValueCallback: callbackMethod
     };
     SP.UI.ModalDialog.showModalDialog(options);
     }

     This passes the text from the txtInput textbox to the dialog. Then in the document ready function of the popup page, you could set the label text to be the text from the argument.

     $(“span[id$='lblOutput']“).html(window.frameElement.dialogArgs);

     This code sample assumes that the label is named lblOutput.

     Reply
3. Herman says:

   July 19, 2011 at 10:02 pm

   Sorry i use a webpart and call the Dialog from there

   Reply
4. Endre says:

   August 11, 2011 at 12:18 pm

   Nice work. Simple and clean!

   Reply
5. Opening a Modal Dialog on Page Load from Server-Side Code? Don't Forget This Sweet (and Totally Critical) Function Call - SharePoint Development says:

   November 1, 2011 at 6:01 am

   [...] my esteemed colleague Eric has previously detailed for us, SharePoint 2010 comes equipped with a snappy little API for working with modal popup dialogs, [...]

   Reply
6. Pass arguments from Modal Dialog « Sharepoint… says:

   January 13, 2012 at 8:55 am

   [...] tip for further reading: SharePoint Development blog. Advertisement LD_AddCustomAttr("AdOpt", "1"); LD_AddCustomAttr("Origin", "other"); [...]

   Reply
7. Passing Multiple arguments to pop up dialog box and retrive the same in popup says:

   March 31, 2012 at 5:38 pm

   HI,
   Great Post,
   How Can I pass multiple arguments and retrive the same.
   below example passess only single parameter
   1.var options = {
   2. url: ‘popupForm.aspx’,
   3. args: 7,
   4. title: ‘Select Value’,
   5. dialogReturnValueCallback: dialogCallback,
   6. };
   7.SP.UI.ModalDialog.showModalDialog(options);

   Reply