Saving Primary and Secondary dropdown data?

Hi,

My users can select some data from a dropdown, but depending on the selection, I need to show a secondary dropdown. For example, suppose the first primary dropdown has the following options;

1 ,2 ,3.

If they select ‘1’, I need to present ‘apple’ in the secondary dropdown.
If they select ‘2’, I need to present ‘banana’ in the secondary dropdown.
If they select ‘3’, I need to present ‘apple’ and ‘banana’ in the secondary dropdown.

What is the simplest way to populate the secondary dropdown?

Just constrain the search of the second dropdown by the value of the first. Or you can use a list.

If the options of both dropdowns are not somehow connected (like in your example :sweat_smile:), you will need to do it manually using the conditional tab, changing the source of your second dropdown depending on the answer given in the firs one.

But if you can use the result of your first dropdown to filter the options to be displayed in the second one, well… it will be easier

Not sure what you mean by connected?

Thank you. Rather than fruits, my actual drop-downs refer to a window cill’s “projection” and “height”. The allowed heights are dependent on the chosen projection value.

I have created an option set called “Projection” and added an attribute called ‘Height’ with the heights for each projection value:

height

The secondary “Height” dropdown is populated from the “Projection’s” attribute;

The goal is to save the drop down values to the page’s custom state. The Project value does save but the Height does not? Both are saved in the same way.

I have created an option set called “Projection” and added an attribute called ‘Height’ with the heights for each projection value:

I wouldn’t use a list of texts for this personally (I’d stick to options)…

The secondary “Height” dropdown is populated from the “Projection’s” attribute;

The data source for your second dropdown is not correct (unless you actually do want it to display ALL the heights? which is the opposite of your original question…) Surely you need to constrain the Dropdown choices by the value of the first dropdown?..

The Project value does save but the Height does not? Both are saved in the same way.

Have you actually selected a Height in the dropdown (not just the default value, which will presumably be empty)? And what does the relevant workflow look like (the one you posted the screenshot for is for a different dropdown)…

Also, for what reason do you need to save those values into custom states? (the dropdown’s already hold the values, until they are changed. But you’re updating the custom state value anytime they change?.. isn’t that redundant?)

Thank you for your reply. Regarding the question of ‘list’ vs ‘option’ I want to be clear on something; the first dropdown “Projection” has 3 options:

  • 30mm
  • 45mm
  • 55mm

Each of these options present a different set of “Height” values to choose from which are displayed in the second dropdown. Below is how I am saving the Height attribute, but what you mean is I should have 3 separate option sets for each of the options?

The data source for your second dropdown is not correct (unless you actually do want it to display ALL the heights? which is the opposite of your original question…) Surely you need to constrain the Dropdown choices by the value of the first dropdown?..

Yes you are correct but I can’t figure how to do it?

Have you actually selected a Height in the dropdown (not just the default value, which will presumably be empty)? And what does the relevant workflow look like (the one you posted the screenshot for is for a different dropdown)…

Yes I have. Sorry, the correct workflow shown below:

Also, for what reason do you need to save those values into custom states? (the dropdown’s already hold the values, until they are changed. But you’re updating the custom state value anytime they change?.. isn’t that redundant?)

The reason is simply because everything else in the ‘window designer’ page relies on custom states so I am just following the same method. I am willing to try anything, hoping for the absolute simplest solution.

It’s not ‘list’ vs ‘option’, it’s ‘text’ vs ‘option’…

I try to avoid using texts as much as possible, as it just make more work for yourself (texts don’t hold any value aside from the text value, so if you want to do anything with it you have to do more work). An option can hold various attributes, and is much easier to access in the editor (and also minimizes human errors like typos etc.).

but what you mean is I should have 3 separate option sets for each of the options?

umm… no (although I’m not sure I understand what you mean by that?)… why would you have an option set for each option?

You’ve got 2 dropdowns, so 2 option sets would seem to be the most logical approach… but you could just as easily use 1 (especially if the options have the same attributes).

Yes you are correct but I can’t figure how to do it?

Assuming the Options in dropdown 1 each have a list of Option2s, then the datasource for your second dropdown should just be Dropdown 1's Value's Option 2s

If you’re not using lists, but connecting the options the other way (i.e. to a parent option), then use All Option2s filtered: parent option - dropdown 1's Option.

The reason is simply because everything else in the ‘window designer’ page relies on custom states so I am just following the same method. I am willing to try anything, hoping for the absolute simplest solution.

Can’t you just refer to the dropdown values themselves (especially since you’re changing the custom state value to match the dropdown’s value any time the dropdown value changes - so they will always be the same, so there doesn’t seem much point duplicating the value in a custom state)

Assuming the Options in dropdown 1 each have a list of Option2s, then the datasource for your second dropdown should just be `Dropdown 1’s Value’s Optio

That is how I previously had it but it wouldn’t work for some reason. I am sure it is something simple I am doing wrong, but for absolute clarity, below is all the options which I need to save to the database, I don’t care how they are saved, with or without custom state is fine. If I were to create only two option sets, as you mentioned, how does that work seeing as there are 3 sets of numbers?

30mm (Projection Dropdown)
Height options:
85mm
120mm
150mm
160mm
180mm
200mm
220mm

45mm (Projection Dropdown)
Height options:
160mm
200mm

55mm (Projection Dropdown)
Height options:
165mm

The simplest option I may end up using is to literally have 3 dropdowns for the Height and show/hide based on the first dropdowns input. I know this is not ‘clean’ but it will work.

I would just use a single Option Set for the measurements (2 is unnecessary), and another to denote which type it belongs to (although you could use a text or a number for that in this case, if you don’t want to have too many option sets).

But this is what I would do:

Option Set 1:

Name: Measurement Type
Attributes: Display
Options:
Projection
Height

Option Set 2:

Name: Measurement
Attributes: Display, Measurement (Number), Types (list of Measurement Types), Child Measurements (list of measurements).
Options:
30mm
45mm
55mm
85mm
120mm
150mm
160mm
165mm
180mm
200mm
220mm

Here’s a simple example:

Measurements Dropdowns (bubbleapps.io)

You could simplify it even further, and do away with the second option set, by simply showing only measurements who’s child measurements isn’t empty in the first dropdown (instead of using the measurement type option), or you could use a text or a number for the same purpose, but I like to do it this way as it makes things easier to organise (especially if you have more than just two uses for theses options).

Or, of course, you could use two option sets - one for projections and one for heights, but that seems a bit redundant to me.

1 Like

That’s fantastic, thank you for the explanation and the demo link - yes, you have nailed it spot on. I am going to look at how you did this and try and learn from it…

@adamhholmes Thank you again for this … I’m sure it took you a bit of time to prepare the demo and it really helped, very appreciative. I have set it up and it’s working, I understand the method behind it and will try and use the same logic when dealing with similar dropdown pairs, of which I will have more.

1 Like

I really like the way you did it because I realised the Projection values I gave you are in fact Height values! However, it was very easy to correct this in the option sets :+1:

1 Like

Prior to saving the primary and secondary dropdown data using your method I experienced two odd issues, that’s why I needed a new solution - well, the two issues remain.

What I want

  • The dropdowns should show values as default when the page is loaded for the first time
  • There is a text heading which should show the dropdown value

To show default value I set a state on page (note: I can add a default value but it makes no difference, the problem persists).

state

Then set the value for that state;

The dropdown should show the state value but it is always empty?

The following text is also empty always, even when changing the drop downs values;

text

Regarding your first issue (default value not working)…

You’re setting the cill_heigh custom state value to 160mm…

But that’s not one of the Dropdown choices (i.e. it’s not a Height Measurement, it’s a Projection Measurement), hence why it’s not holding any value…

The default value MUST be a valid choice from the choices source for it to work.

As for your second problem (the text not being visible)…

The text element is simply too small to display the text within it - you’ve set a max width of 100px, which is too small for the text - so it simply doesn’t display.

Change the max width of the text element to 121px and it should be visible. (better still, remove the max width altogether, just to be safe).

1 Like

Oh man I am such a dummy, of course I switched them around in the option set yesterday! I am amazed you spotted this seeing as I only briefly mentioned I switched them, you have a big brain sir!

The text element is simply too small to display

You are correct, and again well spotted. I would have thought at least some of the text would have shown … but all sorted now.

Both issues fixed - thank you so much.