Interactive Contact List

Overview

This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.

To complete this tutorial successfully, you need to enable the Reactive Screen Components Beta feature in Salesforce.

To opt in to the Beta you need to go to the Process Automation Settings page within Setup. Scroll down to the bottom and enable the Reactive Screens Beta.

If you did not enable this setting before, you need to create a new flow once it is activated.

In this tutorial, we'll build an entirely reactive component using the Avonni List and Formatted Value components. The primary aim is to display a list of contacts where selecting a contact will reveal their associated information on the right side of the screen.

Final result

Flow Builder overview

Screen element overview

Steps

1️⃣ Create your screen flow

2️⃣ Create the Get records collection

3️⃣ Add a screen element

4️⃣ Add a section element

Adding the Section component

Adding a ' Section ' element is important before incorporating the Avonni List component into our screen flow. This element is crucial because it allows us to create two distinct sections within our screen element.

5️⃣ Add and configure the Avonni List

Here's the configuration setting for the Avonni List Component.

Variant	Base
Divider	Bottom
Enable click for each items	Checked
Layout - Number of Columns	1
Data Source	Variable
Items Collection	Get Contacts (replace by your own get records collection created in step 2)
Label	Full Name
Description	{{Record.Title}}
Avatar - Icon Name	standard:user
Avatar - Icon Size	Medium

6️⃣ Add and configure the button group

In the right column, we're placing the Avonni Button Group Component. This lets us make buttons that can perform specific actions. You can set up these actions for each button using the Interactions Pane within the Avonni Button Group Component.

7️⃣ Add and configure the Avonni Formatted Value

Here's how to configure the Avonni Formatted Value Component

Label	First Name
Variant	Standard
Type	Text
Value	Mapped > List > Clicked Item > First Name