How to allow users to select one option from a Repeating Group

Hello,

I’m struggling to create the correct Custom State, Conditional and Workflow set-up to enable users to allow users to select one of these options.

These are options from an option set because I want to be able to display the image and text within the repeating group.

Can anyone help, please?

Thank you
Jade

Is this something that’s going to be updated on click, or is it a value you want to store to use later?

Both (hopefully!)

I would like the button colour to change based on the user’s selection.

And I also want to store the user’s selection in the database.

You can create a state of type number, when a RG element is clicked, set state to it’s index. Then in frontend use a conditional to check the states values with current cell’s index.

1 Like

Hello Jade,

It’s great that you have an Option Set displayed in the Repeating Group. To achieve your goal, follow these steps:

  1. Create a Custom State: Attach a custom state to the repeating group. The type of this custom state should match the Option Set.
  2. Set Up the Workflow: Create a workflow that triggers when the button is clicked. This workflow should set the custom state to the current cell’s value.
  3. Apply Conditional Formatting: Add a conditional statement to the button. When the repeating group’s custom state equals the current cell’s value, change the button’s color to “x.”

If you need further clarification or run into issues, feel free to ask!
Hello Jade.

3 Likes

You shouldn’t need custom states etc. Just use Current cells index. There’s only 4 options, so it will be either 0,1,2,3 or 1,2,3,4 since i can’t remember off-the-top of my head if bubble makes this 0 based. And you can have your conditionals on this.

Also, if you’re going to save this in the database, just make the field you’re saving it to an option set, set it to the correct option set, and then you can save it direct from the repeating group without any additional custom states etc and will render better performance.

Keep in mind tho, you can’t sort by option sets, so I actually would deter you away from using option sets in your database.

1 Like

thanks Doug!

I was using option sets so that I could pull in an image and text field into the Repeating Group. Is there an alternate way of achieving the same end result without using option sets?

Displaying them like this off of option sets is fine, i just wouldn’t store it in an option set field in my database.

1 Like

Thank you so so much! It’s all working!

Thank you
Jade

Okay, thank you for sharing this!

How would I save the selected option into my database without saving it in an option set field?

I want to be able to sort the data that is saved in the database. My original plan was to save as arbitrary text :upside_down_face: (because I couldn’t see an alternative way.)

How ominous :rofl:

Why though? Using the option itself as the custom state is the most logical and scaleable approach. What about when they add more options? What about when they want to reference the currently’s selected option? You don’t want to have to do Repeating Group’s List of option’s Item # Custom state.

Yes, in the database. Which is better depends on your use case. Based on your screenshot, option sets are 100% the right choice.

You probably have a ‘Log’ data type (where the user records their flow/symptoms etc). Have a field ‘Flow Amount’, and that field type should be your Option Set. Then, you Create/make changes to a Log and set the ‘Flow Amount’ to Custom State’s value.

So:

  1. Suppose option set is called ‘Flow Amount’
  2. Create a field on the Log data type called ‘Flow Amount’ and set the field type to ‘Flow Amount’
  3. When creating a log, set the field to the custom state’s value.

If you want to sort things in order, you can add a number attribute to each option (1 for spotting, 2 for light, etc) and sort by those when you need.

1 Like

Hello again,

I would like the user to be able to deselect their option by clicking the button again.

I’ve tried the following logic (see screenshot) to clear the list but can’t get it to work.

Thank you
Jade


ould

Set the “Set state” value to empty with the condition that if the state’s value is not empty & it’s the state’s value is of the current cell

1 Like

Thanks for your reply!

I’ve tried the condition but couldn’t get it to work. Where have I misinterpreted it?

What you should do is skip over creating a custom state, it’s a waste of resources, since the end goal is to save it to the database anyways, and run conditionals on this.

Create a field on the User called something relevant like ‘Menstrual Flow’ and make it an integer that can be sorted ascending or descending.

Now when someone clicks their flow intensity, you can save the current cells index in this field.

Then for your conditional you would have When ‘Current User’s Menstrual Flow is Current Cells Index’ which will either be true or false.

And this makes the most sense, since option sets are not dynamic in nature, without having to push an app update to live; which is essentially unnecessary and negates the ‘scalability’. Besides, I’d bet there’s a MAX of 4 options there could ever be for a females flow intensity.

That’s not going to work though when the user wants to edit a log entry, or create a new one, or have drafts, is it? And why would you make it an integer rather than an option set? You can sort option sets.

By all means save it straight to the DB, but putting it on the User is silly… it should be on the Log/Entry/Form/whatever relevant data type.

It’s really not that complex:

  1. Option set for Flow Amount
  2. Field of type Flow Amount on the relevant data type (a Log/Entry/Form etc depending on the specifics of the app)
  3. If possible, save it directly to the Thing when it is clicked. If you don’t want to do this, store it in a custom state / group variable and store the Option rather than an integer.

@jademariewakes your condition needs to be on the group inside the cell and should be ‘Current cell’s Flow Amount is Repeating Group’s selected flow intensity’. Note that Current cell’s Flow Amount will be Parent group’s Flow Amount if it’s not the first group in the RG.

1 Like

What makes you say that?

I would like to learn how. Can you please show me?

Because they could only ever have one saved state. Looking at Current User’s X for the condition won’t be very useful when the log you’re viewing isn’t the one they last edited.

Huh? You’ve got to be off your rocker, brother.

Her workflow seems like it’s user setup. Why would she need a whole new table to log a single field? Why would she continue creating new records for this profile field when it only needs to be updated? And even if it’s a monthly thing, and she’d have to create new records intermittently, on a relational table she can always get her last entry via the :last item operator.

@everyone let this go to show that not everyone with the paid for ‘Bubble-Certified Developer 2024’ tag knows what they’re talking about.

Careful - you might embarrass yourself :wink:

My solution is under the assumption that the flow selection the user makes is part of a log entry, a form, onboarding, or some other flow. It’s unlikely this is just a single question on the user’s profile because flow, logically, changes by the day. Rather, the user will be recording this multiple times.

In any of these cases, you likely wouldn’t want to be storing it on the user. For log entry/forms by storing it on the user you could never have more than one entry, and for onboarding, because you wouldn’t need the data all the time and would be building a more performant app by keeping the User (which is loaded on every page load) data type light and simple.

And this just shows bad build practice - what use is a list of Flow records alone if you don’t know when they were recorded? What if the user skips logging a day/month? How would you know if the user has already submitted a log for this day/month? Think it through… that’s the kind of reason you’d be storing it on another data type.

Now, @jademariewakes, here’s a simple editor demo that you should be able to copy and should work for your use case (of course, it’s possible I got your use case all wrong and something slightly modified may suit yours better!):

Preview

Editor

We have an option set for the options, and have sorted these options using the number attribute to ensure they’ll always be in a fixed order even if options are added/deleted/moved in the editor.

When an option is clicked, we save it to the Log. You’ll see the conditional on the ‘Group Example Option’ group.

You can see that the logic works great for loading previous previous responses too (as I assume the user will be recording their flow multiple times):

Hope this helps!

(P.S - I used a hidden group to store data rather than states, as it’s a bit more flexible. If you still want to use states, you can swap out Display data in a group actions for Set state of an element actions, and reference a state rather than a group’s data :grin: )

1 Like