Hi all, I have a use case that I think is pretty simple. I have two combo boxes (string selectors). The second combo box depends on the first combo box. That is, if the first combo box has no selection, the second combo box should be hidden or disabled. Additionally, the items available in the second combo box depend on the selected item in the first combo box.
In an ideal world, I would put the two combo boxes in the same section using the Toolbar layout. Clearing the selection in the first combo box would hide or disable the second combo box. Changing the selection in the first combo box would clear the second combo box’s selection.
Here are the limitations as I understand it:
- You cannot conditionally disable or hide a string selector
- There is no way to listen for selection events on a string selector
- A string selector’s selected value does not clear when its items change. This means it can have a selected value that does not match any of its items.
Is that all accurate?
As a workaround, I am using the conditional visibility feature for sections so I can hide the second combo box. This is a solid workaround for now. That said, it does mean I can’t use the Toolbar layout so the section is a little taller and the combo boxes are not next to each other.
The one minor problem I haven’t solved is figuring out if I can clear the second combo box’s selection when the first combo box’s selection changes. Is there a way to do that?
Thanks,
David
Hey,
The String selector widget can accept either a static list or a String Array variable. It will also output a new variable of type String storing whatever value a user selects.
To implement your feature, you can do the following:
- Add your first
String selector widget (let’s call this Widget A) –> define its options –> rename its output String variable so it’s easy to follow your variable logic (i.e., (s) Dropdown 1 User Selection)
- If you have N defined options for your first
String selector widget, you will end up creating N + 1 String Array variables, where N of them are defined statically and the extra one will be a Variable transformation (see screenshot below).
- For each of the N static String Array variables, add elements that represent the expected options for any selected option from Widget A.
- For the last String Array variable, use the *String “Is” *comparison to return a local boolean (i.e., true/false) for if the value of (s) Dropdown 1 User Selection is exactly one of your pre-defined options for Widget A. Finally, add the If/Else statement transform to map which static String Array variable should be used for this new, dynamic String Array variable (let’s call this (s-a) Dropdown 2 Dynamic Options).
- Add your second
String selector widget in an adjacent section (let’s call this Widget B and hide the section header) and set its Option Generation configuration to Variable –> (s-a) Dropdown 2 Dynamic Options.
- In the section that Widget B is contained within, turn on conditional visibility and set it to a new Boolean variable (of type Variable transformation) which checks if the value of (s) Dropdown 1 User Selection is null/undefined.
Alternative section config instead of Toolbar layout:
Re: the third limitation listed – a close workaround (albeit not perfect if end users don’t follow it) is to add a Button group widget whose on click behavior is set to event. You can then add two events that clear the output variables for both String selector widgets. If you set it to clear just Widget A’s output, that’s technically fine since conditional visibility settings will hide Widget B, but it may still retain its last selected value so you probably want to add the second event anyway. Unfortunately, this isn’t foolproof as end users may still click on the X within Widget A to clear its output variable and this unfortunately would circumvent the clearing of Widget B’s output variable.
Hope this helps!
2 Likes
Hi @joshOntologize , thanks for your post!
I have the string selectors working together as far as a selection in the first selector properly updating the options in the second selector.
When it comes to the alternative section config, how do you get (3) to fill all that space?
When it comes to clearing the string selector selections, I like the button idea but I agree that if the users don’t bother with the button, then it won’t work so well.
Thank you again for your help!
David
For (3) to fill in the remaining space, set its display to Flex (same concept as CSS Flexbox!) — because all three are nested inside an outer section whose layout is columns, setting it to Flex (as opposed to Auto or Absolute) will make it occupy as much space as it can take on the screen regardless of screen dimension!
1 Like
