Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

In visualforce there seems to be no buildin way to create JS modal dialogs.

I think the old-school basic approach was to create modal patterns by rerouting via pageRef like a wizard. Keeping data in the viewstate, the outcome should be usable. But not very nice.

Personally my first choice would be jquery-ui. $(...).dialog({}); is pretty cool and except of the considerable small footprint in respect of resource-consumption, I see no real downside in using it within visualforce. Usually I have jquery-ui already loaded for other reasons.

Additionally, I found that there is an not officially supported function in main.js which let's you create a modal dialog in the salesforce-style:

function SimpleDialog(id, isMovable)

I didn't used it, but others seems to be happy with it: https://developer.salesforce.com/forums?id=906F000000097vaIAA - for sure, it's not best practice to use it, but due to my experience the changes in the salesforce markup and js happens so slowly that if it works once, it'll probably will do it for years.

share|improve this answer
    
The SimpleDialog solution workes great for me and is much easier and looks better than the JQuery UI solution. I keep this question unanswered for some days to invite more insight. After that I will make you Nr.1. ;-) –  Robert Sösemann Aug 7 at 10:07
    
I posted the (important parts of) my code in an extra answer here. –  Robert Sösemann Aug 7 at 12:36

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>
share|improve this answer

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.