Hello folks, today we will discuss Add Lightning Flow in LWC. Previously this was not possible so we used the Aura component to embed Lightning Flow but Now we can embed Lightning Flow in LWC (Lightning Web Component). We can launch the Flow from LWC directly.
Also check this: Useful JavaScript methods in LWC
Key Highlights :
- Can launch flow from LWC.
- We can pass multiple parameters to flow from the LWC component.
- We can get success or error messages from the Lightning Flow.
- We use <lightning-flow> in the LWC component to embed the flow.
<lightning-flow flow-api-name='Account_Details'
flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>
</lightning-flow>
Process & Code :
I am creating a Lightning flow that shows the account details on-screen layout, also this can be updated. I will send the record Id from the LWC component. We can send multiple parameters from the LWC 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 LWC 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 click on fields in the left side pane, and select the account variable in the record so we can show the account details in these fields and also can update.
Step 3: In this step, we will update the account record so we put Update record source.
lightningFlowInLWC.HTML :
<template>
<lightning-card variant="Narrow" title="Add Lightning Flow in LWC" icon-name="standard:account">
<lightning-button label="Open Flow Modal" slot="actions" onclick={openModal}></lightning-button>
</lightning-card>
<!-- modal start -->
<template if:true={showModal}>
<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 header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close
slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
Modal Header
</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-flow flow-api-name='Account_Details'
flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>
</lightning-flow>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<lightning-button label="Cancel" title="Non-primary action" onclick={closeModal}
class="slds-m-left_x-small">
</lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<!-- modal end -->
</template>
lightningFlowInLWC.JS :
import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LightningFlowInLWC extends LightningElement {
showModal = false;
openModal() {
this.showModal = true;
}
closeModal() {
this.showModal = false;
}
get inputVariables() {
return [
{
name: 'recordId',
type: 'String',
value: '0016F00002QHh3EQAT' // put account Id here
},
/*{
name: 'accountName',
type: 'String',
value: 'test'
}*/
];
}
handleStatusChange(event) {
let objDetails = event.detail;
console.log(JSON.stringify(event.detail));
if(objDetails.status === 'FINISHED_SCREEN' || objDetails.status === "FINISHED") {
this.showToast('Status', 'Flow task completed', 'success', 'dismissable');
this.showModal = false;
}
}
showToast(title, message, variant, mode) {
const evt = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: mode
});
this.dispatchEvent(evt);
}
}
lightningFlowInLWC.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Total views : 1096116
1 comment
The transition between flow screens seems to flash an ugly looking overlay. Is there a way to hide it?