3

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}"/>
</flow:interview-->
    <script>
    $Lightning.use("c:ButtonNewParticipantApp", function() {
        $Lightning.createComponent("c:ButtonNewParticipant",
                {},
                "BcSecuritiesDiv",
                function(cmp) {
                    console.log('>>>>> App is hosted');
                });
    });
</script>
</apex:page>

This is the app

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

This is the aura component

<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}"/>
                    </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>

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 ?

1
  • I have the same issue. Did you find how to open a popup from a Related List button?
    – S..
    Sep 14 at 21:11

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.