Build Lightning Web Component for use in Flow Screens

3 min readApr 30, 2020

This blog focuses on creating Lightning web components that can be used in flow. The example is a simple lightning datatable component which displays all the contacts on an Account by querying in the Flow Builder and passing it to the Lightning Web Component. This method can be followed to help create generic web component which can be used in flows with various use cases.

Pre requisites

Salesforce CLI
VS Code with Salesforce Extension Pack (if you have problems in opening VS Code in mac go to System Preferences > Security & Privacy > General and choose Open Anyway).
Create a SFDX project and preferably use scratch org for development.

Creating Lightning Web Component to be used in Flow

Adding the target lightning__FlowScreen to the LWC configuration files makes the component available for the Flow Screens in the Flow Builder

<targets>
    <target>lightning__FlowScreen</target>
</targets>

We will be using target configs to define properties which can be used to input/output values from the flow builder. This property will be declared in the javascript file of the web component with “@api” decorator. The configuration file looks as given below.

<?xml version=”1.0" encoding=”UTF-8"?><LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata"><apiVersion>49.0</apiVersion>
<isExposed>true</isExposed><targets>
<target>lightning__FlowScreen</target>
</targets><targetConfigs>
<targetConfig targets=”lightning__FlowScreen”><propertyType name=”PT” extends=”SObject” label=”Select a sObject” description=”Select a sObject”/>
<property name=”records” type=”{PT[]}” label=”Records” description=”Record List Variable”/></targetConfig>
</targetConfigs></LightningComponentBundle>

I have tried using the propertyType tag in this which is a Summer 20' feature and is available only in pre-release orgs at the moment. This helps to define <propertyType> which extends generic sObject type and this can be used as a type in the <property> tag (have used a collection of records here which can be used as a single record as well). Below screenshot shows the property type selection made while creating a screen element with LWC in the flow builder.

Adding the LWC component in Screen element

The html file contains nothing but the “lighning-datatable” tag to keep it simple

<template><lightning-datatable data={records} columns={fieldColumns} key-field="id"></lightning-datatable></template>

Sample JS file with the column data is hardcoded to three columns

import { LightningElement, api } from 'lwc';export default class SampleLWCFlow extends LightningElement {@api records = [];@api fieldColumns = [
{ label: 'Name', fieldName: 'Name' },
{ label: 'Title', fieldName: 'Title'},
{ label: 'Department', fieldName: 'Department' }
];}

Passing data to Lightning Web Component from flow’s “Get Records” element

Instead of using apex we are making use of the power of flow builder to query for the records and pass the list of records into the LWC Datatable’s property.

Add the “Get Records” element in the flow builder which retrieves all the Contact records belonging to a particular Account where the flow runs. The element is named as “Get_Contacts”.

Get Records Element to query Contacts

Bind the “Get_Contacts” on to the LWC datatable property which will help to pass the retrieved records to the component.