Cascading Dropdown UI Designer

Submitted by rtumminelli_1394599 on Wed, 08/25/2021 - 17:54
1
0
-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

UI Designer
JSON
#widgets
1 answer

Submitted by jerome.cambon_1... on Fri, 08/27/2021 - 13:53
1
0
-1

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

Comments

Submitted by rtumminelli_1394599 on Fri, 08/27/2021 - 15:38

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

Permalink
Submitted by jerome.cambon_1... on Fri, 08/27/2021 - 16:09

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.

Permalink
Submitted by rtumminelli_1394599 on Fri, 08/27/2021 - 16:11

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

Permalink
Submitted by jerome.cambon_1... on Fri, 08/27/2021 - 16:18

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

Permalink
Submitted by rtumminelli_1394599 on Fri, 08/27/2021 - 16:23

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

Permalink
Submitted by jerome.cambon_1... on Fri, 08/27/2021 - 17:07

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

Permalink
Submitted by rtumminelli_1394599 on Fri, 08/27/2021 - 17:33

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".

Permalink
Notifications