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.
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.
Thank you!
I went with the DB (Xano) approach
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.
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!
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…
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.
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.
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
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)
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!
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…
On item removed is triggered when an item is moved out from the stack with drag and drop
