How to configure a LWC for Screen flows

 Hi,

To include a custom Lightning Web Component in a Flow Screen and define its properties (input/output), we must configure the appropriate values in the meta file (componentName.js-meta.xml).

To make your component usable in a flow screen, add the lightning__FlowScreen target.

To add input fields to your component, add targetConfig properties.

To restrict a property to inputOnly or outputOnly, use the role attribute. 

For example, if a property is restricted to outputOnly, users can’t set its value from a Lightning record page. If you don’t specify the role attribute, the default value allows input and output.

This sample component has five flow screen input fields.   The startDate property is set to inputOnly.

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

  <apiVersion>61.0</apiVersion>

  <isExposed>true</isExposed>

  <masterLabel>Best Component Ever</masterLabel>

  <description>This is a demo component.</description>

  <targets>

    <target>lightning__FlowScreen</target>

  </targets>

  <targetConfigs>

    <targetConfig targets="lightning__FlowScreen">

      <property name="startDate" label="Start Date" type="Date" role="inputOnly" />

      <property name="account" label="Account Chosen" type="@salesforce/schema/Account" />

      <property name="annualRevenue" label="Annual Revenue" type="Integer" role="outputOnly" />

      <property name="name" label="Account Name" type="String" />

    </targetConfig>

  </targetConfigs>

</LightningComponentBundle>

Reference:

https://developer.salesforce.com/docs/platform/lwc/guide/use-config-for-flow-screens.html

https://developer.salesforce.com/docs/platform/lwc/guide/reference-configuration-tags.html