top of page
  • Writer's pictureChris

Use Lightning DataTable in Flow Builder

A data table is an excellent way to display a list of records to a user. Unfortunately, Salesforce Flow Builder does not have a built-in data table yet. Fortunately, the unofficial Salesforce site has a community built component that will give you the power of the Lightning DataTable within Flow Builder. You can find all the details about how to use this excellent component as-is by visiting the following page: Unofficial Lightning Datatable component.



This post will focus on how to modify the above component to work with one custom object only. The documentation on the unofficial Salesforce site allows you to add two custom objects in addition to Account, Asset, Case, Contact, Contract, and Opportunity. However, I removed support for those standard objects because not all users in my organization have access to those objects, which can cause the component not to render.


To do this, you will need to know how to use the developer console. If you have not previously used the developer console, the following trailhead is an excellent place to start: Developer Console Basics


Finally, this post will assume you are at least a certified Salesforce Administrator because it will not cover the basics of Salesforce.


Getting Started

  1. Log into a sandbox or developer org

  2. Open the developer console

  3. Select File

  4. Select New

  5. Select New Lightning Component

  6. Add a name

  7. Add a description

The repository contains an open-source version of the Unofficial Lightning Datatable component. This will be our starting point for creating our new component.


Create Component File

  1. Open datatableFSC.cmp

  2. Select Raw

  3. Select All and Copy

  4. Return to the Developer Console

  5. Paste the code into the Component

  6. Hit Ctrl + S to Save


Create a Design File

  1. Return to the repository

  2. Open datatableFSC.design

  3. Select Raw

  4. Select All and Copy

  5. Return to the Developer Console

  6. Paste the code into the Design section

  7. Hit Ctrl + S to Save


Create a Controller File

  1. Return to the repository

  2. Open datatableFSCController.js

  3. Select Raw

  4. Select All and Copy

  5. Return to the Developer Console

  6. Paste the code into the Design section

  7. Hit Ctrl + S to Save


Create a Helper File

  1. Return to the repository

  2. Open datatableFSCHelper.js

  3. Select Raw

  4. Select All and Copy

  5. Return to the Developer Console

  6. Paste the code into the Design section

  7. Hit Ctrl + S to Save


Great! You have now created the base component we will need to start our work. Next, we will remove support for the standard objects this datatable provides to make this a datatable focused only on our custom object. You are welcome to keep any you'd like.


Modify Component

  1. Open the component file

  2. Find the mydata_standard1 and selectedRows_standard1 aura: attribute

  3. Remove all the aura: attributes that start with mydata_ and selectedRows_ after mydata_standard1 and selectedRows_standard1

  4. Go back to the mydata_standard1 attribute

  5. Update type="Account[]" to your custom object.

  6. For example: TimeSlot__c would be type="TimeSlot__c[]"

  7. Go back to the selectedRows_standard1 attribute

  8. Update type="Account[]" to your custom object.

  9. For example: TimeSlot__c would be type="TimeSlot__c[]"

  10. Hit Ctrl + S to Save

  11. See example:

Modify Design

  1. Open the design file

  2. Go to the <design:component > line

  3. Add a label. For example: <design:component label="Lightning DataTable - Time Slots" >

  4. Find the mydata_standard1 design: attribute

  5. Update the label to your custom object

  6. For example: label="Collection - Time Slot"

  7. Find the selectedRows_standard1 design: attribute

  8. Update the label to your custom object

  9. For example: label=" Output Selected Time Slot"

  10. Delete all the extra mydata_ and selectedRows_ design: attributes

  11. See example:


Modify Controller

  1. Open the controller file

  2. Remove all the lines that reference the attributes we previously deleted

  3. See example:


Congratulations! You have now created your lightning:datatable that is laser-focused on just your custom object. You can no go to the flow builder and play with it. Unofficial Lightning Datatable documentation can provide more information on how to configure this component within Flow Builder.


I hope you found this information helpful!

 

Resources

8,783 views20 comments

Recent Posts

See All

20 Comments


Kialdren Apurado
Kialdren Apurado
Oct 06, 2023

Hi guys, How to use lookup field in a column?

Like

Anthony Foster
Anthony Foster
Oct 01, 2020

Check the field name is the API name. Also, fields names are case sensitive so the case must match the field API name exactly (eg ABC__c != abc__c)

Like

Maria del Lujan Galvano
Maria del Lujan Galvano
Oct 01, 2020

Hello

I have to do a list of some fields in a custom object, but the problem is that i have to modify a field type picklist and it does not work, the list does not display, Do you know how can i do that?

Thanks!!

Like

Anthony Foster
Anthony Foster
Aug 05, 2020

For anyone wondering, here is where you update the type attributes:


This was to update the display of currency fields to 4 decimals. I haven't figured out a way to set it to apply to specific fields (i.e. adding an attribute to dynamically apply to a single field used in the table).

Like

Anthony Foster
Anthony Foster
Jun 19, 2020

This is really great. Thanks for sharing. I'm using this datatable with an object that has records where some fields have a couple of paragraphs of text. Right now, the text is vertically aligned as centered in a row cell. Is there a way to set vertical alignment to the top of a cell? I couldn't find a cellattribute for vertical align and my attempts to override CSS classes didn't work.

Like
bottom of page