Visual Workflow using Lightning Data Table

In my previous post I reviewed how to build lightning components to be used with flow screens. I covered building a component to display a table of data using lightning:datatable component and a way to edit a record using force:recordEdit. Check out the previous post for details on how those components were built.

In this post we will cover how to utilize what was built in a visual workflow.

Overall Flow Structure

The general flow structure is the following:

  • Prompt user to enter last name of the person they want to add from a flow screen.
  • Using the last name input field from the first screen perform a fast lookup against the Lead object and retrieve any record that contains the search term in the Lead Last Name field.
  • If matches are found loop through the sObject collection variable and build an array of comma separated data to passed into the FlowDataTableCmp which will parse it into data table to be presented as search results in the next screen element.
    • If user selects a matching lead record from the data table the next element will be a screen that contains the FlowRecordEditCmp which will take the selected lead record’s Id from the previous screen to be used with the force:recordEditforce:recordEdit component.
  • If search results are empty or if the user decides not to accept any of the search results, the next screen will be a regular flow screen with fields for the user to create a new lead record instead.
    • The input fields from this screen will be used in a Record Create element to insert the new lead.

Preparing the data to passed to the lightning component

In the Fast Lookup, we are searching for any lead records where LastName contains the last name entered in the first screen where we prompt the user to enter a search value. If any records exists we store in the LeadRecs sObject collection variable.

If there are any matching results, the flow continues to the loop element where we build the array of comma separated string values that will consists of the lead record data. Each index of the DataArr text collection variable represents a lead record.

The fieldDataForm variable is a formula variable that constructs the comma separated value. The formula will build a text value delimiting lead id, first name, last name, company, and email with a comma.

Passing the data array to the lightning component

To display the data generated from the fast lookup we use a screen element that contains the FlowDataTableCmp lightning component that I built in the previous post.

The component will expect two input values. The Data Array and Columns attribute correspond to the lightning components attributes.

<design:component >
<design:attribute name=”dataArr” label=”Data Array” required=”true”/>
<design:attribute name=”columnsStr” label=”Columns” required=”true”/>
<design:attribute name=”recordId” label=”Record Id” />
<design:attribute name=”key” label=”Key” />

We will be assigning the DataArray flow collection variable to the “Data Array” component attribute. The code the in the component’s javascript controller will parse the data and store it in the data attribute of the lightning:datatable component within the FlowDataTableCmp component.

The Columns attribute will be assigned columnNameForm flow formula variable which consists of column details of each column in the following comma-seperated format:


The detail of each column will be delimited by a semi-colon. In the same process as the data, the column details will be parsed by the component’s controller and used to the the columns attribute of the lightning:datatable component.

If a specific lead record is selected from the search results table we need to store the lead Id in a flow text variable to be used in order to allow the user to edit the selected record in the flow. The component will automatically store the selected record’s Id to the recordId attribute. In the output settings of the flow screen element we will set the component Record Id value to the leadId flow variable.

Editing the selected Lead record

To allow editing of an existing lead record selected by the user from the search results screen, we will be using another flow screen that contains the custom built FlowRecordEditCmp.

We simply provided the leadId text flow variable to Record Id attribute of the component.

The lead record Id value will be used to set the recordId attribute of the force:recordEdit component. Below is an example of what the component will look like on the the flow screen.

That covers the usage of the two flow enabled lightning components I built. In this example I used it for a lead entry flow, however, I am sure they can be used for other purposes as well. To see a demo of the flow check it out here. I have also included the flow metadata to the Github repository as an example as well. I hope this gives you context on how to use the components in flow screens. The best part of this in my opinion is that I didn’t need to use an Apex controller for the purpose of querying lead records since I leveraged the fast lookup element.

Until next time!

Leave a Reply

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

You are commenting using your 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.