Create HTML elements in a Lightning Flow

Flows are the most powerful point and click automation tool available on the Salesforce Platform. They can be used to perform actions in the Salesforce org or external systems. There are two types of flows:
1. Auto-launched flows
2. Screen flows
In this post we are going to discuss the latter. Screen flows come in very handy to create user forms that can take input from the user and perform operations based on these inputs. In some use cases we need to display certain data on a record page. While we can reference LWC and Aura components in a flow, this creates a dependency on a developer to debug issues or even make minor changes to the component.
If we will have a look at the Screen flow builder, we can see that there is just 1 output component and 23 input components!

The only component available for output is Display Text. While one might think that this component can only show Flow variables in plain text, turns out that this component can take in HTML tags and render HTML.
In our example we will create a component that will display all the contacts related to an Account, all without creating any Apex Class or Lightning component.
Step 1: Create an input variable of type Text that takes in the RecordId from the Account

Make sure that the 'Available for input' checkbox is selected.

Step 2: Use the 'Get Records' element to fetch the contacts. Make sure that in the filter condition the AccountId is equal to the RecordId variable created in the previous step

 Under the How to Store Record Data select 'Automatically store all fields' option or we can manually select the fields required on the table that we are creating

Step 3: You can use an online word to html convertor such as generate the html required to create. In our example we will be using data table from Lightning Design System, which will be responsive as well. The gotcha in this step is that you need to know what part of HTML is going to be repeated. We will use these inside the for loop element in the next step. More about this in later steps.

Step 4: We will create a text variable which will contain the HTML header tags before the repeating rows. The creation of variable should be as shown below

Since the header would remain constant we will add it to the Default value of our variable. You can see the default value code from here.

Step 5: Now time to create the logic for repeating rows, this is the data that we collected using Get Contacts action.
Add the Loop element on the screen.
In the collection variables select Get_Contacts.
Create a Loop variable called Contact that will iterate over each and every Contact record fetched by the Get Contacts element

Step 6: Create a new text variable called 'Row HTML'. This variable will store all the HTML that will be used to generate rows of each record in the table. The default value of this variable will be left as blank.

Step 7: We will add an assignment element on the screen called 'Create Row HTML' that will be used to add the row HTML for each and every record

We are using the Add operator so that every rows data is added to the RowHTML variable.The HTML code added in the value is

<td>
  <div class="slds-truncate">{!Contact.Name}</div>
</td>
<td>
  <div class="slds-truncate">{!Contact.Email}</div>
</td>
<td>
  <div class="slds-truncate">{!Contact.Fax}</div>
</td>

 In every div tag we are adding the Field that needs to be displayed in each and every column. Since we are using the Loop Variable Contact, this value will keep on changing as we iterate over records.

Step 8: Click on the Done button and connect the Loop Contacts with the assignment so that it works 'For Each Item'. Connect the Create Row HTML assignment to the loop to close off the loop. The flow should now look as shown below

 

Step 9:  Create a new Screen Flow. Deselect the 'Show Footer' checkbox. Drag and Drop the 'Display Text' element on the screen. In the insert resource section add the HTMLHeader and RowHTML variables. The screen element should look as shown:

Step 10: Connect the  Loop with the screen and save the flow. The flow should finally look as shown:

Click on the Debug button, enter an Account Id that has atleast 1 contact and verify if the flow created is working properly.

We can now add this flow on an account page or any other page as per our use case. The XML code for the above flow can be found here.

Leveraging the above example an admin can use a flow for countless more use cases and efficiently build HTML components that can be used throughout a Salesforce org.