I am currently new in Lightning component, I am trying to create a pop up (modal) of a screen flow from related list button. enter image description here As far as I understand, the way to achieve this is by creating: List Button -> Visualforce page -> App -> Aura Component -> Screen flow.

So far I have finished the flow, which will create a child related to the parent. However, when I click the button I can not open the screen as pop up (modal), instead as a new tab.

This is the VF Page

<apex:page standardController="Beteiligte__c" tabStyle="Beteiligte__c" recordSetVar="AllBeteiligtes">
<apex:includeLightning />
<!--flow:interview name="Activate_Participant_List">
    <apex:param name="recordIds" value="{!Selected}"/>
    $Lightning.use("c:ButtonNewParticipantApp", function() {
                function(cmp) {
                    console.log('>>>>> App is hosted');

This is the app

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:ButtonNewParticipant"/>

This is the aura component

     <aura:attribute name="recordId" 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}"/>
                    <div class="slds-modal__content slds-p-around_medium">
                        <lightning:flow aura:id="flow" onstatuschange="{!c.closeModalOnFinish}" />
            <div class="slds-backdrop slds-backdrop_open"></div>

This is the controller of the aura component

doInit : function(component, event, helper) {
   component.set('v.isOpen', true);
   var flow = component.find('flow');
   var inputVariables = [
        { name : "recordId", type : "String", value: component.get("v.recordId") }
flow.startFlow("PROJECT_CreateParticipant", inputVariables);


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);

How do I fix/achieve this ?

Is there any alternative or more efficient way to do this ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.