Display Records in Lightning Data Table Using Salesforce Screen Flows

In Salesforce, we create flows to automate tasks and processes, and Lightning Web Components allow us to create custom components. In LWC, we create a data table using the lightning-datatable attribute, which can be embedded in the screen flows as a component.

In this Salesforce tutorial, we will learn how to display records in a Lightning data table using Salesforce screen flows.

Display Records in LWC Data Table Using Salesforce Screen Flows

In the example below, we will create an LWC component that displays a list of records fetched from the parameters defined in the screen flow.

This method of displaying records in the Lightning data table can be an alternative to fetching records via the Apex method.

Follow the steps below to create the LWC component. We will add properties that Flow builders can configure, such as the data source and column definitions.

1. Create the LWC component and enter the code below in the HTML template.

<template>
    <lightning-datatable
        key-field="Id"
        data={listAccounts}
        columns={columns}>
</lightning-datatable>
</template>

2. After this, enter the code below in the JS file of the LWC component. Here, we define the columns array, which will be used as table columns in the flow.

import { LightningElement, api } from 'lwc';

export default class FlowDatatable extends LightningElement {
    @api listAccounts; 
    columns = [
        { label: 'Id', fieldName: 'Id' },
        { label: 'Nmme', fieldName: 'Name' },
        { label : 'Industry', fieldName: 'Industry' },
        { label: 'Acccount Number', fieldName: 'AcccountNumber'},
        { label: 'Type', fieldName: 'Type' },
    ]
}

3. To make the LWC component accessible by the screen flow as a component, enter the code below in the meta.xml file inside the LightningComponentBundle tag.

The attribute lightning__FlowScreen will expose the LWC component to the flows.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property 
            name="listAccounts"
            label = "Account List"
            type = "@salesforce/schema/Account[]"
            role = 'inputonly'/>
        </targetConfig>
    </targetConfigs>

4. Now, deploy the LWC component to the Salesforce org. by right-clicking on the component name and selecting SFDX: Deploy This Source to Org.
   • Next, navigate to the Salesforce setup page and, using the quick find search, select ‘Flows‘.
   • In the Flows setup, click New flow, then in the next window, select the option Screen flow and click Create.

5. In the screen flow, add a Get record element that will fetch the data to display in the data table.
   • Enter the Label and API name for the Get record element, then select ‘Account’ in the Object field.
   • To apply filters on the fetched records, define the condition requirements. In this example, we have filtered account records with the Industry value as Technology.

6. In the section How many records to store select All records to display all fetched records; else, select All records, up to specified limit to restrict the number of displayed records.
   • After this, select Choose fields and let Salesforce do the rest, after this select the fields that we have defined in the columns array of the LWC data table.

7. Add a screen element to the flow and enter the label and API name for the screen. After this, navigate to the components section and drag and drop the data table component into the screen region.

8. To configure the flow component, enter the API name. To populate the columns in the data table, select the Account list resource as Accounts from get_Accounts.

As of now, the screen flow is completed with an embedded LWC data table. At last, save and activate the screen flow.

Deploy The Screen Flow To The Lightning Page

After activating the screen flow, we will deploy it on the Lightning page, where we can view the account records for the fields we have defined in the LWC components.

1. To deploy the screen flow, navigate to the Lightning page, then click the settings icon and select “Edit Page.”
   • In the Lightning App Builder, drag and drop the flow component onto the Lightning page, then select the screen flow that you have created.

2. After deploying the screen flow, click Save to apply the changes. On the lightning page, we can see the list of account records in the Screen flow.

This way, we can display records in Lightning data table using the Salesforce screen flows by following the above steps.

Conclusion

In this Salesforce tutorial, we have learned how to embed an LWC Lightning data table in the Salesforce screen flows. We created a custom LWC with a Lightning Datatable, set it up to display account records, and integrated it into a screen flow.

This is an easier way to show data without calling Apex code. After creating a flow and adding it to a Lightning page, we can see the list of accounts in a table.

You may also like to read:

• Decorators in Salesforce Lightning Web Component(LWC)
• Salesforce LWC Lightning Data Table With Search Bar
• Dynamic Filters for Salesforce LWC Lightning Datatable
• Display Icons in a Lightning Datatable in LWC

Abhijeet

Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.