Advanced: Capture a single value in a modal dialog

This advanced technique can be used to capture one or more values entered into a dialog window created via an action on a form button or link. This technique can be extended to pass any values from the pop up back to the form. It illustrates how to overide the default button action in an action > modal window in order to gather data from the pop up and pass it back to the form.

1. Add a SingleButton Element to your form
2. Click Actions, and create a new Open Window Action and name it "Dialog"
3. Configure the window using the "custom" option. Switch to source code view and enter the following HTML to create a textarea input 
    

   <textarea id="myinput" style="width:500px;height:200px"></textarea>
   

4. On the next screen, select Lightbox Overlay and click next
5. On The Lightbox settings screen set Use BootStrap Modal to true,. and Auto Optimize Form Buttons to false.  
6. Enter a label for the close button. We are using the close button to run our action, so in our example, we are entering "Continue".
7. After saving the open window action, create a new Custom JavaScript Action and name it "Dialog JS". This is the code that will run when the window is opened, and override the button action with out custom JS. 
8. Add the following JS to the Custom Action, replacing "Comments" with the name of the field on your form that should receive the value entered into the "myinput" textarea created in the previous step
    

   // This function will receive the field and form objects. 
   function(field,form){
     form.action.modalMgr.dialog.options.buttons[0].action = function(dialog) {
       // get iframe inside modal dialg and then get the field value
       var iframe = $(dialog.getModalBody().find('iframe')).contents();
       var value = iframe.find('#testfield').getValue();
       // send it to the primary form
       lfform.getFieldByName('Comments').setValue(value);
       dialog.close();
     }
   }
   

When you are finished you should have 2 actions attached to the Single Button Element that look like below. The first one opens the window and the second action overrides the windows button action to pass values from the Dialog to the Form: