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

  • /attachments/1324519926899408968/1324519927452926024/444167416_7992259844152415_7388758529921033287_n.png

    KillerK009

    12 days 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.
    444167416_7992259844152415_7388758529921033287_n.png
  • Lucas G

    12 days 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

    12 days ago

    No timeline for it though as I'm not available for the next few weeks πŸ˜…
  • KillerK009

    12 days 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

    12 days 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
    πŸ™1
  • Max

    12 days 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

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.