New to Bubble. Building my first app and I cannot figure out how to create a cascading multiple choice set in a form.
Here is what I am trying to accomplish:
When a multiple choice field has two or more options, and the user selects one option - depending on what option they choose, the next multiple choice field will display another set of choices that relate to the selection made in the first drop down. If they choose a different option in the first field, then the second field displays a different set of options that pertain to that choice.
Is this possible (I would be surprised if it isn’t)? And how can I accomplish it?
There are quite a few ways to accomplish this in Bubble, and the best way for your app is probably dependent upon a few other variables.
I’d recommend looking at showing/hiding questions as a solution. For example, you could have the 2nd question look as if it were 1 question but actually have a different set of drop downs (only 1 of which would be visible at a time based on which value is selected in question 1).
You may also be able to use conditional logic to change which values are available to be selected on the 2nd question – not 100% sure about this, but would be easy to check.
I suspect there’s also a way to run a workflow to set which answer choices are available in the 2nd question, etc.
You could probably make the 2nd drop down actually be a search field (but look and behave like a drop down for the most part) and that’d give you flexibility in what options are displayed (Search fields enable you to change what values are displayed as options).
These are just the ideas that immediately come to mind. As you work through the problem, I’d make sure to think about how you want the technology to respond in a few of the more common edge cases – for example, someone selects option A from Question 1 and then selects a value from question 2, but then changes question 1 to option B. Should that reset question 2 or keep their original answer. No need to get obsessed with edge cases though.
Welcome to Bubble! Hope this answer gives you some ideas. As you’ll quickly learn, there are lot of ways to do things in Bubble so creative problem solving unlocks many doors.
Thank you for the suggestions! I still have not been successful and will try to explain with more detail what I am trying to accomplish…
Field 1 - Product Type
Multiple choice drop down choices:
a) Clothing
b) Hard Goods
c) Jewelry
Field 2 - Shot Type
Multiple choice drop down choices with conditions:
If the selection of Field 1 is clothing, I want Field 2 to display the following multiple choice items:
a) Full mannequin
b) Half mannequin
c) Up board
d) Laydown
If the selection of Field 1 is Hard Goods, I want Field 2 to display the following multiple choice items:
a) Simple
b) Complex
c) Set
If the selection of Field 3 is Jewelry, I want Field 2 to display yet another set of multiple choice items and so on.
And if the user changes Field 1 before submitting the form, then Field 2 should reset and allow the user to select the set of choices that are dependent on the new choice.
I know it is possible in other platforms and have seen this feature built in (Ragic) and wicked simple to do. I will be dumbfounded if it isn’t possible in Bubble as this seems to be a very well thought out platform. However, I cannot for the life of me figure out the logic to accomplish this in Bubble.
I have tried the suggestions made so far and have not been successful. A search won’t cut it, at least that I can make work. The showing/hiding suggestion sounds promising, but I can’t seem to work that out either and conditional logic doesn’t seem to work either.
I know I am missing something (likely right in front of my face) and am hoping someone here can point it out.
It may not be built-in in Bubble, but Bubble is probably more flexible and powerful than anything that has this sort of thing built-in.
As @sridharan.s said, there will be many ways to do this. One way is to:
Create two Data Types in the database:
a) ProductType (fields: ref, name). ref will hold a, b, c etc. name will hold Clothing etc.
b) ShotType (fields: ref, name, product_type). product_type is of type ProductType
Add data in the above tables such that the ShotTypes point to their respective ProductTypes, so Simple points to Hard Goods and Laydown points to Clothing, for example.
Create a group on your page, let’s call it grpA with two sets of radio buttons, radioBtnA and radioBtnB.
Create two (or more) custom fields for grpA:
a) question (number) - to hold the current question - 1 is for Product Type and 2 is for Shot Type
b) answer1 (text) - to hold the answer to the ProductType question. You can add answer2, 3 etc if you want to do something with the answer to Shot Type and if you have more questions
Set the source of radioBtnA to be all ProductTypes, sorted by ref.
This is the important bit. Set the source of radioBtnB to be all ShotTypes whose product_type is equal to grpA’s ‘answer1’.
Use conditions to display either radio button depending on the question the user is on (grpA custom state: question)
Add a button that sets the state of grpA to 2, thus hiding rdioBtnA and showing radioBtnB
This helped tremendously. The visual reference allowed me to see the logic behind it. I was able to achieve the same result with drop downs instead of radio buttons. Thank you!
