Displaying text data based on order of drag and drop group

Hi, I’m a newbie trying to build the last few parts of my MVP. The problem I face is this:

  • I have a drag and drop group that will allow user to change the order of some items e.g. 1. Apple, 2. Orange, 3. Banana

  • For each of the items, the underlying value changes dynamically based on an API I am connecting to. e.g. Apple = $3.50, Orange = $1.50, Banana = $2.00. But the user does not see the underlying value of course. On the front end, he sees only the fruit names

  • Depending on the order that the user drags the drag and drop items, the result ultimately changes and I would like the final result displayed on the front-end in Text

  • Based on the above e.g. if user drags and drops with final items being arranged in this sequence “Orange - Banana - Apple”, the text to be displayed based on the API data is for each of the items, it would be: “$1.50 - $2.00 - $3.50”

My best guess is a mix of custom states, workflows and database are needed. But I’m quite at a loss at how to get this to work.

Thanks so much in advance!


I’ve tried my best to recreate the behavior you need in this quick demo example https://www.youtube.com/watch?v=JZKJc48KWjY

1 Like

Thanks so much for this! It’s exactly what I was asking for. I couldn’t understand how the Value should be set in the Set State part in workflow, and your video shows it perfectly.

I’m still trying to wrap my head around the whole logic of the way the Value should be set, but I think it’s more a matter of me needing to dig deeper into the way Bubble works.

After implementing it, I realised there are more roadblocks related to the above that I didn’t anticipate and am still working on resolving.

But thanks so much for this! I really appreciate it!

1 Like