Add Lightning Flow in LWC

by Rijwan Mohmmed
0 comment
add-lightning-flow-in-lwc

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

add-lightning-flow-in-lwc-output-techdicer
lightning-flow-in-lwc-output-techdicer

Key Highlights :

  1. Can launch flow from LWC.
  2. We can pass multiple parameters to flow from the LWC component.
  3. We can get success or error messages from the Lightning Flow.
  4. 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.

Lightning-flow-in-LWC-component-variable-declare
Lightning-flow-in-LWC-component-variable-declare

Step 2: Here we fetch the account details and which record Id we have. for this we choose to get the record source.

Lightning-flow-in-LWC-component-fetch-record
flow-in-LWC-component-fetch-record

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.

account-details-in-flow.png
account-details-in-flow.png

Step 3: In this step, we will update the account record so we put Update record source.

Update Account -flow
Update Account -flow

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 :

add-lightning-flow-in-lwc-output-techdicer
add-lightning-flow-in-lwc-output-techdicer

Reference :

  1. LWC
  2.  screen flows within Lightning Web Components

You may also like

Leave a Comment