Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 7 down vote accepted

http://www.chakkaradeep.com/post/Using-the-SharePoint-2010-Modal-Dialog.aspx is a good example.

Basically you create the Modal dialog like so...

//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);
    SP.UI.ModalDialog.showModalDialog(options);
}

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() {
            if(Page_ClientValidate())
            {
                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);
            }
        }
    </script>
</asp:Content>

Ok so basically theres 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 dont need that part (so don't put in the __doPostBack!).

So say you now have the ItemID (not that its 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)

share|improve this answer
1  
+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. –  Andrey Markeev Jun 12 '12 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 –  user1106196 Jun 13 '12 at 8:07
    
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 Jun 13 '12 at 12:42
    
Very clear and helpful, thanks for your time. –  user1106196 Jun 13 '12 at 14:12
    
could you send me the project as a sample..Many thanks my email is rsvacchi@gmail.com Regards Rodolfo –  user11058 Oct 1 '12 at 11:28
show 1 more comment

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

or

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

So, the function dialogReturnValueCallback may look like

dialogReturnValueCallback:
      function (res, retVal) {
        if (res === SP.UI.DialogResult.OK) { 
            alert(retVal[0] + retval[1]);
            // or
            // alert(retVal.arg1 + retval.arg2);
        }        
      }  
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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