Using Salesforce standard modal in a Detail page button - Part 2

As illustrated in Part 1, we looked at opening the modal which come with Salesforce and changing its content.

But most of the time, you want the content in the JavaScript detail button to be dynamic. So instead of writing a lot of JavaScript code and encoding the HTML content into a string to then pass it to the setContentInnerHTML function, we could display a Visualforce page.

You just need to modify it as below and change the source (src attribute).

box.setContentInnerHTML(
  '<iframe src="/apex/modaldemo" style="border:none;" width="100%" height="'+ (height - 30)+'px" />'
);

We have now added a Visualforce page, which is kind of awesome. But what if we want to some processing and at the end close the modal from within the Visualforce page?

Well, this is not possible since you don't have access to the modal instance in the Visualforce page.
Fortunately we do have an alternative way which is the use of postMessage.

How does it work? 
First we need to the Visualforce page to send the message once the action is done. Which can be a click on button, a progress bar reaching 100%, an action function which has completed or many other scenarios. 

You just need to execute the following JavaScript code:

window.parent.postMessage('close', '*');

Now we need to capture this message from the JavaScript on the button and then close the modal. Here is how we do it. 

window.addEventListener('message', function(event){
  if (event.data === 'close'){
    box.hide();
  }
});

Below is the full implementation: 

Your visualforce page

<apex:page showHeader="false" sidebar="false" >
    <script type="text/javascript">
      var closePopup = function(){
        window.parent.postMessage('close', '*');
      }
    </script>
    <apex:form >
        <apex:pageBlock title="This is a visualforce page">
            <apex:pageblockButtons location="bottom" >
                <apex:commandButton onClick="closePopup();return false;" value="Close" rerender="none" />
            </apex:pageblockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

JavaScript to be included in the detail page button

(function() {
    var width = 700;
    var height = 200;
    var title = "Dialog title here";

    var box = new SimpleDialog("salesforce" + Math.random(), true);
    box.setTitle(title);
    box.displayX = true;
    box.isMovable = false;
    box.createDialog();
    box.setWidth(width);
    // set your html content here
    box.setContentInnerHTML(
      '<iframe src="/apex/modaldemo" style="border:none;" width="100%" height="'+ (height - 30)+'px" />'
    );
    //set the height of the modal
    box.dialog.children[1].style.height = height + 'px';
    box.show();

    //if displayX is set to true, then override standard close event by this code
    box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() {
      box.hide();
      // you can add code to reload the page or redirect to another page 
    };
    //optional : add this to close the modal onclick of the overlay background
    box.background.addEventListener('click', function() {
      box.hide();
    });
    
    // if you want to be able to close the modal from the Visualforce page
    window.addEventListener('message', function(event){
      if (event.data === 'close'){
        box.hide();
      }
    });
})();

view raw AdvancedModal.md hosted with ❤ by GitHub

Hope you like it. :)