Cascading Dropdown UI Designer

Q&A
1

Hello,

I am trying to create cascading dropdown functionality in the UI Designer that is driven off a JSON object and having trouble getting it to work. Is there an example of a form/page with select/combobox widget driven off of a JSON variable?

 

My JSON Looks like this:

{
    "Front-end": {
        "HTML": ["Links", "Images", "Tables", "Lists"],
        "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
        "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
    },
    "Back-end": {
        "PHP": ["Variables", "Strings", "Arrays"],
        "SQL": ["SELECT", "UPDATE", "DELETE"]
    }
}

 

My understanding is that if I wanted my Select Widget to display the "HTML" array as values, the value of "Available values" should just be set to JSON variable. Shouldn't my "Displayed key" just be "Front-end.HTML"? I've tried a bunch of different values and can't get anything to work.

 

Thanks for your help

2

Hello,
The issue is using a dash ‘-’ in the object key (“Front-end”, “Back-end”). 
var.Front-end is a subtraction expression, so it does not work. So removing the dash, it should work as expected.

HTH,
Jérome

3

Hi Jerome,

I changed the object key to "frontend" and "backend". my "Displayed key" is set to var.frontend and the select widget is still not being populated. Does it matter if displayed key is set to the function mode or not?

Thanks

4

Yes, you should bind the "Displayed Key" property to an expression, by clicking on the Fx symbol on the right.
Then, the "Expression or variable" place holder is displayed.

5

The widget is still not being populated, whether I set it to an expression or not.sad

6

What did you put in your "Displayed Key" property? If you json above is defined in a variable 'var', it should be var.frontend.HTML

7

"var.frontend.HTML" is exactly what I tried. I should be able to see the values when I preview the form, right?

8

Sorry I meant the "Available values" property. This is what I tried and it is working fine.

9

That does work. But what is the purpose of "Displayed key" then? My goal is to create a select widget with values driven from a different select widget. So, I want the first select widget values to be "HTML, CSS, Javascript" and then if the user chooses "HTML", the second select widget should show "Links","Images","Tables","Lists".