I created a screen flow that I would like to launch from than Aura component The behavior should be the following:
- One button
- On click Open a Modal
- 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);
},
})