Datatable Flow Screen Component

For the latest on the Datatable component, please go here: Datatable – Lightning Web Component for Flow Screens – UnofficialSF

Documentation

This is the base documentation for the Datatable component.

The Datatable Flow Screen Component is derived from the datatable lightning base component.

The rows of a datatable are populated by passing in a collection of SObjects from upstream in the Flow. The set of selected rows is available as an output for this component and can be used downstream in the Flow.


Object Support

The FlowScreens interface does not yet support dynamic object types, so it’s necessary to define, in the cmp and design files, the object type that you’re going to be passing in. The component is pre-configured to support the Account, Asset, Case, Contact, Contract, and Opportunity objects. If you are using custom objects, be sure to uncomment the appropriate lines in the controller file. For more information, see the Add Custom Object Support section below.

Input Parameters

API Name – Unique name for the component in the flow

Row Data

Pass in row data by putting the variable name in only 1 of these available object collection parameters
Collection – Accounts
Collection – Assets
Collection – Cases
Collection – Contacts
Collection – Contracts
Collection – Opportunities

Column Data

Column01_align – [left, center, right] (only required if you want to override the default alignment for the field type)
Column01_editable – Set this to True for columns you want enable for inline editing
Column01_fieldName – API Name of the field to display in the column
Column01_iconName – The Lightning Design System name of the icon – (optional, only available for the first column) [Example: standard:case]
Column01_label – The text to be displayed in the column header
Column01_type – This needs to match the field type to display properly [boolean, currency, date, date-local, email, location, number, percent, phone, text, url]
Column01_width – You can preset the width of the column from 50 to 1000 px – (optional)

Column02 through Column10 – Additional columns are optional, but if they are specified, _fieldName, _label & _type are required.

Selection

Key Field – The default field is Id, you can set this to a different field containing unique values
Show or Hide Checkbox Columnshow(default) or hide
Show Save and Cancel Buttons? – When you have editable columns you can choose to show(default) or hide the Save and Cancel buttons when editing
Single or Multi-Row Selection – Set to 1 for Single Row selection (Radio Buttons), set to any other number to limit the number of selections, leave blank for full multi-select. Note: A Single Row selection will return an SObject Collection with a single record in it.

Output Selected <objectname> – When you provide a value for this attribute in the Input section, it references an SObject collection variable to pre-select the records in the collection when first displaying the table

Output Parameters

Records selected or edited in the datatable are available for use downstream in the Flow. They will be mappable into any input that takes a Collection of the same type. To work with selected or edited records in your Flow after the screen with the datatable, you must populate attibutes in the Output section. The output attribute for selected records (Output Selected <object>) is only used for identifying selected records in the datatable and may not contain the edited values. When you are combining editing and selecting in a single table, use the “Output Selected <object>” attribute to get the list of selected records and their IDs and use the “Collection – <object>” attribute to access the edited records.

In order to expose these individual output attributes, check the ” Manually assign variables (advanced) ” checkbox below the Set Component Visibility section.

Enter your variables in the parameters for the same object you used to pass records into the component.

Assign the edited values to an SObject variable (Use this variable in an Update Records element to save the changes back to your object)
Collection – Accounts
Collection – Assets
Collection – Cases
Collection – Contacts
Collection – Contracts
Collection – Opportunities


Assign the selected records to an SObject variable (Use this variable in a Loop element to step through each selected record)
Output Selected Accounts
Output Selected Assets
Output Selected Cases
Output Selected Contacts
Output Selected Contracts
Output Selected Opportunities

NOTE: If the running user does not have Read access to all of the referenced objects in the component, even if it is any of the ones you are not currently displaying, the component will fail at runtime. If this is the case, you will need to update the source code to change the referenced object to one they do have access to. See below for info on customizing this component.

More details on how to use this component are covered here:

Enhance your Flows with Data Tables – Part 1
Use a Datatable to present a dynamic choice for record selection in a Flow

Enhance your Flows with Data Tables – Part 2
Use a Datatable in a Flow to select and act on a collection of records

Enhance your Flows with Data Tables – Part 3
Use a Datatable to display a formatted, interactive table in your Flow

Enhance your Flows with Data Tables – Part 4
Use a Datatable to inline edit a group of records

Lightning Datatable Customization for Admins (1/20/2020)
Chris Van Der Merwe has written a nice post on how he customized this component to handle a single custom object.

Adding Custom Object Support

datatableFSC.cmp file (Lines 40-64)

datatableFSC.design file (Lines 3-27)

datatableFSCController.js file (Lines 84-93 and 131-136)