How to Get Records From Flow To Lightning Web Component

 

Hello Guys, Today in this post we will learn How to get Records From lightning Flow to Lightning Web Component. We all know to fetch data using apex but today we are going to avoid apex class and will fetch data from flow based on AccountId and display records in Lightning Datatable. we will parse AccountId and get contact records based on AccountId.

To Achieve this, we need to create a Lightning Flow.

Let's go to practical.

Important : Before Creating a Flow, we need to create a Lightning Web Component.

Step 1 : fetchRecordsFromFlow.Html

<template>
<lightning-card>
  
  <!--Lightning Datatable Start-->
    <lightning-datatable data={records} 
        columns={fieldColumns} 
        key-field="id"></lightning-datatable>
		
		</lightning-card>
<!--Lightning Datatable End-->
</template>

Step 2 : fetchRecordsFromFlow.Js

import { api, LightningElement } from 'lwc';

export default class FetchRecordsFromFlow extends LightningElement {
    @api records = [];
    @api fieldColumns = [
    { label: 'FirstName', fieldName: 'FirstName' },
    { label: 'LastName', fieldName: 'LastName'},
    { label: 'Email', fieldName: 'Email' }
    ];
       

}

Step 3 : fetchRecordsFromFlow.xml

<?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>
</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='Select Record List Variable'/>
</targetConfig>
</targetConfigs>

</LightningComponentBundle>

Important : Don't forget to Implement lightning__FlowScreen otherwise your component will not be show on Flow Screen.

After Creating your lightning Web Component Successfully Now it's time to go to flow.

Step 4 : How to Create Lightning Flow In Salesforce.

 Follow Below Steps

1.) Search Flow in Quick  Find Box   2.)  Select Flows   3.) Click New Flow

 

4.)  Select Screen Flow  

5.) Click Next.

6.) Select Freeform And Now you have reached on flow screen.

7.) Here Drag and Drop Get Records Element on Canvas and give label and Select Object In  Get Records of This Object Section. In this Example We are fetching records of Contact based on AccountId and Filter In Filter Contact Records Section.
In Field,  Select AccountId Operators Equal And  Value {1.}

1.) For Value Select New Resource => Resource Type Variable => ApiName recordId => Data Type Text => And Check Available For Input Checkbox And Done.

Now your Screen Should be look like this.

8.) Drag And Drop Screen On Canvas and Select your Lightning Web Component Name Into Search Box and Drag And Drop your Lwc on Canvas Like Below.

9.) In Select a SObject Field, Select Contact And In Records Field Select Your Get Records Element Name then Done and Save As And Active.

10.) Finally, We have Created Screen Flow. Now Let's have a look of complete Flow will look like this.

Important :  don't forget to Active it.

Step 5 : Add Your Flow to Account Detail Page

Go to your Account Detail Page and then Follow Below.

1.)

2.) 1 . Drag Flow 2.  Drop it on Canvas 3. Select Your Flow Name 4. Save it And Back your page. 

 

Output : 

Related Resources :

Learn About Flow

If You have any doubt Or suggestion related this post then please comment us and share your opinion with us. We respect your opinion .

I hope you Liked it.