Display contacts with custom icons

Overview

This tutorial will guide you through creating a visually appealing and user-friendly card header screen flow using the Dual Listbox component. You will learn how to customize the appearance and functionality of the Header.

So, let's get started!

Result

Steps

Create the flow

Type Flow in the setup menu

• Click on the "New Flow" button to create a new flow

• Select "Screen Flow"

Create the Get Records element

We will create the Get Records collection to retrieve contact records.

• Add a "Get Records" element

• Enter an API Name

• Select the Contact object

• Filter Contact Records

  • None - Get All Records

• Display "All Records"

• Click on the "Done" button

Add a Screen element

• Drag a screen element with the following settings:

  • Enter a Screen API Name

  • Remove the Screen Header and Footer (if needed)

Add the Dual Listbox Component

• Drag the Dual Listbox Component from the custom list (or type Avatar Group from the search box)

• Enter an API Name

• Open the Component Builder to access all the component's settings

• Set the following settings:

  • Label: Select Contacts

  • Data Source: Variable

    • Source collection: GetContacts (preciously created)

  • Data Mappings

    • Label: Record.FullName

    • Description: Record.Phone

    • Avatar Icon Name: standard:employee_contact