Tutorials

SCREEN FLOW: SINGLE-SELECT DATA TABLE (LWC) ⚡ 

Leave a comment

Configuring Lightning Web Component (LWC)

The last post showed us how to set up a simple Lightning Aura Component from the Dev Console.  The same can be done using the LWC library to keep things as modern as possible. These are only accessible from an text editor or IDE.  The next example will be on the Opportunity object. As before, the text in red can be modified to fit your business use case.

# 1: HTML File: Update line 5 so list variable describes your object

<template>
    <div style="height: 400px;">
        <lightning-datatable
                key-field="id"
                data={OpportunityList} 
                columns={columns}
                max-row-selection="1"
                onrowselection={handleRowSelection}>
        </lightning-datatable>
    </div>   
 </template> </template>

# 2: JavaScript Controller: 

import { LightningElement, api } from 'lwc';
const cols = [
                {label : 'Name', fieldName : 'Name', type : 'text'},
                {label : 'Amount', fieldName : 'Amount', type : 'currency'},
                {label : 'Close Date', fieldName : 'CloseDate', type : 'date'},
                {label : 'Stage', fieldName : 'StageName', type : 'text'}
             ];
export default class OpptyDataTable_LWC extends LightningElement {
    @api OpportunityList= [];
    @api selectedOpptyRecord;
    columns = cols;
    handleRowSelection(event) {
        this.selectedOpptyRecord = event.detail.SelectedRows;
    }
}
# 3: XML File: 
  "extends": ["@salesforce/eslint-config-lwc/recommended"],
  "overrides": [
    {
      "files": ["*.test.js"],
      "rules": {
        "@lwc/lwc/no-unexpected-wire-adapter-usages": "off"
      }
    }
  ]
}
# 4: JSON File: 
<?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">
            <property name="OpportunityList" type="@salesforce/schema/Opportunity[]" role="inputOnly"/>
            <property name="selectedOpptyRecord" type="@salesforce/schema/Opportunity" role="outputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
The same configuration steps (as described for Aura tables) can be taken to configure this to display in Lightning Flows.

Leave a Reply