[SalesForce] How to load seperate VF page as modal dialog without risky Iframes

In my custom Edit page I have a button where the user can select records and make them child records. As the edit page and the selection page must work on the same record they are currently implemented in wizard-style (multiple pages with the same controller and state).

As the selection page actually is more a dialog than a standalone page I thought about displaying it as a modal dialog on top of the edit page using something like jQuery UI.

I found many tutorials but the most of them were quite old or used "risky" technologies like iframes and the like.

How would you built this today? Or are they good reasons to not use JS-based modals at all?

Best Answer

This is how i solved it using the SimpleDialog solution from @Uwe Heim.

Noteworthy:

  • Load dialog page with apex:include in a display:none outputPanel
  • Use SimpleDialog.importContentNode() instead of SimpleDialog.setHtml() to reuse DOM instead of copying it.
  • declaration of a global JS variable for the dialog to close it from the other VF page
  • Use of the same StandardController to share state (Wizard-style) between the two pages

Parent page:

<apex:page standardController="MyObject__c" ctrlExt="EditCtrlExt">
        ...

        <apex:outputPanel style="display:none">
            <apex:include pageName="dialogPage" id="dialogPage" />
        </apex:outputPanel>


        <script type="text/javascript">
            var dialog;

            function openPartsSelector() {
                dialog = new SimpleDialog("SD"+Dialogs.getNextId(), false);    
                dialog.setTitle("MyDialog");  
                dialog.createDialog();     
                dialog.importContentNode(document.getElementById("{!$Component.dialogPage}"));    
                dialog.show();   
            }


            // Note: Overwrite standard behavior
            function setFocusOnLoad() { 
                // do nothing
            }
        </script>   
    </apex:page>

Dialog page:

    <apex:page standardController="MyObject__c" ctrlExt="DialogCtrlExt">
        ...
        <apex:commandButton value="Ok" action="{!doStuff}" onClick="dialog.hide()" />
        <apex:commandButton value="Cancel" onClick="dialog.hide()" />
        ...
    </apex:page>
Related Topic