Appmaker Input Form, change options based on earlier dropdown choices - google-app-maker

Question

Hypothetical:
Say i'm having someone order a cake and they choose vanilla or chocolate, and then they have to choose a frosting
if vanilla: strawberry or buttercream
if chocolate: mocha, dark chocolate or buttercream.
Right now the frosting value in the data model can accept all four options, so all four show up in the dropdown.
a) is there a way to change the binding for the second dropdown after the first is chosen?

Answer 1

This can be done without having the data saved in any datasource. Simply do the following...
Suppose the first dropdown is named primaryDropdown and the second dropdown is called secondaryDropdown. In the primaryDropdown options set the following:
["Vanilla", "Chocolate"]
Also, make sure to uncheck the option allowNull and on the onAttach event handler, place the following:
widget.value = "Vanilla";
Now we move on to the secondaryDropdown. Here, we will do a binding so place the following in the options value:
getAvailableOpts(#widget.root.descendants.primaryDropdown.value)
In the client script, we need to make sure that function exists so please paste the following in any client script:
function getAvailableOpts(primaryValue){
var options;
switch(primaryValue){
case "Vanilla":
options =["Strawberry","Buttercream"];
break;
case "Chocolate":
options = ["Mocha","Dark Chocolate","Buttercream"];
break;
default:
options = [];
}
return options;
}
From here, you are good; However we can still make it better. For that, make sure to also uncheck the allowNull option for the secondaryDropdown and then we need to add some logic in the onValueChange event handler of the primaryDropdown.
widget.root.descendants.secondaryDropdown.value = widget.root.descendants.secondaryDropdown.options[0];
References:
https://developers.google.com/appmaker/ui/input-widgets#dropdown
https://developers.google.com/appmaker/ui/binding#bindings
https://developers.google.com/appmaker/scripting/client#use_scripts_in_binding_expressions

Answer 2

Im guessing you set the dropdown "possible value" options in the data source and you have those fields as just string fields in your table.
the quick and dirty way to do this is go to the Cake drop down and on the Property Editor>Events>OnValueChange select Custom Action and use this Code
if(widget.value==="Vanilla"){
widget.root.descendants.Field.options = ['Strawberry','Buttercream'];
}else if (widget.value === "Chocolate"){
widget.root.descendants.Field.options = ['Mocha','Dark Chocolate','Buttercream'];
}
"Field" here is replaced with the name of the dropdown box for your frostings
also go to the property editor of the frostings dropdown and delete everything in the options field there.

Answer 3

I was trying to solve for a similar situation and created an additional table to serve as a lookup.
I have a drop down for CATEGORY with possible options set on the field in the main data source.
Then I have a second table with 2 Columns: CATEGORY, and SUB_CATEGORY.
On the entry form I have options for the SUB_CATEGORY drop down set to SUB_CATEGORY on the CATEGORY_MATRIX lookup table.
Then for an onValueEdit event on the CATEOGRY drop down I have a script to reload the CATEGORY_MATRIX table source based on the value of the CATEGORY drop down in the query so when the CATEGORY is selected only valid SUB_CATEGORY options are shown in the second drop down.
var datasource = app.datasources.CATEGORY_MATRIX
datasource.query.filters.CATEGORY._equals = newValue;
datasource.load();
There may be more efficient ways to do this but the benefit is I could create another form page and dynamically add new combos so there isn't any required code change as new combos are needed.