# How do you persist the order of items? Array index or DB column?

**URL:** <https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550>\
**Category:** How do I?\
**Created:** [May 2, 2023, 6:52pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550 "2023-05-02T18:52:54Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![twinsticks](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@twinsticks](https://community.weweb.io/u/twinsticks)\
**Post date:** [May 2, 2023, 6:52pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/1 "2023-05-02T18:52:54Z")

</div>

Goal: Have a vertical list of items (cards) that can be reordered by the end user.  
When the page reloads, the new order should be retained.

I also want to be able to add new items, inline at the position in the list I want… and I want that to persists.

Question: How do I store the order (as an array, object?) and do I store that in the DB?

I had a quick look at the Kanban example page, but I see that while reordering vertically works, it resets on reload.

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [May 3, 2023, 9:31am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/2 "2023-05-03T09:31:27Z")

</div>

Yes you have to store it into your DB or use a variable stored in local storage.

If you’re using a DB to store your items, you can add a column “order” to store the position, and update the position of every item using a workflow action on item changed (the trigger give you the updated list)

If you’re using local storage you can update the variable containing your items with the same workflow and let weweb store it in local storage so it will be restored after a reload

Both array index or db column style works. But the first one will require you some logic to build the array and restore it.

---

<div class="post-metadata">

**Author:** ![twinsticks](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@twinsticks](https://community.weweb.io/u/twinsticks)\
**Post date:** [May 3, 2023, 11:46pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/3 "2023-05-03T23:46:58Z")

</div>

Thank you!

I went with the DB (Xano) approach

---

<div class="post-metadata">

**Author:** ![JamesPan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jamespan/32/3594_2.png) [@JamesPan](https://community.weweb.io/u/JamesPan)\
**Post date:** [August 2, 2023, 6:08am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/4 "2023-08-02T06:08:18Z")

</div>

My apology for digging into an old thread, but I also want to know how to do this.

I have made the extra “order” column in the database (Supabase) to store the position, but I can’t figure out how to create the workflow. I found the ‘On item moved’ trigger and see the ‘updatedList’ trigger on the On item moved variable.

But don’t know how to combine everything to make the re-order possible. I hope you can assist me with the appropriate direction or solution.

Thank you.

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [August 2, 2023, 9:45am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/5 "2023-08-02T09:45:10Z")

</div>

Hi, in your workflow you can iterate on the list with a loop and update the order column of every item in your DB through an update supabase action 🙂

The list correspond to the new ordered items, so you can use the index of the loop and put it inside your order column. Tell me if it doesn’t make sense to you I will try to explain it better!

---

<div class="post-metadata">

**Author:** ![JamesPan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jamespan/32/3594_2.png) [@JamesPan](https://community.weweb.io/u/JamesPan)\
**Post date:** [August 3, 2023, 12:06am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/6 "2023-08-03T00:06:32Z")

</div>

Hi @Alexis thank you for taking the time to explain. I am trying to understand, but don’t really get it…

This is what I have now, based on your explanation. 😅 Haven’t worked with the iterator before, so not sure how it works…

![Screenshot 2023-08-03 at 02.02.03](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1646e0569d12c5bb7ddb5c4441dac938c8579be7.png)

![Screenshot 2023-08-03 at 02.03.47](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b6739babeef2b470da25a08da96f57ec71ebcd86.png)

![Screenshot 2023-08-03 at 02.04.16](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1f67084d5c09028793b59d292f8f6926b4488ec8.png)

![Screenshot 2023-08-03 at 02.04.25](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/493bd31613bc0fa538f868abc518ef1d684d4413.png)

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [August 3, 2023, 8:39am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/7 "2023-08-03T08:39:47Z")

</div>

For the ID I guess you have to bind Event.item.id ?

For the order, your last screenshot, you’re binding the new index of the new item, what I think you should bind is the index of the loop. You will find somewhere in the explorer the loop variable with the index inside.

So, at each iteration of updatedList, you will send the index of the loop as the new order of the element.

If you want it to start at 1, you will have to do loop-\>index + 1 in the formula, because an index start at 0.

![Capture d’écran 2023-08-03 à 10.39.15](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/ac346c530f561857f71464f0918b2815f4c0fa85.png)

---

<div class="post-metadata">

**Author:** ![JamesPan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jamespan/32/3594_2.png) [@JamesPan](https://community.weweb.io/u/JamesPan)\
**Post date:** [August 4, 2023, 6:47am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/8 "2023-08-04T06:47:37Z")

</div>

@Alexis Thank you very much!!! It worked! 🙏🙏🙏

---

<div class="post-metadata">

**Author:** ![noncodeur](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/noncodeur/32/13357_2.png) [@noncodeur](https://community.weweb.io/u/noncodeur)\
**Post date:** [September 28, 2023, 1:47pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/9 "2023-09-28T13:47:35Z")

</div>

hey Alexis, I did exactly that with Airtable and somehow the index of the loop is always 3.

You can see in the example video, it starts at 0, I moved to what supposed to be 1, but it goes to 3.  
 ![index](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/98f0a78265ae1a4859a46747654f6c0be8a94cee.gif)

 ![Updatedlist](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/afff0cedfb6b3f0633c627a8d9db86d6fa6d393d.png)  
 ![Eventitemid](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f58b55257e7270bcacebe9b42fd9a380ed334566.png)  
 ![Actionloopindex](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c4094bc37980f94f6a79de0ae9204c2eaf8eea3d.png)

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [September 28, 2023, 1:56pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/10 "2023-09-28T13:56:23Z")

</div>

Can you show me how did you bind your kanban to your Airtable list please ?

You may have bound the collection where its better to bind the collection-\>data to avoid some weird behavior like this one

---

<div class="post-metadata">

**Author:** ![noncodeur](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/noncodeur/32/13357_2.png) [@noncodeur](https://community.weweb.io/u/noncodeur)\
**Post date:** [September 28, 2023, 1:58pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/11 "2023-09-28T13:58:44Z")

</div>

Like that.

 ![CleanShot 2023-09-28 at 09.57.38](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/47eb7861da3cd166b7ec70dd4daacfe2ddb4aafc.png)

Just changed for All pages.data and same thing happened.

 ![CleanShot 2023-09-28 at 10.00.36](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4ef9add7db78ff87ea898c8d98d974e43bb48c9b.png)

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [September 28, 2023, 2:06pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/12 "2023-09-28T14:06:07Z")

</div>

You bound “Event.item.id” as Record ID for the “update a record” action.

But it should be the id from the record you have inside Action.loop. You are updating multiple time the same record, so it end up having always the order of the last item in your kanban (3)

---

<div class="post-metadata">

**Author:** ![noncodeur](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/noncodeur/32/13357_2.png) [@noncodeur](https://community.weweb.io/u/noncodeur)\
**Post date:** [September 28, 2023, 2:20pm UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/13 "2023-09-28T14:20:54Z")

</div>

Awesome. It works now. But I needed to put back “All pages” instead of “All pages.data” otherwise it didn’t update in Airtable. Thanks!

---

<div class="post-metadata">

**Author:** ![noncodeur](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/noncodeur/32/13357_2.png) [@noncodeur](https://community.weweb.io/u/noncodeur)\
**Post date:** [September 29, 2023, 1:13am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/14 "2023-09-29T01:13:25Z")

</div>

About the on item removed, I see the action is set on the stack element. But, how do I trigger it exactly? I added a button in a card and a workflow on click, but it’s not linked to the on item removed workflow…

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [September 29, 2023, 8:26am UTC](https://community.weweb.io/t/how-do-you-persist-the-order-of-items-array-index-or-db-column/2550/15 "2023-09-29T08:26:32Z")

</div>

On item removed is triggered when an item is moved out from the stack with drag and drop
