Using emojis as buttons to populate a field list

I’d appreciate some help on my app.

What I’m trying to do

  • Collect a list of alcohols from the user
  • The options are: Beer, Wine, Champagne, and Liquor
  • A user can select any combination of the above (from nothing to all four types)
  • They will select the alcohols by clicking respective emojis (see attached image)
  • The emojis fade opacity or turn bright based on user selection
  • Based on the emojis selected, I want to capture the list of alcohols in my database and send to an API

What I’ve done

  • Created the UI + workflows for users to select and de-select alcohol types by clicking the emojis
  • Created an Option Set: “AlcoholType” with Beer, Wine, Champagne, and Liquor
  • The AlcoholType Option Set is part of a Data Type called “User Inputs” where I’m also collecting other inputs like how many people there are, whether they are indoors or outdoors, etc.

Where I’m stuck

  • I can’t figure out how to actually populate the Alcohol option set in my database with the inputs based on emoji selection.

Any help is greatly appreciated!


You want to display a list of a “data type” based on if its field for “Alcohol Type” contains the selected “Alcohol Types”? Just “Do A search for User Inputs” where Alcohol Type is in Selected Alcohol Types and display that in a repeating group.

When user click’s on an emoji - add it to a custom state (if you are allowing to select emojis and save the voice with 1 button click at the end) or make a change to a thing (User Inputs) and add clicked emoji to AlcoholType list (if you’d like to save the choice as soon as 1 emoji is clicked)

1 Like

Can you help me more with the custom state solution? That’s where I want to take this, with toggling things on and off but nothing loads to the database until the button click at the end.

I created a grouped element with type of “AlcoholType” but using the “set state” workflow, it seems I can only set it to one thing at a time. I’d like to “add state” since it’s an option set, but can’t figure that out.

I basically want to do what’s in this video, except add ability to select and de-select multiple options at the same time, which he doesn’t seem to cover.

Thanks a ton for your help - I’m new to Bubble and not a dev by trade.

So, you would like to have a possibility to choose multiple options from “AlcoholType” and save it when? As soon as user select/deselect a single item (beer, wine…) → it should be added to User Inputs? Or user should have an opportunity to select/deselect multiple options and confirm his choice with a button (save/confirm)?

1 Like

I’m trying to do this one. Thanks for your help!

@artemzheg could you elaborate a bit on how to use custom states to achieve this?

The only way I can think is to brute force a bunch of “if statements” that reflect all permutations of alcohols selected. Is there a way to just “add” and “subtract” Beer when Beer is clicked, and same for wine? And then when the final button is clicked, it grabs the full list of selected and writes it to the database?

EDIT: Nevermind, I got it! Thank you for helping me realize it should be possible with custom states. The solution was to have a parent container with type of “AlcoholType” (the Option Set with the list of alcohols) and workflow for each alcohol emoji to set custom state of parent row equal to its existing state then using “plus item” or “minus item” operators to add and subtract one at a time.

Thanks again for your help @artemzheg

1 Like

Who icon is clicked:

  1. only when custom state contains this icon value → remove from the list
  2. only when custom state doesn’t contain this icon value → add to the list

as a result you’ll have a list of AlcoholTypes to save in the DB.

1 Like