How to bind array to drag & drop list to keep variable in sync with displayed list?

KillerK009 · 2025-01-02T23:29:18.963+00:00

Is there an easy way to bind an array variable to a scrollable list in the UI where the array variable updates if the user makes changes to the list?Basically, trying to create a weight lifting program builder which will have a horizontal scrolling list of days where the user can dynamically add/remove as many days as needed. And then each of those days has a vertically scrolling list of exercises that also can be dynamically added/removed and reordered (see photo for example of similar goal UI).I'd like it to be possible to drag and drop both the days and exercises between days.I see the Spark Drag and Drop and starter-pack packages have list components, but I'm not sure if the starter-pack allows drag & drop between different lists (to allow exercises to change days) and the Spark package seems like it would require manually updating the underlying array variable anytime the lists changed which would be kind-of a hassle to implement, especially since I'm still brand-new to Toddle.

KillerK009

6 months ago

Is there an easy way to bind an array variable to a scrollable list in the UI where the array variable updates if the user makes changes to the list?

Basically, trying to create a weight lifting program builder which will have a horizontal scrolling list of days where the user can dynamically add/remove as many days as needed. And then each of those days has a vertically scrolling list of exercises that also can be dynamically added/removed and reordered (see photo for example of similar goal UI).

I'd like it to be possible to drag and drop both the days and exercises between days.

I see the Spark Drag and Drop and starter-pack packages have list components, but I'm not sure if the starter-pack allows drag & drop between different lists (to allow exercises to change days) and the Spark package seems like it would require manually updating the underlying array variable anytime the lists changed which would be kind-of a hassle to implement, especially since I'm still brand-new to Toddle.
Lucas G

6 months ago

I'll try to update the starter-pack
I've seen changed it to make a kanban style board which is what this is
Lucas G

6 months ago

No timeline for it though as I'm not available for the next few weeks 😅
KillerK009

6 months ago

That'd be great!!

Also, does the starter-pack drag-and-drop component only display a single text line for each item in the list? Is there a way to define a custom UI for each list item?
Lucas G

6 months ago

If you copy the component into your project you can tweak it
I'll add a slot in so people can add whatever they want
Max

6 months ago

Hey! With the Spark DnD package, you need to update your array manually. That package supports all kinds of lists and flexibility was the main goal. That is why you need to do this yourself. In the package docs, there is a video on that topic

How to bind array to drag & drop list to keep variable in sync with displayed list?

KillerK009

Lucas G

Lucas G

KillerK009

Lucas G

Max