How to pass data from screen flow to lwc in salesforce?

Hello Trailblazers,

In this post we're going to learn, how we can pass data from screen flow to lwc component in salesforce. Let's begin by creating our LWC component!

LWC: updateRecord

We'll create a very simple lwc where we can just pass the recordId and objectName as a parameter and it'll render the whole record for us using lightning-record-form so that we can easily update record. Let's have a look at the code snippets now:

updateRecord.html

<template>
    <lightning-record-form object-api-name={objectName} record-id={recordId} layout-type="Full" mode="edit">
    </lightning-record-form>
</template>

As you can see above, we're rendering a record form based on the objectName and recordId we've stored in the javascript variables. The layout type is full and the form will open in edit mode by default.

updateRecord.js

import { api, LightningElement } from 'lwc';

export default class UpdateRecord extends LightningElement {
    @api recordId = "";
    @api objectName = "";
}

This is even more simpler than html, we just have two variables: recordId and objectName which we'll populate from our flow so that the component can render the record form for us. We have added @api decorator in order to make these variables publically available and accessible from flow.

updateRecord.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="recordId" type="String" label="Id of the Record"></property>
            <property name="objectName" type="String" label="Name of the object"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

In the above configuration, we've added the target as: lightning__FlowScreen as we're going to embed this component in a screen flow and under that target, we've mentioned two properties of type String: recordId and objectName. Note that the name of the property is exactly the same as our variable name in JavaScript. As we assign values to these properties from flow, it'll automatically populate our js variables and our component will render the record form. While configuring the flow, we'll see fields with labels assigned to these properties in the component settings.

Now, let's create our flow!

Screen Flow: Update Opportunities

Let's create a screen flow using which we can update opportunities related to an account (yes you can do it via related list :) however, our main goal here is to learn how to pass information from flow to lwc). I am going to name this flow as Update Opportunities and this is how it looks like:

Select Opportunity

In our Select Opportunity screen, we've used radio buttons to show different opportunities related to the current account record:

The user will choose one of these options and move to the next screen, where we'll open our updateRecord LWC component with the selected opportunity record. I've used a record choice set to show opportunity records related to the current account as choices, as shown below:

I am sharing the opportunity record choice set below for reference:

Notice that I've created a new flow variable AccountId using which I am querying my opportunity records related to the current account record. While embedding this flow into the record page, we'll set this AccountId variable with the current account's record id.

As you can see above, we've set the Choice Label with Name field of opportunity record and Choice Value as Id field of opportunity record. I am also sharing the AccountId flow variable below for reference:

It's Available for input as we're going to populate this variable from our lightning record page for account. Now, let's move on to the Update Opportunity screen.

Update Opportunity

Notice the highlighted sections above, on the left, you can see our updateRecord lwc component which is available under Custom section. I've embedded the same component in the screen which you can see in the middle and on the right, we've set the properties of our lwc component. Notice that the labels we provided to those properties are visible here: Id of the Record and Name of the object. In the id, I've passed the Opportunity Record Set variable which will automatically share the Id value of our selected record and in the name I've passed the object name as Opportunity.

As we open the Advanced section on the right side, we need to select the Refresh inputs to incorporate changes elsewhere in the flow option as given below:

This is important because: Let's say the user chose the first opportunity record out of the radio buttons on the 1st screen and moved ahead to the 2nd screen. Now, user decides to go back and choose the second opportunity record instead of the first one. So, in this case, the inputs provided to our component should refresh automatically so that the lwc component displays the updated form with second opportunity record based on the updated record id passed to the component.

Make sure to activate the flow before we proceed ahead.

Add Screen Flow to Record Page

Now, we're almost done with our task, let's embed our flow to the Account's Lightning Record Page and see it in action!

1. Go to any account record and click on Edit Page from the gear menu as shown below:

2. On the page builder, we'll search for flow component from the left search bar and embed it into our lightning page as shown below:

As you click on the embedded flow component, you'll have configurations on the right hand side where you can select the flow Update Opportunities. Note that I've selected Pass record ID into this variable checkbox for the AccountId variable. This will automatically pass the current account's record id to the flow.

Click on Save button and Activate the page (if required) as shown below:

Click on Activate button. Assign the current page as org default for now:

Click Next button

Click on Save button and that's all!

Demo

This is how our flow looks like on an account record's detail page:

As you select an opportunity and click Next you'll see our lwc component with the selected opportunity record in edit mode as shown below:

We have the Save and Cancel button coming from the record form using which you can save your changes. You can click on the Finish button once you're done and it'll restart the flow. 

Note: After selecting an opportunity from the first screen and clicking Next, you can also click Previous button and select a different opportunity to verify, the form should update on the second screen automatically with the new opportunity record.

That's all for this tutorial. I hope you liked it. Let me know your feedback in the comments down below.

Happy Trailblazing!!