Repeater Component (Beta) in Salesforce Flow | Spring'24 Release

Hello Trailblazers,

In this post we're going to learn about new Repeater component provided by salesforce for screen flows. Let's begin!

Screen Flow: Create contacts for Account

Let's start with a basic use case: We want to create multiple contacts for our account record in one go. The standard screen flow approach for this will be: Show contact fields (contact form) on a screen, the user can fill those, maybe have a checkbox at the end which says, do you want to create another contact? If the user checks it, reload the same screen again on clicking next button so that the user can fill details for another contact. If the user doesn't check that checkbox, create all the contact records for which the user entered information till now.

The drawback with this approach is: User cannot view the details of all the contacts on a single screen while editing. Due to this, he/she may go back and forth to update a particular contact which may lead to some other issues like: duplicate records (as you may be adding contact record to the list as well side by side - in the same loop which is used to repeat screen, with a plan that you can insert those at the end - give this a try) or there maybe some other issues too.

We can solve these problems using the new Repeater component provided by salesforce for screen flows. Please note that this component is presently in beta.

Creating the base flow with empty screen

1. Go to Setup and search for Flows. Click on the New Flow button to create a new flow

2. On the New Flow screen, choose Screen Flow and click on Create button

3. Click on the + icon between Start and End element and choose Screen to add a screen element to our flow

4. Add a label for the screen as Create Contacts for Account, the API name will auto populate to Create_Contacts_for_Account. Click on Done

5. Before proceeding forward, let's save our flow. Click on the Save button at the top right corner. In the Save the flow popup, populate the Flow Label as Create Contacts for Account, the Flow API Name will autopopulate as Create_Contacts_for_Account. Click the Save button in the popup screen to save the flow.

6. Your flow will look as shown below

Populate the screen with repeater component with contact fields inside it

Open the screen element and add repeater component to it as shown below:

The API name for the same is: ContactDetailsRepeater. Now, let's add some contact fields in our repeater component.

Let's add a text field as shown below, the Label of the field can be: First Name with the API Name as First_Name.

Similarly, let's add the last name field as well with Label as Last Name and API Name as Last_Name. We'll also make this field Required by checking the Require checkbox as shown below:

Click on Done.

Iterate contacts to create a contact list

The repeater component will provide us a list of contact records. Let's iterate that list by using a loop. Click on the + icon again and add a loop element as shown below:

Loop Label can be Iterate Contacts and API name can be Iterate_Contacts. For the Collection Variable you can have it as {!ContactDetailsRepeater.AllItems} as shown in the below images:

The final screen will look like this:

Now, let's add an assignment element inside the loop to create our contact record. Click on the circle (+ element) inside the loop and choose assignment as shown below:

Our assignment Label can be Create Contact Record and API name will be Create_Contact_Record as shown below:

Now, to create a new contact and add it to the list, we need some resources. Let's create a new resource named Contact which will store the contact record as shown below:

Resource Type: Variable

API Name: Contact

Data Type: Record

Object: Contact

Click on Done and create another resource to store list of contacts as shown below:

Resource Type: Variable

API Name: ContactList

Data Type: Record

Object: Contact

Allow multiple values (collection): True

Click on Done. We also want to associate our contacts to the account record. Let's create another resource which will store the id of the account as shown below:

Resource Type: Variable

API Name: AccountId

Data Type: Text

Availability Outside the Flow: Available for input

Click on Done and let's update our assignment element as shown below:

{!Contact.FirstName} Equals {!Iterate_Contacts.First_Name}

{!Contact.LastName} Equals {!Iterate_Contacts.Last_Name}

{!Contact.AccountId} Equals {!AccountId}

{!ContactList} Add {!Contact}

We assigned the first name and last name values from current item of the list provided by repeater to the first name and last name of the contact record. Then we assigned the value of AccountId in our contact record to the value of AccountId variable. Finally, we added our contact record to the ContactList.

Inserting Contacts in Salesforce

Now, we need to insert this list, click on the circle (+ element) outside the loop and choose Create Records element as shown below:

In the New Create Records section, add the label as Create Contacts, the API name as: Create_Contacts. The value for How Many Records to Create should be Multiple and in the Record Collection field, we can choose our ContactList collection as shown below:

Now, we can save and activate the flow. Let's go to our account record's detail page and embed the flow there.

Adding Screen Flow to Lightning Record Page

Go to any account record in salesforce. Click on Gear icon and choose Edit Page.

In the Lightning App Builder, search for Flow in the components section in the left, drag and drop it anywhere on the page you like. In my case, I've added it to the right. Choose our Create Contacts for Account flow and for the AccountId variable, check the Pass record ID to this variable checkbox as shown below:

Click on Save. Activate the page if needed and go back. You'll notice that the flow is present on the page as shown below:

Demo

Our changes are done. Let's take a look at the demo:

As you can see above, as we click on the + Add button, the section inside the repeater component is repeated so that we can create multiple contacts in one go. Similarly, we can also click the Remove button to remove a section. As we clicked Next button, 2 contacts: Richard Hendricks and Erlich Bachman were created and attached to the current account record.

Note: The Repeater component is currently in Beta and supports these components inside it as provided by salesforce: Checkbox, Checkbox Group, Currency, Date, Date & Time, Long Text Area, Multi-Select Picklist, Number, Password, Picklist, Radio Buttons, Text, and Display Text

That's all for this tutorial everyone, I hope you liked it, let me know your feedback in the comments down below.

Happy Trailblazing!!