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
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F1NAkkQYFWi8FTiusuWvP%252F2023-02-14_16-44-57.png%3Falt%3Dmedia%26token%3D1306c2d3-e95e-4aa2-bea1-9c250398eb65&width=768&dpr=4&quality=100&sign=a69790ff&sv=1)
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
collectionEnter 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
Last updated