Lightning Web Components within a Screen Flow

Use Case

Build custom Lightning Web Components (eg. Lightning DataTable) and use them inside screen flow in order to display a record list based on a condition and allow selection of one of the records to move forward with the flow.

In this use case, we display the case record list inside screen flow and allow selection of a case record, and move forward with the flow carrying forward the case record ID selected in LWC.

In this use case, we use the LWC DataTable to display a case record list (based on conditions) in a screen flow that allows a case record to be selected and later used within the flow.

Also, this component is designed to work both on desktop (Lightning DataTable) as well as mobile (lightning layout items) i.e., the same component with different UIs for desktop and mobile, as Lightning DataTables are not compatible with mobile. For more information on using DataTables on mobile devices, refer to the blog link below:

Key Points

  1. We need to modify “<component>.js-meta.xml” file for making the component available inside flows using the <target> tags:

<targets>
<target>lightning_FlowScreen</target>
<target>lightning___RecordPage</target>
</targets>

  1. We need to include in <targerConfigs> meta xml file to make use of input variable and pass the values from LWC to flows, and access them in flows:

<targetConfigs>
<targetConfig targets=”lightning__FlowScreen”>
<property name=”selectedCaseId” label=”SelectedCaseRecord” type=”String”/>
</targetConfig>
</targetConfigs>

  1. Make use of events in order to report runtime changes from LWC to flows, we use FlowAttributeChangeEvent inside the JavaScript file for this:
    Import FlowAttributeChangeEvent

import { FlowAttributeChangeEvent } from ‘lightning/flowSupport’;

Use it to capture required attribute change:

const attributeChangeEvent = new FlowAttributeChangeEvent(‘selectedCaseId’, this.selectedCaseId);

Solution

Javascript File Contains:

import { api, LightningElement, track } from ‘Iwc’;

import FORM FACTOR from @salesforce/client/formFactor’;
import { FlowAttributeChangeEvent } from ‘lightning/flowSupport’;

handleSelect( event ) {

if(this.isDesktop == true){

const selRows = event.detail.selectedRows; console.log(‘Selected Rows are + selRows[0].Id); this.selectedCaseId = setRows[0].Id; const attributeChangeEvent = new FlowAttributeChangeEvent(‘selectedCaseId’, this.selectedCaseId); this.dispatchEvent(attributeChangeEvent);

}

else if(this.isMobile == true){
const selRows = event.target.dataset.targetId;

console.log(‘Selected Rows in mobile are selRows);
this.selectedCaseId = selRows; const attributeChangeEvent = new FlowAttributeChangeEvent(‘selectedCaseId’, this.selectedCaseId);
this.dispatchEvent(attributeChangeEvent);

}

}

Meta XML File Contains:

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiversion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning_FlowScreen</target>
<target>lightning_RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets=”lightning_FlowScreen”>
<property name=”selectedCaseId” label=”SelectedCaseRecord” type=”string”/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

Summary

  1. The standard flow screen components currently do not offer a related record list or Lightning DataTable displaying a selectable list of records, but it allows you to create custom lightning web components and use them inside a screen flow to fulfill certain out-of-the-box requirements
  2. The above use case depicts one such scenario where we need to display related case records based on a few conditions in one of the screens inside a big screen flow and the user should be able to select a case record and move further with the flow along with the selected record’s ID
  3. The LWC component which we used is a Lightning DataTable (for desktop screen) and Lighting layout items (for mobile screen) to display selectable list of related case records and below are the generic steps in brief in order to use any relevant LWC inside a screen flow as per the requirement:
    1. Add lightning_flowscreen target in meta xml file in order to make your component available inside flow screen components
    2. Add targetConfigs for lightning flowscreen and use property in order to pass values between flow and LWC
    3. Make use of property attributes to customize input or output variables
    4. Include flowAttributeChangeEvent in LWC to communicate runtime changes between flow and LWC

Thought Leadership

We need to include in meta xml file to make use of input variable and pass the values from LWC to flows, and access them in flows: