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
Log into a sandbox or developer org
Open the developer console
Select File
Select New
Select New Lightning Component
Add a name
Add a description
Visit the datatableFSC repository
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
Open datatableFSC.cmp
Select Raw
Select All and Copy
Return to the Developer Console
Paste the code into the Component
Hit Ctrl + S to Save
Create a Design File
Return to the repository
Open datatableFSC.design
Select Raw
Select All and Copy
Return to the Developer Console
Paste the code into the Design section
Hit Ctrl + S to Save
Create a Controller File
Return to the repository
Open datatableFSCController.js
Select Raw
Select All and Copy
Return to the Developer Console
Paste the code into the Design section
Hit Ctrl + S to Save
Create a Helper File
Return to the repository
Open datatableFSCHelper.js
Select Raw
Select All and Copy
Return to the Developer Console
Paste the code into the Design section
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
Open the component file
Find the mydata_standard1 and selectedRows_standard1 aura: attribute
Remove all the aura: attributes that start with mydata_ and selectedRows_ after mydata_standard1 and selectedRows_standard1
Go back to the mydata_standard1 attribute
Update type="Account[]" to your custom object.
For example: TimeSlot__c would be type="TimeSlot__c[]"
Go back to the selectedRows_standard1 attribute
Update type="Account[]" to your custom object.
For example: TimeSlot__c would be type="TimeSlot__c[]"
Hit Ctrl + S to Save
See example:
Modify Design
Open the design file
Go to the <design:component > line
Add a label. For example: <design:component label="Lightning DataTable - Time Slots" >
Find the mydata_standard1 design: attribute
Update the label to your custom object
For example: label="Collection - Time Slot"
Find the selectedRows_standard1 design: attribute
Update the label to your custom object
For example: label=" Output Selected Time Slot"
Delete all the extra mydata_ and selectedRows_ design: attributes
See example:
Modify Controller
Open the controller file
Remove all the lines that reference the attributes we previously deleted
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!