How to design dynamic form ?

Question

Hi Community, 
 
 I am very new to Appian tool and i am building a form but i want the form to be dynamic i.e. i want to change the options based on previous selection. 
 Please see the below image.

If user selects PECVD from dropdown menu then the checkbox just below it must have some values and user selects SABRE from dropdown list then it must show some different set of values for checkbox. 
 Similary if user selects a value from Checkbox a new dynamic checkbox should come saying Node affected C4 or Node affected SOLA etc. (Note here i want the label to be dynamic as well) based on upper checkbox list value. How should i do it? Where i should write rules for this ?

Jason Ruvinsky · Accepted Answer

I recommend taking a look through the SAIL Recipes in the documentation - they do a good job at going through many different interface use-cases, and explaining how to build them.

aloks0189 · Answer

Hi prup1852 you can follow the below code for your requirement, I tried making it less complex, by simply making use of multiple if(), so as per your requirement you can enhance this code in future, once you get the good hands on SAIL. 
 
 load(
 local!dropdownValue: {"PECVD","SABRE"},
 local!checkbox1Value: {"PECVD1","PECVD2","PECVD3"},
 local!checkbox2Value: {"SABRE1","SABRE2","SABRE3"},
 local!typeInput,
 local!checkbox1Input,
 local!checkbox2Input,
 local!nodeCheckbox,
 with(
 local!nodeValue: if(
 isnull(local!checkbox1Input),
 local!checkbox2Input,
 local!checkbox1Input
 ),
 a!formLayout(
 label: "Basic Form",
 contents: {
 a!dropdownField(
 label: "Type",
 placeholderLabel: "-- select --",
 choiceLabels: local!dropdownValue,
 choiceValues: local!dropdownValue,
 value: local!typeInput,
 saveInto: {
 local!typeInput,
 a!save(local!nodeValue,null())
 },
 required: true()
 ),
 if(
 local!typeInput = "PECVD",
 a!checkboxField(
 label: "Options",
 choiceLabels: local!checkbox1Value,
 choiceValues: local!checkbox1Value,
 value: local!checkbox1Input,
 saveInto: {
 local!checkbox1Input,
 a!save(local!checkbox2Input,null())
 }
 ),
 {}
 ),
 if(
 local!typeInput = "SABRE",
 a!checkboxField(
 label: "Options",
 choiceLabels: local!checkbox2Value,
 choiceValues: local!checkbox2Value,
 value: local!checkbox2Input,
 saveInto: {
 local!checkbox2Input,
 a!save(local!checkbox1Input,null())
 }
 ),
 {}
 ),
 if(
 and(
 isnull(local!checkbox1Input),
 isnull(local!checkbox2Input)
 ),
 {},
 a!checkboxField(
 label: "Node effected " & local!nodeValue,
 choiceLabels: {"Node1", "Node2", "Node3"},
 choiceValues: {"Node1", "Node2", "Node3"},
 value: local!nodeCheckbox,
 saveInto: local!nodeCheckbox
 )
 )
 }
 )
 )
) 
 
 Hope this will help you..