Only allow one option (image) to be selected

Hello, im trying to set up a feedback system and the users can select between 3 emojis, Good, OKEY and Bad shown below:

Screenshot 2023-03-11 at 10.24.46

However, how can i do it so only one of these options can be selected? as shown in the image now users can select all the options at the same time.

Here is my backend:
Screenshot 2023-03-11 at 10.27.01
Screenshot 2023-03-11 at 10.27.18
Screenshot 2023-03-11 at 10.27.26

Hi there, @Orbit… I’m not exactly sure what you are showing there, but if each emoji has its own custom state that determines if it has been selected, then that’s your issue.

If I was doing what you described, I would probably use an option set to define the emoji options. Then, I would show the options in a repeating group, and I would have a single custom state on the repeating group (or maybe at the page level, but it doesn’t really matter) that is linked to the option set. When one of the emojis in the repeating group is clicked, I would set the custom state to the current cell’s emoji, and I would have a condition on each emoji that says when the custom state’s value is the current cell’s emoji, do something to show that the emoji is selected.

Hope this helps.

Best…
Mike

Hey thanks for responding, that seems very complicated? Is there not another way to do it? They all have the same custom state called “Active Emoji”

There are always multiple ways to do things… but I don’t think you’ll find another way to do this as simple as the one suggested by @mikeloc

Generally, the simpler methods, and the ones which require less work to implement, are the best ones.

So using an Option Set and a RG is much simpler and more efficient than any other way - such as doing everything individually for each emoji (i.e. doing three times more work to get the same end results).

If you find the idea of Option Sets and Repeating Groups “very complicated” then I highly suggest taking a big step back and learning about these two very basic/fundamental features of Bubble first.

They will both make things much simpler and save you a lot of time.

But, back to your question:

They all have the same custom state called “Active Emoji”

(as Mike already pointed out) having the same custom state on each emoji and element is the reason you can’t select only one image.

To do that you need to have just a single custom state (to store the selected value).

1 Like

Thanks Adam! Can i use RG and still have the emojis and design style i have now?

Showing the emojis in a repeating group doesn’t affect the design… so, yes, you can still have the design style you have now.

Yup, what Adam said. Most folks out here (myself included) are always trying to give you the “easiest” or “best” or “most efficient” way to do something, and it only seems complicated because you have already gone down a path and don’t want to go down a different one or you just don’t know what they are talking about. I’m sure you have used repeating groups before, but if you haven’t used option sets, check into them for sure… there is nothing complicated about them (or repeating groups, for that matter), and they are useful in lots of different situations (including what you are trying to do, which is why I suggested using them).

Will for sure take a look at that! I have option sets for user roles, but that’s it and only repeating groups for like display data about users etc so nether for that. Do you have time to show some screenshots or point me to some documentations i can read?

Here is an example you can use for reference.

Here is the option set, and it has an attribute for each emoji’s image. You can upload the image for each option by clicking the Modify attributes link next to the option.

Here is the repeating group that shows the emojis, and the repeating group has a custom state on it to hold the selected emoji.

There is an image element in the repeating group that show’s each option’s image, and there is a workflow associated with the image element that looks like this.

Finally, there is a condition on the image element that looks like this.

condition

1 Like

Hey, thank you so much for the detailed instructions, i really appreciate it. However, i cant seem to find where i upload the emojis? All other steps worked!

EDIT Found it now, thanks! will test it now!

1 Like

Hey just wanted to inform that it worked great and i even manage to “create a new thing” now with this as well. Thank you so much @mikeloc, i really appreciate you taking the time and showed such a detailed step by step. would not been able to figure it out on my own. Once again, thank you so much!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.