I'm using SharePoint Modals within my implementation, I've used these before and have basic experience with them. I do as much work as possible in C# and use JS where I have too :-)

My current stumbling block is:

I'm launching a modal to collect additional data from the users, financial figures, the modal has a field called total - this calculates data from some of the fields. I'm only interested in the total.

When closing the modal window I want the total field to be accessible in the parent window to populate a field, but I'm unsure how to pass this field back, any help is appreciated.

I understand you can use something like 'options.dialogReturnValueCallback' to pass data back, but I'm unsure how this works.

Thanks for any help.

2 Answers 2


This is a good example.

Basically you create the Modal dialog like this:

//Dialog Opening
function OpenDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.url = '/_layouts/mySolution/myPage.aspx';
    options.width = 500;
    options.height = 400;
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);

and then make the return function like this:

// Dialog callback
function CloseCallback(result, target) {
    if (result == SP.UI.DialogResult.OK) {
        // Run OK Code
        // To be consistent with the below... 
        this.dataArray = target.split("^");
        var startDate = new Date(this.dataArray[1]);
        // Note that I use this.dataArray to allow the object to be accessed throughout the code
    if (result == SP.UI.DialogResult.cancel) {
        // Run Cancel Code

Editing to include more info!

For the code I've written, I have an aspx page that takes an ItemID, postbacks to retrieve list item data, and then sends back to the parent page the changes made for two Dates (or that it was cancelled). For now I'm just going to show the JavaScript that gets the ItemID and then returns the form values.

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript">
        function onEditTimeOffLoad() {
            var itemId = window.frameElement.dialogArgs;
            var pageId = '<%=Page.ClientID %>';
            __doPostBack(pageId, itemId);

        function BtnEditTimeOffCancel_Click() {
            SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'Cancelled clicked');

        function BtnEditTimeOffOk_Click() {
                var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>;
                var EmployeeName = form.<%SPHttpUtility.NoEncode(Employee.ClientID,Response.Output);%>.value;
                var startDate = document.getElementById('<%=DateStart.Controls[0].ClientID%>').value;
                var endDate = document.getElementById('<%=DateEnd.Controls[0].ClientID%>').value;
                var data = "" + EmployeeName + "^" + startDate + "^" + endDate;
                SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, data);

Basically there's some supporting code behind that takes the ItemID from the EditTimeOffLoad and post backs to get info, which we are going to ignore assuming you don't need that part (so don't put in the __doPostBack!).

So say you now have the ItemID (not that it's helpful without the other code but whatever), and your user has completed filling out the form and hits 'OK'. The BtnEditTimeOffOk_Click() is naturally linked to an 'OK' button and will fire (after validation which in my case is SharePoint Webcontrols InputFormValidators).

I require 3 values in my case, and are handling them as strings and sending them back by simply concatenating them with a value I know will not show up in any of them. I pull the form object in order to get my EmployeeName textbox value, and getElementById to get the Dates. To be perfectly honest I do not remember why I did it that way, but it works :).

Finally with the string data properly concatenated I run the commonModalDialogClose and pull the data with the target variable from my CloseCallBack. (I needed to do target.split("^") to actually get the data I wanted.)

  • 4
    +1. To add: I think second parameter in the CloseCallback function should be named returnValue. When you're closing your modal dialog, for example using window.frameElement.commitPopup or SP.UI.ModalDialog.commonModalDialogClose, you can pass any js object or value there, and it will be accessible through the returnValue parameter. Commented Jun 12, 2012 at 22:36
  • Thanks for the info, I understand the code posted above in the CloseCallBack function, I'm still struggling to understand how I can pass a textbox value back to the parent. The blog post provided is a good example of using the modal and checking where Ok / Cancel were executed but I can't see any field values being passed back. Am I missing something? Thanks Commented Jun 13, 2012 at 8:07
  • 1
    Editing my answer to show more on the code I've written and help you better understand! (also your right the link doesn't actually have the passing of the value, my bad!)
    – Zork
    Commented Jun 13, 2012 at 12:42
  • could you send me the project as a sample..Many thanks my email is [email protected] Regards Rodolfo
    – user11058
    Commented Oct 1, 2012 at 11:28
  • Unfortunately this project is part of a much larger Company specific system and is not available for display or use outside of that Company. If the above is not enough to help you with your work, please search other questions or ask your own.
    – Zork
    Commented Oct 2, 2012 at 9:26

The previous answer (where some data are concatenated into string, returned to the parent page and then split into values) seems to be a bit complicated and even redundant. Because we always can return data to the parent page as

var returnValue = []; // array
returnValue[0] = 123;
returnValue[1] = 'hello';
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValue);


var returnValue = { arg1: 123, arg2: 'hello' }; // object
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValue);

So, the function dialogReturnValueCallback may look like

      function (res, retVal) {
        if (res === SP.UI.DialogResult.OK) { 
            alert(retVal[0] + retval[1]);
            // or
            // alert(retVal.arg1 + retval.arg2);
  • Yes using array is better instead of join string and then split.
    – codemirror
    Commented Jul 21, 2017 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.