Sortable List

Creates a sortable list with API data

👉 The Tag

Drag and drop your list items and change their order! Create a sortable list to enable this behavior in a list inside your app.

📍 Where to add the tag: A container element.

[sortable]

⚙️ Backend setup

In order to sync the list reordering in the backend, the API endpoint needs to receive an API request every time a user changes the order of the items. Therefore, some backend logic is needed to update the database accordingly.

To get started quickly, we created a Xano snippet that will generate the API endpoints needed to handle the reordering, together with a database with some sample data. We recommend installing it in your Xano environment. You can also develop your own backend from scratch (you'll need this in case you're using a different tool). Note that this will require some advanced technical skills.

🎨 Design setup

Add the [sortable] tag in the corresponding container element. When connecting the container to API data, a sortable list will be created in the app.

We created a sample design you can check out. Feel free to duplicate and customize it.

⚒️ API requests setup

In order for this feature to work, we’ll need (at least) the following API requests:

  • A GET request to obtain the corresponding list data.

  • A PUT/PATCH request that will be triggered whenever a user reorders the list. This request will send the necessary information so the list is reordered in the backend.

PUT request

In case you use our Xano snippet, you’ll need to setup the PUT request in the way explained below.

Request URL

It will be the one that communicates with the corresponding PUT endpoint in the backend. In this example, the ${tasks_id} variable will take the value of the record ID, so you’ll need to use this name in the GET request’s Selected Data section for the record ID data.

Note that you can use a different variable name, as long as the names in Selected Data and in the PUT request URL match.

https://XANO_SERVER_URL/API_GROUP_URL/tasks/${tasks_id}/position

Request body

Use the following request JSON body to target the Xano endpoint.

${movedAfterItemId?} is a special variable that will contain the ID of the list item that is located above the position of the reordered item. For example, in case an item is moved to the second position of the list, ${movedAfterItemId?} will contain the ID of the item in the first position.

{
  "previous_tasks_id": "${movedAfterItemId?}"
}

GET request

Finally, you'll need a GET request to obtain the data for the list items. Remember to select the ID of the list items, and give it the same name as the variable in the PUT request URL.

🔌 Data binding setup

Once the API requests are created, it’s time to bind the properties of the sortable list to the corresponding data items. Bind the following properties as shown below.

Container

Bind this property to the list data item that references the API list.

Sort / Swipe to delete ID

Bind this property to the data item that references the list record ID. It should be in the same request that was bound to the Container property.

Remote action (sort)

Bind this property to the request that is triggered upon list reordering. In case you use our Xano snippet, this will be the PUT request created previously. Choose No action for the On Success / On error actions, unless you want to implement a different behavior.

📲 Test in Bravo Vision

That’s it! Open your app in Bravo Vision to test the sortable list. The sortable list works by long pressing an item in the list and dragging it to a new position.

PreviousAspect ratio relative to screenNextLayer (sticky element)

Last updated