Create a sortable list

Overview

This tutorial will show you how to create a sortable list using the Avonni List flow screen component.

We'll start by showing you how to set up the Avonni List component, including how to choose the layout and customize the appearance of the list. Then, we'll guide you through adding items to the list.

Let's get started!

Result

Steps

1. Create the Get Records collection

We are adding a Get Records element to retrieve records from the Salesforce Contact object based on specified criteria.

• Add a Get Records collection

• Enter a Label name: GetContacts

• Select an object > Contact

• Filter by condition to only displays that belong to the current Account

  • Field: Account ID

  • Operator: Equal

  • Value: {!recordID.Id}

  • Store: All Records

2. Add a screen component

• Add a Screen element

• Enter an API name

• Hide Header and Footer (if needed)

• Drag the Avonni List component

• Click on the "Open Component Builder" button to access all the Avonni List component's settings

3. Add and configure the Avonni List component

• Variant > Base

• Divider > Bottom

• Layout > 1 column

Sortable options

• Sortable > Activated

• Sortable icon name > utility:drag_and_drop

• Sortable icon position > left

Data Source

• Select Variable

• Source Collection > GetContacts (created in Step 1)

• Mapping

  • Label > Full Name

  • Name > Contact ID