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

The 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 the base 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
- Can be used to display and inline edit a collection of records
Part 3: Displaying Tables in a Flow
How often have you had to use special formula fields or resort to building text output one line at a time in your flows to present a list of records?
In this post I’ll show you how to use the Lightning Datatable Flow Screen Component to turn this:
Into this:
I have an application where I wanted to use a Flow to display data from three separate objects on a single screen. In the original version of this Flow I created a text variable for each table and used a text template variable to insert each line into the table. Formatting was a challenge and alignment was impossible with this method.
Each table is created with a separate text variable.
The tables are built by appending a text template to the variable for each record.
The Text Template variable is used to append each of the tables fields together.
The final result includes all of the information, but it is not very easy to read.
In the new version of this Flow, I use 3 different Lightning Flow Screen Components (datatableFSC, horizontalRuleFSC, & navigationButtonFSC) from the unofficial.com website.
Other than a few Display Text sections, this screen is composed entirely of Lightning Flow Screen Components.
The horizontalRuleFSC components are used to add color and separation between my datatableFSC components and the navigationButtonFSC presents three custom buttons on the bottom of the screen. The selected button determines what part of the Flow executes next.
The datatables are configured by providing the parameter values for the input and output sObject Collection Variables and each column is configured with parameters for field name, label and type along with optional parameters for alignment and width.
The final result gives me a Flow that I can use to view and interact with my tables. I can sort any column in any table, I’ve added logic that allows me to select, then hide rows in any of the tables and I can select special processing to adjust the type of hierarchy used and then re-display the tables.
Here’s the Flow in action.
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.
Part 4 – Use a Datatable to inline edit a group of records.
Can this be downloaded into a Sandbox?
LikeLike
Yes it can. You can use this link: https://test.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002ZplP
LikeLike
Can this be used to display information that is not coming from a Salesforce object? What I want to do is display a list of addresses to choose from, but they are coming from different objects (from Account, Contact, and Case, as well as a custom object). I just want one list of addresses.
LikeLike
No, this component is designed to display values form the fields in a Salesforce object.
LikeLike
Dear Eric,
Is it possible to display the out-of-the-box Compact Layout for a lookup field displayed in the data table on hover?
Thanks,
Brian
LikeLike
It is probably possible but not something I have on the roadmap for this component.
LikeLike
This is a great component that has helped me perform actions way better than by using record choice sets, not to mention its great look and feel.
Would there be an easy way to implement a search bar on top of the table? I’m considering it for cases where the amount of records will be much bigger than what one would normally consider user friendly.
LikeLike
That sounds like a great future enhancement for this component. In the meantime, you could implement this in the flow by inputting a search value and doing a new Record Lookup to then pass a subset of records to the datatable component.
LikeLike
Hi Eric, I’m using the table component in a flow and have a formula field of type text that includes a URL.
I can get the field to display as a clickable link by setting the Type as URL but the text displayed is HTML and not the friendly display name set in the formula field. Here is the formula I’m using: hyperlink(“../s/profile/”&Id,FirstName&” “&LastName). Is there a way to update the component to show the URL friendly name (i.e. Firstname Lastname) instead of the HTML text – http://Jonny Utah?
LikeLiked by 1 person
Hi Eric, I’m using the table component in a flow and have a formula field of type text that includes a URL.
I can get the field to display as a clickable link by setting the Type as URL but the text displayed is HTML and not the friendly display name set in the formula field. Here is the formula I’m using: hyperlink(“../s/profile/”&Id,FirstName&” “&LastName). Is there a way to update the component to show the URL friendly name (i.e. Firstname Lastname) instead of the HTML text – http://Jonny Utah?
LikeLike
The standard datatable lightning component does not currently support that format. I will add that to my list of potential enhancements however.
LikeLike
Thanks Eric. Looking forward to seeing how this evolves. Already super impressed and thanks for making this available.
LikeLike
Hi Eric, is this feature still on the roadmap?
LikeLiked by 1 person
A RichText column may support this format.
LikeLike
Thanks for the response Eric. Unfortunately my use case is using the Content Version object (I want the URL to link to the File preview) and you can’t create Rich Text fields on Content Version!
LikeLike
Hi
I have a trouble.
My table shows a row by record but not the information. Every colums is blank.
I change the component and the design as is mention in the instructions. I need to use PricebookEntry, so I specified this in the .cmp and the number of rows is correct but is blank
Any idea?
LikeLike
The first thing to check is that you have included each of those fields when you are populating the SObject collection in the flow.
LikeLike
Thanks, it was missing a field.
I have another question, can I Have input fields ? I need to be able to edit some data and save it in the same object
LikeLike
The component does not currently support inline editing.
LikeLike
Hi Eric,
Thank you for this great component.
I have an object called Authority Limits. It maintains a list of users and the various approval limits they possess. My goal is for users while in the Case object, to be able to invoke a flow that allows them to search for uses with the appropriate authority limits, displayed in a datatable.
Once selected, I want the employee id from the Authority Limit record to be passed into a field in the current Case record called ApproverID. I have the datatable output to a record collection called varAuthorityLimitCol and the Single or Multi-Row Selection Set to 1. But I cannot figure out how to get the selected authority record id from the varAuthorityLimitCol to be able to “get it” and then update it. Is this possible?
LikeLike
Add a different AuthorityLimit object collection variable to the Output section (You must manually assign your output variables). Even though that collection variable will only contain a single record, you will need to add a Loop in the flow to access the object record to get the recordId.
LikeLike
Eric,
Thanks, this help. Your the best! Thanks for taking time to help me!
LikeLike
Hi Eric. I have been wresting with adapting the code for a custom object Xenogenix_Invoice__c. I have been able to prelicate the functionality for a standard object but I keep getting the following error which I think is related to some incorrect editing oF the code in the developer console. ?
Error message on save of the flow: An unexpected error occurred. Please include this ErrorId if you contact support: 163049448-559844 (1397861458)
ANY ideas how I should fix this? Regards Mark
LikeLike
Start by making sure this section of code is not commented out in the datatableFSCController.js file.
if(cmp.get(‘v.mydata_custom1’) && cmp.get(‘v.mydata_custom1’).length > 0){
cmp.set(‘v.mydata’, cmp.get(‘v.mydata_custom1’));
cmp.set(‘v.obj’, ‘custom1’);
cmp.set(‘v.preSelection’, cmp.get(‘v.selectedRows_custom1’));
}
if(cmp.get(‘v.mydata_custom2’) && cmp.get(‘v.mydata_custom2’).length > 0){
cmp.set(‘v.mydata’, cmp.get(‘v.mydata_custom2’));
cmp.set(‘v.obj’, ‘custom2’);
cmp.set(‘v.preSelection’, cmp.get(‘v.selectedRows_custom2’));
}
Also, make sure you have system permissions to access each of the standard and custom objects listed in the code.
LikeLike
I received a similar error code and eventually realized it was because the input collection variable was auto generated, not a manually assigned collection variable. Once I recreated the input collection as a manually assigned collection and updated the datatable input section, no more error codes!
LikeLike
You’ll need to you use a custom collection variable as the input and output. I was getting the same error when using object collection variables created automatically by the flow (feature in Winter 20).
LikeLike
Hi Eric, is it possible to use formulas that reference related field values in the component or do I need to create object fields to use? My use case is that I want to show Owner.name instead of OwnerId without having to create formula fields on my object.
LikeLike
You will need to create a formula field on your object in order to do that.
LikeLike
Hi Eric. Big fan of this component…been using it for a while now. Just came across and issue with date fields (that I havent experienced and or noticed before). When I display a date filed as type ‘text’ the date is correct, however, if I display as type ‘date’ the date is shown as one day in the past. Any idea whats going on here?
LikeLike
To display a date field in you own local time zone, use date-local for the column type.
LikeLike
Hi Eric,
Love the component. Is it possible to make picklist fields editable and display the picklist choices?
LikeLike
Sorry Mark, that is currently not supported.
LikeLike
Hi Eric, I’m getting strange behavior for the datatable component between Winter 20 and Spring 20. When I run the datatable component in Spring 20 using flow debug, the screen shows my fields and collection of opportunities. When running debug in Winter 20, only a line shows. No error, and the flow can continue, but non of the fields visible in Spring 20 are visible in the Winter 20 sandbox. Any idea what might be causing this issue?
LikeLike
Are you manually defining your output variables?
LikeLike
Yes, I’ve enabled manual variable output. If there are no records being selected, do I need to still assign an output collection variable?
LikeLike
The component stores edited records in a different output collection variable than the output collection variable for the selected records.
NOTE: The output attribute for selected records (Output Selected Accounts) is only used for identifying selected records in the datatable and may not contain the updated values. When you are combining editing and selecting in a single table, use the “Output Selected Accounts” attribute to get the list of selected records and their IDs and use the “Collection – Accounts” attribute to access the edited records.
LikeLike
Great walkthrough and such a cool component! I had a few questions.
1. Is it possible to reference relationship fields in the table? Contact.Account.Name for instance (maybe a bad example as I know just using the AccountId will create a clickable link)
2. Can you help me understand how I could populate this table via an Invocable Apex Method?
Thanks again!
Chris
LikeLike
1. My new LWC version of the component will now display clickable names for lookup fields. https://unofficialsf.com/datatable-lightning-web-component-for-flow-screens/
2. Could you clarify what you are looking for from the Invocable Apex Method? Starting in Summer ’20, the component will allow you to specify the SObject at the time you add it to a Flow Screen.
LikeLike
Hi Eric,
First of all, congratulations, the component is very cool, already implemented and it worked very well!
Some questions, for exemplo, If I would want to formating a date like dd/MM/yyyy or dd/MM/yyyy HH:mm in the table, we have some way configurable?
Another question is, in a formula field It’s possible to show a image, If I would want show this image in the table, we have some way configurable too?
Thank you so much!
LikeLike
I do support formatting for dates in my new LWC version of the datatable. Images are not yet supported, but I do plan on looking into supporting that feature.
https://unofficialsf.com/datatable-lightning-web-component-for-flow-screens/
LikeLike
Hi Eric,
First of all, the component is amazing, I am using it in my sandbox and it is very useful. I just want to understand how can I display the rich text field in the way the data was stored. Do I need to mention the type?
LikeLike
The component does not yet support rich text fields. I hope to add that in the future.
LikeLike
I love this tool! I am looking for a way to display a link to the primary record. I created a formula field and the tool displays the HTML rather than the link. I tried adding a type ‘url’ but had no luck. I must be missing something if anyone has made this work please share,
LikeLike
Now that I have support for links to lookup fields, I will be adding support for links for the primary record. Stay Tuned.
LikeLiked by 1 person
Great news! Any timing on this add? Or any workaround to display a formula field? Thanks so much!
LikeLike
Hi,
Is it possible to make the record name clickable? Or adding a clickable hyperlink text formula field to the table?
LikeLike
No workaround at this time.
LikeLike
The current version (3.0.10) fully supports links on the Name field and Formula fields with hyperlinks.
https://unofficialsf.com/datatable-lightning-web-component-for-flow-screens-2/
LikeLike
Hi Eric,
I watched your last video on https://unofficialsf.com/datatablev2-lightning-web-component-for-flow-screens/ where you showed Custom User Defined Objects.
The rows with active flows are highlighted with .slds-theme_warning. How did you do this? I thought with “Special: Column CellAttributes” only columns can be highlighted.
I want to do the same for a collection with Account SObjects, where Accounts with the field Active__c = true should be highlighted.
Best regards
LikeLike
I did that by defining the Column CellAttribute for each column in the table. This was done with a formula field (fColumnCellAttributes) as follows:
“Label:{class: {fieldName: RowShadeValue}};” &
“ProcessType:{class: {fieldName: RowShadeValue}, iconName: {fieldName: FlowTypeIcon}, iconPosition: left};” &
“Status:{class: {fieldName: RowShadeValue}, iconName: {fieldName: FlowStatusIcon}, iconPosition: left};” &
“VersionNumber:{class: {fieldName: RowShadeValue}};” &
“Description:{class: {fieldName: RowShadeValue}};” &
“LastModifiedBy:{class: {fieldName: RowShadeValue}};” &
“LastModifiedDate:{class: {fieldName: RowShadeValue}};” &
“WorkflowObject:{class: {fieldName: RowShadeValue}};” &
“TriggerType:{class: {fieldName: RowShadeValue}};” &
“IsTemplate:{class: {fieldName: RowShadeValue}}”
RowShadeValue is one of the fields in my custom Apex Class. I set the value of the field in a custom Apex Action that the flow runs before displaying the datatable.
You can find the complete source code here: https://github.com/ericrsmith35/Flow-PB-List-View-with-Batch-Delete
LikeLike
Hi, Eric,
This is so cool. Thanks. Already using in a Flow and the feedback has been very positive. Question, tho, and it’s probably elementary. Can I now embed a flow with 3 different Datatables, and have them interact with each other, such that clicking next on one, then displays another table below it?
Does that make sense?
Thanks again for building and sharing this!
Chris
LikeLike
You can use Conditional Visibility to to display the next datatable if you are selecting records. The “Output Number of Selected Records” output attribute can be used for Conditional Visibility for the next component.
LikeLike
Hi Eric, when I use Wrap text mode in object name field and long text area field, I think wrap function is not work as I expected. The text will hide the value next to object name field and long text area field. Do you have any idea about this?
Thanks in advance.
LikeLike
This will be fixed in the next release. I’ll let you knwo when it’s ready.
LikeLike
Hi Eric, thanks for you keeping update this component, I saw there’s Version 3.0.10 release for this component that you mentioned in other post, does this issue fixed in Version 3.0.10? Thanks.
LikeLike
Wayne, that bug has been addressed after the release of 3.0.10 and will be part of the next release.
LikeLike
Wayne, I have released Version 3.1.1 which corrects this issue.
LikeLike
Hi Eric, I use Apex-Defined record as import data in datatable, and my edit on the edit field did not save
, after I click pencil icon and edit value, the cell become yellow once I click save button the value in the datatable change back to old value didn’t reflect my change, I assign var to store Output Edited Rows (User Defined), and print it in the next screen component, and I it’s null. Do you know what I missed? Thanks in advance.
LikeLike
Did you assign a Type value to each of the columns?
LikeLike
Hi Eric, yeah, for Column Types, I’ve set like this 1:text, 2:currency, 3:percent, 4:number, 5:percent, and all fields value can’t change what I entered after I click save button.
LikeLike
Hi Eric, apart from my previous issue(edit output row is [], it’s null), I have new issue about using apex defined record in this datatable, for user with Locale=English (United Kingdom) and Currency = USD – U.S. Dollar, the currency type field in the datatable are with extra prefix like below format:
US$0
US$1.71
US$1.71
US$2.29
And user in other Locale is quite normal:
$0
$1.71
$1.71
$2.29
The column type is currency. Do you have any idea?
LikeLike
I think that is standard Salesforce behavior. You could try to override the default formatting with a TypeAttribute for that column.
LikeLike
Hi Eric, thanks for reply, Can you kindly provide an example of TypeAttribute? Since I put below into Special TypeAttributes, but still with extra prefix. I can’t figure out how can I remove that extra prefix. Thanks in advance.
field2:{ currencyCode: ‘USD’ }
LikeLike
See if this works for you:
field2:{ currencyCode: ‘USD’ , currencyDisplayAs: ‘symbol’}
LikeLike
Hi Eric, I’ve tried your example and seems not work even for that specific local user but all user will not see data in datatable, if I add your example value to Special TypeAttributes, the whole field2 is gone… still can’t figure out how to solve this.
LikeLike
Is it possible to create a custom formula field that will format the data the way you need it to be displayed?
LikeLike
Try again without the quotes and see if that works.
field2:{ currencyCode: USD , currencyDisplayAs: symbol}
LikeLike
Hi Eric, this table is using apex defined option as data source, If I understand you correctly, creating new formula field on an SFDC object is not helpful.
LikeLike
Hi Eric, another question, I hope its not stupid question, I saw there’s “USF Flow Screen Component – Datatable” been add to steps to use the latest datatable, but I can’t see the difference when I not assign this permission set yo user, everything still work as-is. Do you know what’s the reason for this new permission set?
LikeLike
A couple of releases ago, Salesforce required that non-admin users had to be assigned specific permissions to run any @AuraEnabled Apex classes. The Permission Set granted that access to the two Apex classes that are part of the datatable component.
LikeLike
Hi – how do we get on the alert list for the text wrapping bug? I’m also running into this one?
LikeLike
I’ll be doing a post on unofficialsf.com when I release the next update. You can subscribe by entering your email on this page: https://unofficialsf.com/copy-to-clipboard-button/
LikeLike
Hi Eric, amazing tool!
I had taken the source code to create a component specific to Product Options and was able to display Product Name, Unit Price and a Custom Quantity Field.
I’ve decided to switch to the latest version of the Datatable and just select Product Option and use some of the wizard style features. Now, after I select the fields I require (Product Name, Unit Price and a Custom Quantity Field) the value for Unit Price does not pull through as it did in my other component. Any ideas on why that might be happening? Could it have something to do with a multi-currency org or perhaps the field type or attributes?
Cheers
LikeLike
Does the Unit Price column show up as blank?
LikeLike
Hi Eric, yes, just blank/null
LikeLike
Could it be a permissions issue? If you want to DM me a temporary login, I can take a look.
LikeLiked by 1 person
Hello, Can anyone help me figure out a way to NOT convert a currency field to the user’s default?
LikeLike
I will be making the conversion optional in the next release.
LikeLike
Hi Eric, great component – total game changer for us. One thing I’m struggling with – which seems so simple that I must just be missing something… can I set a default sort order on one of the columns in the data table? Ideally when the data table is first displayed it should be sorted from high to low on a number column – is this possible? Thanks
LikeLike
You can set the default sort order by sorting the record collection before you pass it to the datatable component.
LikeLike
Of course! Thank you
LikeLike
Hi Eric,
I have recently discovered this component and I am in awe – thank you so much!
I have a question – is it possible to conditionally format cells in a column? I am looking to format background to a red shade for blank fields and green for fields with a value in them. I hope you can help.
Thanks
LikeLike
Yes it is possible when you use Column CellAttributes. See Example #2 here: https://unofficialsf.com/datatable-lightning-web-component-for-flow-screens-2/#Advanced
LikeLike
Hi Eric – thanks for getting back to me – I have been able to format the cells as per example #2 – but only the same way – for example, I managed to get the cell to format to theme referenced in the cell – e.g. slds-format_error.
How can I write the attribute so that the column cells are formatted depending on being blank? As in if blank show slds-format_error if not blank show slds-format_success?
LikeLike
You could create a custom formula field that returns one value for the theme if the field isn’t blank and a different value if it is and then use that field in your attribute value.
LikeLike
I have tried doing this – but it only works when the field is included as a column for the table – is there any way to work around that?
LikeLike
The field only needs to be part of the object record. It does not have to be a column in the datatable.
LikeLike
Hi Eric
I have tried doing it this way and it is not working for me.
I have used the below configuration for the special cell attribute – the Response__c field is the column to be formatted and the Class__c field is the formula field that determines the slds-theme. When the Class__c column is in included in the table, the formatting works but when it is not included it does not work.
Response__c:{class: {fieldName: Class__c}}
I hope you can help 🙂
LikeLike
In order to use ‘fieldName’ as part of a Cell Attribute, the referenced field must also be included in the datatable. See the Working with Column Properties section here: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
LikeLike
I will try to see if I can reproduce this behavior.
LikeLike
Thank you – please let me know how it goes – for now, I have included the formula field as a column and made it as narrow as I could.
LikeLike
Hi Eric,
Today, an issue has started appearing suddenly in my sandbox – I noticed it whilst working with the data-table component but I think it maybe issue with the flow actions base pack.
Whenever I try to transition to the next screen, I get the below error:
The Lightning Component c:datatable generated invalid output for field wizSObject. Contact your administrator with these details: Flow encountered an error when processing and converting between data types. Please check the flow and ensure all data types are matched correctly.
I am also using the quick choice component – I use the output of what the user clicked on in a decision element – I noticed the output variables from the component such as the .value one does not show as string anymore – it now shows as the >_ symbol. It also generates the below error.
The Lightning Component c:fsc_quickChoiceFSC generated invalid output for field value. Contact your administrator with these details: Flow encountered an error when processing and converting between data types. Please check the flow and ensure all data types are matched correctly.
Do you know what could be causing this?
LikeLike
I am having a similar issue with datatables in my sandbox: When I try to configure the columns i get the following error: The Lightning Component c:fsc_quickChoiceFSC generated invalid output for field value. Contact your administrator with these details: Flow encountered an error when processing and converting between data types. Please check the flow and ensure all data types are matched correctly.
LikeLike
One of my users is getting this error in production all of a sudden.
LikeLike
Have any new component versions been installed?
LikeLike
Make sure the most recent version of the Datatable Column Configuration Wizard flow is active.
LikeLike