+ Start a Discussion
Mike_M_2Mike_M_2 

How to place a Visual Flow in a Salesforce Lightning Design System modal

I am able to launch my Flow is a SLDS modal but when I click on the Flow's NEXT button, the entire VF page is re-rendered. How can I make the NEXT button function properly?
// Mike Modal methods
        function openModal2() {
        console.log('running openModal2');
            j$("#modalWizDiv").addClass('slds-modal--large');
            j$("#modalWizDiv").addClass('slds-fade-in-open');
            j$("#modalWizDivBackDrop").addClass('slds-backdrop--open');
            j$("#modalWizLoading").addClass('slds-hide');
            j$(".modalWizSubmit").click(function(event) {
            console.log('running in event')
            closeWizModal();
            });
 
<!-- New Account Wizard Modal -->
        <div>
            <div id="modalWizDiv" aria-hidden="false" role="dialog" class="slds-modal">
            
                <div id="modalWizLoading" style="transition:opacity 0.4s linear;z-index:99999; opacity:1; width:100%; height:100%; position:fixed;right:0;bottom:0;left:0;background:rgba(255,255,255,0.85);">
                    <div class="slds-spinner--large" style="position:fixed; top:30%; left:45%;">
                        <img src="{!$Resource.SLDS203}/assets/images/spinners/slds_spinner_brand.gif" alt="Loading..." />
                    </div>
                </div>
                
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <h2 class="slds-text-heading--medium">New Account</h2>
                    </div>
                    <!-- Modal Content -->
                    <div class="slds-modal__content slds-p-around--medium">
                        <!-- Error Message -->
                        <div class="modalWizPageMessages slds-box slds-theme--error slds-m-bottom--large slds-hide">
                          <p>Some Random
                            <strong>text</strong>.</p>
                        </div>
                        <!-- / Error Message -->
                        <div class="slds-align--absolute-center">

                            <fieldset class="slds-form-element is-required">
                                <div class="slds-float--left">
                                    <legend class="slds-form-element__legend slds-form-element__label">Select a Legend</legend>
                                </div>
                                
                                <div id="wizardContainer" class="slds-form-element__control slds-float--left slds-m-right--xx-large slds-p-right--xx-large">
                                   <flow:interview name="New_Account_Wizard"></flow:interview>
                                </div>

                                <div class="slds-clearfix"></div>
                            </fieldset>

                        </div>
                    </div>
                    <!-- / Modal Content -->                           
                        <div class="slds-modal__footer">
                        <div class="slds-x-small-buttons--horizontal">
                            <!-- RET URL -->
                            <button class="slds-button slds-button--neutral" onclick="redirectRetURL();">Cancel</button>
                            <button class="modalWizSubmit slds-button slds-button--neutral slds-button--brand">Done</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalDivBackDrop" class="slds-backdrop"></div>
        </div>

 
Revathy KarthiRevathy Karthi
Hi,
We are not able to get the lightning exp. in the flow launched from VF page. can you please help us on this.

Thanks,
​Revathy
Mike_M_2Mike_M_2
Revathy, This should help https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_flow_interview.htm