Launch Screen Flow from Aura Component within a Modal

Question

I created a screen flow that I would like to launch from than Aura component The behavior should be the following:

1. One button
2. On click Open a Modal
3. Display the Screen flow content in the modal

if I put my lightning:flow aura:id outside the Modal then it works and I see my screen flow AND a button if I put it outside my modal then I get an error

A Component Error has occured! Error: Action failed: c:getBookingsFromScreenFlow$controller$doInit [Cannot read properties of undefined (reading 'startFlow')] Component: c:getBookingsFromScreenFlow . Caused by: Action failed: c:getBookingsFromScreenFlow$controller$doInit [Cannot read properties of undefined (reading 'startFlow')]

I have no idea how I can make it work Could you please help me ? thx you

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!--Boolean attribute to indicate if modal is open or not 
       default value is false as modal is closed when page is loaded 
    -->
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <div class="slds-m-around_xx-large">
        <lightning:button variant="brand"
                          label="What is Modal/PopUp Box?"
                          title="What is Modal/PopUp Box?"
                          onclick="{! c.openModel }" />
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
             
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add booking to opportunity</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning:flow aura:id="Screen_Flow_Add_multiple_Boookings_to_opportunity" />
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>
</aura:component>

Controler:

({
    myAction : function(component, event, helper) {
        
    },
    openModel: function(component, event, helper) {
      // Set isModalOpen attribute to true
      component.set("v.isModalOpen", true);
   },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false  
      component.set("v.isModalOpen", false);
   },
  
   submitDetails: function(component, event, helper) {
      // Set isModalOpen attribute to false
      //Add your code to call apex method or do some processing
      component.set("v.isModalOpen", false);
   },
   doInit : function(component) {
       console.log('testouille')
      
       var flow = component.find('Screen_Flow_Add_multiple_Boookings_to_opportunity');
       var inputVariables = [
          {name: "varOppID", type: "String", value: component.get("v.recordId") }
       ];
       console.log('inputVariables', inputVariables);
       flow.startFlow('Screen_Flow_Add_multiple_Boookings_to_opportunity', inputVariables);    
    },
})

Answer 1

You are trying to start the Flow in the init handler, which is executed when the component initializes, when your isModalOpen value is set to false. Since you have the modal (and Flow) inside an aura:if tag that uses isModalOpen, the component.find() function in the initialization returns undefined (nothing inside an aura:if component is rendered until it is true).

You could solve this by running the logic that you have in doInit as part of openModal so that you initialize the Flow after the lightning:flow component exists.