function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jack HammondJack Hammond 

Is it possible to launch a flow in a modal dialog from a list button (in Lightning)

Hi there, I've got a very specific design outcome I'm trying to achieve in Lightning and I can't find any info relating to this on any of the usual channels.

I want to present a flow as a modal dialog box from a list view. This would mean a user could select multiple records, and run through the flow for each of the items. I have built a version that meets these criteria with the exception of presenting the flow in a modal dialog over the current list. Although this final requirement isn't critical to the functionality of the process, it is important to keep the experience consistent with other lightning processes.

I understand this could be completed through JS if I was using Classic, but our org has migrated to Lightning a while back and won't be moving.

Also, interestingly I can get the desired modal display using an Action, but this can't be added to a list view (only a detail view) in my understanding.


Does anyone have any suggestions as to how this could be achieved? Thanks in advance!




This is the current process:

Visualforce Page, launched by list view button 
<apex:page standardController="Contact" lightningStyleSheets="true" tabStyle="Contact" recordSetVar="AllContacts" >
        <!-- Add below each field you reference in your Flow -->   
        <apex:repeat value="{!AllContacts}" var="row" rendered="false">
            {!row.Id}
        </apex:repeat>
        <!-- Runs your Flow -->   
        <flow:interview name="Outbound_Call_Flow_Contact_v2" 
            finishLocation="{!URLFOR($Action.Contact.Tab, $ObjectType.Contact)}">
            <apex:param name="selectedContacts" value="{!Selected}"/>
        </flow:interview>
</apex:page>

Button settings
User-added image

List view
User-added image

Flow once launched (takes its own page, when I would like it to present modally)
User-added image

Desired presentation of flow
User-added image 
Best Answer chosen by Jack Hammond
Jessica RiffeJessica Riffe
You can create a lightning component that can show a flow for you.
This should get you started:
Component 
<aura:component>
     <aura:attribute name="{!isOpen}" type="Boolean" default="false" access="private"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

      <aura:if isTrue="{!v.isOpen}">
            <div style="height: 640px;">
                <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <header class="slds-modal__header slds-modal__header_empty">
                            <lightning:buttonIcon iconName="utility:close" class="slds-modal__close" onclick="{!c.closeFlowModal}"/>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium">
                            <lightning:flow aura:id="flow" onstatuschange="{!c.closeModalOnFinish}" />
                        </div>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </div> 
        </aura:if>
</aura:component>

Controller: 
doInit : function(component, event, helper) {
       component.set('v.isOpen', true);
       var flow = component.find('flow');
       flow.startFlow('Flow_Name');
    },

closeFlowModal : function(component, event, helper) {
        component.set("v.isOpen", false);
    },

closeModalOnFinish : function(component, event, helper) {
        if(event.getParam('status') === "FINISHED") {
            component.set("v.isOpen", false);
        }
    }

 

All Answers

Stephen Krafft 3Stephen Krafft 3
Hi Jack, did you ever find a solution to above?

We're in a similar situation where we could leverage this same capability.

Thanks in advance!
Jessica RiffeJessica Riffe
You can create a lightning component that can show a flow for you.
This should get you started:
Component 
<aura:component>
     <aura:attribute name="{!isOpen}" type="Boolean" default="false" access="private"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

      <aura:if isTrue="{!v.isOpen}">
            <div style="height: 640px;">
                <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <header class="slds-modal__header slds-modal__header_empty">
                            <lightning:buttonIcon iconName="utility:close" class="slds-modal__close" onclick="{!c.closeFlowModal}"/>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium">
                            <lightning:flow aura:id="flow" onstatuschange="{!c.closeModalOnFinish}" />
                        </div>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </div> 
        </aura:if>
</aura:component>

Controller: 
doInit : function(component, event, helper) {
       component.set('v.isOpen', true);
       var flow = component.find('flow');
       flow.startFlow('Flow_Name');
    },

closeFlowModal : function(component, event, helper) {
        component.set("v.isOpen", false);
    },

closeModalOnFinish : function(component, event, helper) {
        if(event.getParam('status') === "FINISHED") {
            component.set("v.isOpen", false);
        }
    }

 
This was selected as the best answer
Jack HammondJack Hammond
Thanks Jessica!
Chris SalgadoChris Salgado
This works perfectly thanks Jessica!
Steve ConnellySteve Connelly
I have a variation of this. I have a Lightning component where ihave a series of images with embeded URLs for various flows.

Like so:
<a href="https://promnetwork--hd2sf--c.cs27.visual.force.com/flow/runtime.apexp?flowDevName=Quick_Case&amp;flowVersionId=301220000009hbD" target="blank">
                <img src="/resource/testimage1"  height="300" width="300" />
            </a>   

As above, clicking the image launches the flow in a new tab.

How could I adapt what you have above to launch the flow in a modal from the image?

Steve
Peter Frandsen 5Peter Frandsen 5
Salesforce Labs has build a solution for launching a flow in a modal dialog from a button. This might be helpfull.
Launch Flow in Modal: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMYinUAH
Mustapha Elmadi 14Mustapha Elmadi 14
The code of jessica work perfectly (Thank you), but you should change : 
<aura:attribute name="{!isOpen}" type="Boolean" default="false" access="private"/
<!--With name="isOpen" -->
If you don't change it you will get an error.

Cheers,
HARSH GUPTA 5808HARSH GUPTA 5808

Hi Jessica,

How can I add this lightning component to quick action on List view Page? According to the below link  

https://help.salesforce.com/articleView?id=mass_quick_actions_create.htm&type=0. 

IMPORTANT You can perform a mass quick action on only the following quick action types:
Create a Record
Update a Record
 
Amit Vaswani 13Amit Vaswani 13
Thanks Jessica!!
Yadhu Krishnan SYadhu Krishnan S
Hey, I want the same functionality but with LWC, is it possible to achieve in LWC?
Muralikrishna PolimaraMuralikrishna Polimara
Found this AppExchange Solution that can become handy as well: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMYinUAH
However, I think this solution is for detail pages (vs. list view pages)

If anyone got @Jessica Riffe's solution to work, could you confirm what should be the setup look like?