> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-sortable-list.md).

# Create a sortable list

## Overview

This tutorial will show you how to create a sortable list using the [Avonni List flow screen component](/flow/flow-components/list.md).

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

<figure><img src="/files/LtO9n2hswW2OYlK8YBaQ" alt=""><figcaption></figcaption></figure>

## 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](#1.-create-the-get-records-collection))
* **Mapping**
  * Label > Full Name
  * Name > Contact ID


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-sortable-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.