Forum Academy Marketplace Showcase Pricing Features

Let the user select multiple groups/elements (not checkboxes/dropdown)

Hi there,

I would like to build a site where people can select multiple groups (as an option) by clicking/touching (for mobile) them. The groups should then change colours/borders etc (easy) and after clicking a save button the data should be sent to the DB. Don’t want to use the checkbox or dropdown element since it looks shitty on mobile.

Just like in this screenshot

(Screenshot btw from buildcamp youtube tutorial by Gregory John, awesome tutorials!)

Greatly appreciate your help folks, have been searching the forum for quite some time but didn’t find anything useful (but maybe my google skills are just horrible?)

Hello,

Here’s how I would approach what you’re trying to build - hope it helps!

First, check out states for this if you aren’t already familiar, here’s an article from Bubble on how to use them: How to Use Custom States | Bubble. In this case I think their #6 is where to look.


Setup

  • Create a repeating group with a list of your selectable things from the database or option sets (I’m using option sets in my example but relevant functions will be the same).

  • Create a group in the first cell setting up how things will look when they aren’t yet selected. In my example I put a couple text elements inside the group as well.

  • Create a state somewhere on the page. I like to use the main page element because it is easy to find, but you could also attach this right to the repeating group.
    – Make the state your type of thing for your options
    – Check the ‘list’ box.
    – I called this state “selected” in my example.
    – This will make a state that will store a list of your things in the browser until you want to send them to the database with a workflow.


Workflows
You’ll need a workflows to add and remove things from the state when users click on the options.

  • Create one workflow that takes the option the user clicks on and adds (plus item) it to the ‘selected’ state. You can set the workflow to only trigger when the state doesn’t contain that option. This is done using the ‘set state’ action. Each time you’ll take the existing state as a starting place and then add or remove from that. (see screenshot below)
  • Copy/paste that workflow and flip it to the inverse. I.e. removes (minus item) the option from the state only when the state already contains that option.

Screenshot shows the workflow to remove, but it is just the inverse of the add :

To check if your workflows are working right you can add a text box on your screen fed with the “selected” state. This will help with any debugging.

Conditional appearance
Now that you’ve got your workflows set up you can build formatting from them.

I set up formatting for the group in the cell and each of the text elements, but you can do anything you want with the same conditionals.

By checking if the current cell’s thing is in the state you can decide how things should look:


Result

And here’s how it can look after the user clicks option 2:

BTW this general approach can be used for replacing checkboxes, radios, or anything like that to make custom interactions.


Saving to the server

I didn’t show it here, but basically you could create another workflow doing whatever you need with the selected state. E.g. when user clicks a save button you can reference the state to write what you need to the database.


Hope this helps, best of luck with your project!

-Adam

Wow!! Awesome ! Thank you so much for the detailed answer :rocket::rocket:

1 Like