datatableV2 – Lightning Web Component for Flow Screens
Created by Eric Smith – May 2020
This Post was most recently updated on: 07/02/20
About
datatableV2 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 data being displayed can be filtered on a column by column basis. The user can manually resize the columns, wrap or clip text, and sort the rows by most any column.
Starting in Summer ’20 the Salesforce Object is specified at the time of configuration allowing just one version of this component to be used for all Salesforce Objects. I have also added support for user created Apex-Defined objects as well. See Flow and Process Builder List View with Batch Delete for an example.
Additional Optional Functionality
Even though the component can be very 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
- 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
- The datatable height and border can be customized
- 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
Summer ’20 now supports Dynamic SObject attributes at time of configuration.
User defined Apex-Defined Object variables are supported.
Supplemental Instructions for Apex-Defined Objects
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
| Attribute | Type | Notes |
|---|---|---|
| Datatable Object API Name | Salesforce Object Picklist | Specify the Salesforce Object to be displayed. Note: You must select an object even if you will be providing a User Defined object. |
| Column Fields | Comma Separated List | Comma separated list of field API Names to display in the datatable. |
| Datatable Record Collection ± | SObject Collection Variable | Record Collection variable containing the records to display in the datatable. |
| Datatable Record String (User Defined) ± | String | Serialized String of Apex-Defined object records |
| ± Only one or the other of these is required |
Input Attributes – Optional
| Attribute | Type | Notes |
|---|---|---|
| (User Defined) Display User Defined Object? | Boolean | Set to True if you are providing a Serialized String of Apex-Defined object records instead of a Datatable Record Collection |
| Column Alignments | Comma Separated List* | Comma separated list of ColID:Alignment Value (left,center,right) |
| Column Edits | Comma 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 Field Types (For User Defined ONLY) | Comma Separated List* | Comma separated list of ColID:Field Type (boolean, currency, date, datetime, number, email, id, location, percent, phone, time, url, text(default)). |
| Column Filters | Comma Separated List* | ‘All’ or a Comma separated list of ColID:True or False Some data types cannot be filtered in a datable (location, encrypted) |
| Column Icons | Comma 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 Labels | Comma 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 Scale Values (For User Defined ONLY) | Comma Separated List* | Comma separated list of ColID:Scale (The number of digits to display to the right of the decimal point in currency, number and percent fields (default = 0)) |
| Column Widths | Comma Separated List* | Comma separated list of ColID:Width (in pixels) |
| Special: Column CellAttributes | Semicolon 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 Attributes | Semicolon Separated List** | Semicolon Separated List of ColID:{…};ColID:{…};… EXAMPLE: Description:{wrapText: true, wrapTextMaxLines: 5} |
| Special: Column TypeAttributes | Semicolon Separated List** | Semicolon Separated List of ColID:{…};ColID:{…};… EXAMPLE: DateField__c:{year:’numeric’, day:’2-digit’, month:’long’}; NumberField__c:{minimumFractionDigits:4} |
| Configuration Mode? | Boolean | Default=False, Display the Field API Names, Labels and the Column Widths in a box below the table. This parameter is designed to be used by the Datatable Configuration Flow. |
| Hide Checkbox Column? | Boolean | Set to True to hide the row selection column. NOTE: The checkbox column will always display when inline editing is enabled. |
| Key Field | String | This 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? | Boolean | Set to True is you want to force an exact match on case for column filter values. Default is False. |
| Maximum Number of Records to Display | Number | Enter 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 Rows | SObject Collection Variable | Record Collection variable containing the records to show as pre-selected in the datatable when the screen first displays. |
| Pre-Selected Rows (User Defined) | String | Serialized String of Apex-Defined object records |
| Single Row Selection (Radio Buttons)? | Boolean | When 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? | Boolean | Cancel/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. |
| Table Border | Boolean | Display a border around the datatable (Default: True) |
| Table Height | String | CSS specification for the height of the datatable. If you leave this blank, the datatable will expand to display all records. (Examples: 30rem, 200px) The default value of “calc(50vh – 100px)” creates a table that is 50% of the available vertical height of the container less 100 pixels to allow for a header and footer. |
Output Attributes – Optional
| Attribute | Type | Notes |
|---|---|---|
| Output Edited Rows ± | SObject Collection Variable | Record 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 Edited Rows (User Defined) ± | String | Serialized String of Apex-Defined object records |
| ± Only one of these is provided based on the value of (User Defined) Display User Defined Object? | ||
| Output Selected Rows ±± | SObject Collection Variable | Record Collection variable to contain only the records that were selected in the datatable NOTE: These records may not contain any of the edited values. |
| Output Selected Rows (User Defined) ±± | String | Serialized String of Apex-Defined object records |
| ±± Only one of these is provided based on the value of (User Defined) Display User Defined Object? |
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.
How to use Apex-Defined Objects with the Datatable
New 07/02/20 – How to use both the Selected and the Edited records in a Datatable
Videos
Installation
NEW INSTALLATION METHOD:
Use the Deploy to Salesforce button found here – https://github.com/ericrsmith35/DatatableV2
7/1/20 – Eric Smith – datatableV2
v2.36 – Updates: Now displays the primary “Name” field as a Link (textWrap = true)
Added button in Config Mode to round off Column Width values
v2.35 – Updates: Extended Configuration Mode to handle Column Alignments, Labels, Widths, Allow Edit & Allow Filter
Added Configuration Mode buttons to select all columns for Edit and/or Filter
Selecting an attribute string now copies the contents into the system Clipboard
Version History
6/24/20 – Eric Smith – datatableV2
v2.34 – Bug Fix: Fixed issue with column widths resetting when filtering
Updates: Added Datatable Configuration Helper Flow
(Requires transferMetadata LWC @ https://unofficialsf.com/retrieve-and-deploy-metadata-with-flow-using-transfer-metadata-as-a-screen-component/)
6/19/20 – Eric Smith – datatableV2
v2.33 – Updates: Removed default value for Table Height
Bug Fix: Fixed issue with lookup fields being blank in the first record
6/9/20 – Eric Smith – datatableV2
v2.32 – Fixed error when editing multiple columns on the same row while Cancel/Save buttons were suppressed
Unmanaged v2.32 (Production/Developer)
Unmanaged v2.32 (Sandbox)
6/4/20 – Eric Smith – datatableV2
v2.31 – Initial release for Summer ’20 orgs
Unmanaged v2.31 (Production/Developer)
Unmanaged v2.31 (Sandbox)
Prior versions of the datatableLwcFsc can now be replaced by datatableV2 starting in Summer ’20 orgs
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)
The original datatableFSC component is a Lightning Aura Component that supports up to 10 columns. It can be found here.