Enhance your Flows with Data Tables – Part 1

Lightning Flow Screen Components are a great way to add power to and improve the look of your Flows.  In this three-part series, I’ll show you how a single component, designed to display a list or table, can enhance your Flows.

Alex Edelstein’s unofficialsf.com website includes datatableFSC as one of many Flow Screen Components you can use for your own organization.

This component is derived from the datatable Lightning Base Component.  I recently enhanced Alex’s component to be more powerful and Admin friendly.

I will be showing you some examples about how the Datatable component:

  • Can be used in place of a Record Choice Set (Dynamic Record Choice) for selecting a record while displaying more than a single field
  • Can be used to select multiple records from an object then perform additional actions on them
  • Can be used to present your data in an interactive and visually enhanced format

Part 1: Selecting a Record

When I first built this flow, I used a Record Choice Set (Dynamic Record Choice) in my screen to present a list of records to make a selection from.

A common issue Admins run into with this type of input is that one is restricted to displaying just a single field from the record when presenting the selection.  Like many Admins, I created a new custom field in my object to combine the values of multiple other fields so I could show more information in my selection prompt.

Custom Formula Field for my Record Selection
Formula

This type of selection is awkward and you are not able to make the information line up from one record to the next.


Here’s what happens when I replace the Record Choice Selection with a Datatable Flow Screen Component.

See https://unofficialsf.com/datatable for complete information and instructions on this component.

My Flow looks up a collection of records to display in the table and passes that parameter to the component.

Note: Even though you are displaying a table for a single object, parameters are available for 8 standard or custom objects. This is to allow an Admin to easily use this component with no Lightning Component source code customization required.

sObject Collection Variable with records to display in the table

I define the structure of my table by providing field and formatting information for up to 10 columns.

Column Parameters – The first column can display an icon
Column Parameters – Field Name, Label & Type with Width & Alignment

Column Parameters – Only fieldName, label and type are required

When the user clicks Next, the component can pass a collection of the selected records back to the Flow.

Output Parameter – sObject Collection Variable with record(s) selected from the table

Now the user sees a formatted table with a checkbox available to make their selection.

Selecting a record with a datatable

The Flow then uses the values it needs from the selected record to complete its processing.


See the complete series on how you can use the datatable Flow Screen Component in your Lightning Flows.

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.



Advertisements

17 thoughts on “Enhance your Flows with Data Tables – Part 1

  1. This is seriously one of the most helpful posts I’ve ever seen. Brilliant solution for a challenge I’ve been thinking about for years. Thank you for sharing!

    Liked by 1 person

      1. I have the same question. It seems Mobile Flow does not support Record Choice Set.
        When I tested the same flow in my FSL Mobile App, the picklist does not return the correct values…

        Like

  2. Thank you for this amazing solution! I just used this in a flow so users can select the open cases they want to update and the table is perfect. Couldn’t have done it without this data table and awesome documentation.

    Like

  3. Eric Hi,
    This is an amazing feature!!!
    I can think of so many things I can do with it 🙂

    For some reason, I only get one column filled with data, even though I’ve added more than one column. The rest of the columns shows only the title.

    For testing, I’ve created a Get element that will display all of my Accounts. Afterward, I’ve created a Screen element with the ‘datatableFSC’ component and added the fields “captured” via the Get.

    Am I missing something?

    Thanks a lot,
    Gidi

    Like

    1. There could be 2 reasons your other columns are blank.
      1) The fields are not included in your SObject collection variable
      2) The Column Type setting doesn’t match the field type. Type options include text, boolean, currency, date, email, location, number, percent, phone, url

      Like

  4. Eric Hi,
    This problem has been solved. Thanks!
    Is there a way to store only one field in the Output, instead of using a Collection?
    I’m trying to ask the users to choose only one record from a list, and then use its ID and update another record.

    Best Regards,
    Gidi

    Like

  5. I plan on updating the component to support single record selection. It would still use a collection variable but it would display radio buttons instead of checkboxes. If you want to modify the component in the meantime to support that, you could update a new version of the datatableFSC.cmp file to add maxRowSelection=”1″ to the lightning:datatable parameters.

    Like

  6. Hi Eric – First – thank you for the great posts on this topic! I am having a challenge with the datatable component. I have it configured the same way you do for Accounts instead of Cases and when I try to test it, it just spins and never returns the records. Any ideas? I confirmed the component code is correct. Thanks!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s