Hello friend, today we will discuss Add Lightning Flow in Aura Component. To embed a flow in your Aura component, add the <lightning: flow> component to it. We can use this on the Lightning page, record page, etc.
Once you embed a flow in an Aura component, use JavaScript and Apex code to configure the flow at run time. For example, pass values into the flow or to control what happens when the flow finishes. Lightning flow in Aura supports only screen flows and auto-launched flows.
We need to start the flow and when the end javascript method will call so we can perform actions on the lightning component side like send parameters and show success and error messages.
Also, check this: Use IFrame in LWC Salesforce
<lightning:flow aura:id="flowData" />
Key Highlights :
- We can open Flow in the Aura component.
- We use <lightning: flow> in the aura component to embed the flow.
- We can send multiple parameters to flow.
- We can get the status of flow error/success and can show the message in the Aura component.
Process & Code :
I am creating a Lightning flow that shows the account details on-screen layout. I will send the record Id from the Aura component. We can send multiple parameters from the Lightning component to the Lightning flow.
Account_Details Flow: We will create a screen flow here.
Step 1: Here we will create input variables so we can get data from the Aura component.
Step 2: Here we fetch the account details and which record Id we have. for this we choose to get the record source.
Step 3: In this step, we will create a screen layout and put the text field, and assign the account record fields so we can show the account details in these fields.
FlowInAura.cmp :
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId,flexipage:availableForAllPageTypes">
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:attribute name="hasError" type="Boolean" default="false"/>
<aura:attribute name="recordId" type="String" />
<lightning:button variant="brand" label="Open Flow" title="Open Flow" onclick="{! c.handleOpenFlow }" />
<!--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 slds-modal_medium">
<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">
Account Info
</h2>
</header>
<!--Modal Body Start here-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div>
<!--Lightning Flow Attribute-->
<lightning:flow aura:id="AccountInfoFlow" onstatuschange="{!c.statusChange}"/>
</div>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</aura:component>
FlowInAuraController.Js :
({
//Flow Status Change
statusChange : function (component, event, helper) {
//Check Flow Status
if (event.getParam('status') === "FINISHED_SCREEN" || event.getParam('status') === "FINISHED") {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title: "Success!",
message: "message",
type: "success"
});
toastEvent.fire();
component.set("v.isModalOpen", false);
$A.get('e.force:refreshView').fire();
} else if (event.getParam('status') === "ERROR") {
component.set("v.hasError", true);
}
},
handleOpenFlow: function(component, event, helper) {
var accountId = component.get("v.recordId");
// Set isModalOpen true
component.set("v.isModalOpen", true);
//Find lightning flow from component
var flow = component.find("AccountInfoFlow");
//Put input variable values
var inputVariables = [
{
name : "recordId",
type : "String",
value : accountId
},
/*{
name : "Account Name",
type : "String",
value : "Test"
},*/
];
//Reference flow's Unique Name
flow.startFlow("Account_Details", inputVariables);
},
closeModel: function(component, event, helper) {
component.set("v.isModalOpen", false);
},
})
Output :
Total views : 1094844