• Chris

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

  8. 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

  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

  1. Unofficial Salesforce

  2. Unofficial Lightning Datatable component

  3. Unofficial Lightning Datatable documentation

  4. Official documentation on lightning:datatable

  5. Developer Console Basics trailhead