How to create answer chips that can be pressed and unpressed

rachelb · 2024-08-29T18:07:10.358Z

I’m working on a questionnaire where the answers are displayed as chips. I need some questions to be single-choice and some multi-choice.

When a user taps the answer chip the color should change and the answer is saved in the database for that user. If they need to change their answer they should be able to tap the chip again and it reverts back to grey, with removing the answer from the data base.

I’ve figured out how to change the color of the chip when it’s pressed and save the data, but I can’t figure out how to make it multi-select and also revert things back if they tap/press it again. It’s kind of like I need the functionality to be like checkboxes but don’t want the UI to be a checkbox.

Screenshot 2024-08-29 at 1.33.29 PM758×343 17.5 KB

shabbirfaisal632 · 2024-08-29T18:14:15.478Z

You can use custom states for this. I have created the same feature in one of my application.

When someone click on any of the chip save them in a custom state, and when click again remove them from custom state.

georgecollier · 2024-08-29T18:17:32.080Z

Hey, welcome to the forum!

I’d approach it as follows:

Have an option set for your options. For example, ‘Gender’ with options for Woman, Man, and Non-Binary.
Display these in a Repeating Group of Genders.
Inside each RG cell, create a group that is rounded and has a text inside it (this is your chip).
Use a state or hidden group variable that is of type Gender. When a chip is clicked, run a workflow that sets the state to Current cell’s Gender / Parent group’s Gender, only when Current Cell’s Gender is not state’s Gender (the currently selected gender).
Have another workflow that resets the state when the Current Cell’s Gender is the state’s gender (it’s already selected).
Use conditional formatting (e.g when Current cell’s gender is state’s selected gender) to handle the colour changes in the text and border

You may need a custom event that returns yes/no for ‘is the current cell already selected’ and use that for working out whether to set a state or reset it - try it out and use the debugger if you have issues.

rachelb · 2024-08-30T00:46:26.444Z

How did you set up the custom state to know it was when they clicked it again? That’s the part I can’t seem to figure out. Thanks for your answer.

rachelb · 2024-08-30T01:51:55.069Z

I figured out how to show the different colors when it’s selected and then deselected. Thank you!
Now I have to figure out how it’s being saved in the database. It’s only saving one answer at a time, even though I can select multiple chips. If I deselect a chip the database doesn’t recognize that. It only updates when I click a different chip.

How can I get it to recognize when the chip is deselected and remove the data from the database?

And how can I set the answers to be either single-select or multi-select? (I have both types of questions in the questionnaire)

shabbirfaisal632 · 2024-08-30T10:04:10.395Z

i’ve created this test app for you, i’m talking about this type of functionality. Check this link below and let me know is it work for you or not.

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

rachelb · 2024-09-03T21:27:02.704Z

yes that’s what I’m looking to do! What type of workflow is needed to save the chips that are selected when clicking save? (and how do I update the database when an answer is changed)

rachelb · 2024-09-04T03:28:14.921Z

I found this youtube tutorial which helped me figure it out! https://youtu.be/cEcmRYVBCnc?si=YSZOoIBDAMzX0YlQ

shabbirfaisal632 · 2024-10-03T18:50:15.198Z

your problem solved???