datatable – Lightning Web Component for Flow Screens

Created by Eric Smith – April 2020


About

datatableLwcFsc is a Flow Screen Component that allows you to configure and display a datatable on a flow screen. All you need to do is drag it onto the flow screen in the Flow Builder and give it a collection of records and a list of field names. The field label, type, and numeric formatting will default to what is defined in the object. Lookup fields are supported and will display the referenced record’s name field as a clickable link. The user can manually resize the columns, wrap or clip text, and sort the rows by most any column.


Additional Optional Functionality

Even though the component can be simple to use in its basic format, you have a tremendous amount of flexibility and capability when you take advantage of some of the numerous optional attributes that are available.

  • Rows can be selected and passed back to a collection variable in the flow
  • A collection of pre-selected rows can be passed into the component
  • The selection column can be multi-select (Checkboxes), single-select (Radio Buttons), or hidden
  • The results can be filtered by column values (Version 1.1)
  • Inline editing is supported with just the records with changed values passed back to the flow
  • The maximum number of rows to display can be set by the user
  • Optional attribute overrides are supported and can be specified by list, column # or by field name, including:
    • Cell Alignment
    • Inline Editable
    • Column Header Icon
    • Column Header Label
    • Initial Column Width
    • Custom Cell Attributes with nested values {name: {name:value}}
    • Custom Type Attributes with nested values {name: {name:value}}
    • Other Custom Column Attributes with nested values {name: {name:value}}

Object Support

The FlowScreens interface does not yet support dynamic object types, so it’s necessary to define, in the LWC .js-meta.xml file, the object type that you’re going to be passing in. The component is pre-configured to support the Account object. If you want to use a different standard or a custom object, see the instructions below on how to edit the component to create a version for a different object. I have included, in the install package, 11 different versions of the component for the following Standard Objects

  • Account
  • Asset
  • Campaign
  • Case
  • Contact
  • Contract
  • Lead
  • Opportunity
  • OpportunityLineItem
  • Product2
  • User

UPDATE: Summer ’20 now supports Dynamic SObject attributes – check it out here.

Restrictions

NOTE: There is currently a Salesforce bug that does not allow the component to be used with any object that contains geolocation fields.

NOTE: When editing percent fields you are restricted to whole numbers.


Reference

Input Attributes – Required

AttributeTypeNotes
Column FieldsComma Separated ListComma separated list of field API Names to display in the datatable.
Datatable Record CollectionSObject Collection VariableRecord Collection variable containing the records to display in the datatable.

Input Attributes – Optional

AttributeTypeNotes
Column AlignmentsComma Separated List*Comma separated list of ColID:Alignment Value (left,center,right)
Column EditsComma Separated List*‘All’ or a Comma separated list of ColID:True or False
Some data types cannot be edited in a datable (lookup, picklist, location, encrypted, rich text, long text area).
Column IconsComma Separated List*Comma separated list of ColID:Icon Identifier  
EXAMPLE: 1:standard:account (Display the first column with the Account icon)
See https://www.lightningdesignsystem.com/icons/ for a complete list of available Icons
Column LabelsComma Separated List*Comma separated list of ColID:Label 
(These are only needed if you want a label that is different from the field’s defined label)
Column WidthsComma Separated List*Comma separated list of ColID:Width (in pixels)
Special: Column CellAttributesSemicolon Separated List**Semicolon Separated List of ColID:{…};ColID:{…};…
EXAMPLE: FancyField__c:{class: ‘slds-theme_shade slds-theme_alert-texture’, iconName: {fieldName: IconValue__c}, iconPosition: left}
Special: Column Other AttributesSemicolon Separated List**Semicolon Separated List of ColID:{…};ColID:{…};…
EXAMPLE: Description:{wrapText: true, wrapTextMaxLines: 5}
Special: Column TypeAttributesSemicolon Separated List**Semicolon Separated List of ColID:{…};ColID:{…};…
EXAMPLE: DateField__c:{year:’numeric’, day:’2-digit’, month:’long’}; NumberField__c:{minimumFractionDigits:4}
Hide Checkbox Column?BooleanSet to True to hide the row selection column.
NOTE: The checkbox column will always display when inline editing is enabled.
Key FieldStringThis is normally the Id field, but you can specify a different field API name if all field values are unique.
Match Case on Column Filters?BooleanSet to True is you want to force an exact match on case for column filter values. Default is False.
Maximum Number of Records to DisplayNumberEnter a number here if you want to restrict how many rows will be displayed in the datatable.
The component is currently hardcoded for a maximum of 1000 rows.
Pre-Selected RowsSObject Collection VariableRecord Collection variable containing the records to show as pre-selected in the datatable when the screen first displays.
Single Row Selection (Radio Buttons)?BooleanWhen set to True, Radio Buttons will be displayed and only a single row can be selected.
The default (False) will display Checkboxes and allow multiple records to be selected.
Suppress Cancel/Save Buttons during Edit Mode?BooleanCancel/Save buttons will appear by default at the very bottom of the table once a field is edited.
When hiding these buttons, field updates will be applied as soon as the user Tabs out or selects a different field.

Output Attributes – Optional

AttributeTypeNotes
Output Edited RowsSObject Collection VariableRecord Collection variable to contain only the records that were edited in the datatable.
NOTE: To write these edits back to the Object, you will need to do a Record Update in the Flow.
Output Selected RowsSObject Collection VariableRecord Collection variable to contain only the records that were selected in the datatable
NOTE: These records may not contain any of the edited values.

Comma Separated List*

These optional attributes can be specified as a comma separated list of Column Identifier:Value pairs. The Column Identifiers can be either the column number or the field API name. Keep in mind that if you use column numbers instead of the field API name, you will have to update the identifiers if you insert, remove or change the order of the columns. Another option is to omit the column identifiers and just provide a comma separated list of values. If you choose this method, you must provide a value for every column (A,B,,D would be invalid) and you can’t use this method with attributes that already contain a ‘:’, such as Column Icons (standard:account).

These Column Widths attributes would all work the same for setting the initial column widths of the sample table at the top of this page.

  • Name:300, Phone:150, BillingCity:140, Type:120
  • 1:300, 2:150, 3:140, 4:120
  • Name:300, 2:150, BillingCity:140, 4:120
  • 300,150,140,120
Semicolon Separated List**

These optional attributes can be specified as a semicolon separated list of Column Identifier:Value pairs. The Column Identifiers can be either the column number or the field API name. Keep in mind that if you use column numbers instead of the field API name, you will have to update the identifiers if you insert, remove or change the order of the columns. Another option is to omit the column identifiers and just provide a semicolon separated list of values. If you choose this method, you must provide a value for every column.

The reason for these attributes is to give the user more control over how their datatable is formatted. I included predefined options for standard attributes like Label, Alignment, and Width. These additional options allow the user to manually add in other standard attributes like WrapText, CellAttributes like appending an icon to column data, and TypeAttributes to fine-tune how different data types (like dates) are displayed. See the Salesforce Datatable Documentation for details.


Example #1: Column Icons, Column Widths & Special Column TypeAttributes

Column Icons
1:standard:account, 2:utility:builder, 3:utility:date_input, 4:utility:date_time

Column Widths
200, 120, 200, 200

Special: Column TypeAttributes
2:{year: 2-digit, month: numeric, day: numeric}; 3:{year: numeric, month: long, day: 2-digit, weekday: long}; 4:{year: 2-digit, month: 2-digit, day: 2-digit, hour: 2-digit, minute: 2-digit, time-zone-name: short}


Example #2: Column Labels, Special Column CellAttributes & Special Column Other Attributes

Column Labels
Name:Account Name, dt_Text__c:Field Value Used as Attribute, FancyField__c:Icon Value from a Different Field, IconValue__c:Icon Value

Special: Column CellAttributes
dt_Text__c:{class: {fieldName: dt_Text__c}}; FancyField__c:{class: slds-theme_shade slds-theme_alert-texture, iconName: {fieldName: IconValue__c}, iconPosition: left}

Special: Column Other Attributes
3:{wrapText:true}


Example #3: Column Filtering (Opportunity Object)

Column Labels
Name, AccountId, Amount, CloseDate, StageName

Column Icons
1:standard:opportunity, 2:standard:account

Match Case on Column Filters?
{!$GlobalConstant.False}


Additional Resources

Read my 4-part Blog series for some ideas on how you can take advantage of datatables in your Flows. I write about how I used the original datatable component to do things like dynamic record presentation and selection, how to select and act on a collection of records, displaying formatted interactive tables and how to inline edit a group of records.

Part 1 – Use a Datatable to present a dynamic choice for record selection in a Flow.
Part 2 – Use a Datatable in a Flow to select and act on a collection of records.
Part 3 – Use a Datatable to display a formatted, interactive table in your Flow.
Part 4 – Use a Datatable to inline edit a group of records.


Installation

4/22/20 – Eric Smith 
v2.0 – NOTE: Summer ’20 pre-release orgs only – Unmanaged v2.0 (Developer Org)

4/15/20 – Eric Smith 
v1.1 – Added the ability to filter a datatable by individual columns, cleaned up some error handling.

Unmanaged v1.1 (Production/Developer)
Unmanaged v1.1 (Sandbox)


4/2/20 – Eric Smith 
v1.0 – Initial Release – Includes versions for Account, Asset, Campaign, Case, Contact, Contract, Lead, Opportunity, OpportunityLineItem, Product2, User

Unmanaged v1.0 (Production/Developer)
Unmanaged v1.0 (Sandbox)

Version History

The original datatableFSC component is a Lightning Aura Component that supports up to 10 columns. It can be found here.


Source Code

Source

How to Modify the Source Code to Support Different Objects

Modifying the source code to create unique versions of this component for different objects should only be necessary until the Summer ’20 release. But for now, follow the steps outlined below.

Lightning Web Components are not editable in the standard Developer Console. I recommend using Visual Studio Code (VS Code) with the Salesforce extensions to edit the source code. I also recommend that you deploy your changed versions in a Sandbox and use a Change Set to deploy them to Production.

To learn about VS Code and install it for your own use, complete this Trailhead.

You only need to update the Object name in 5 places in a single file (datatableLwcFsc_Object.js-meta.xml). Everything else stays the same.

Click Here for Detailed Instructions.