How to create conditional checkbox ?

Question

Hi Community, 
 
 How can i make checkbox visible/hidden based on previous DropDown value. 
 For ex - I have dropdown field as Product having values - KFC, Pizzahut. 
 I have different checkboxes values if user selects KFC or Pizzahut. 
 How can i show different checbox dynamically after user selects dropdwon value. 
 I don't want to show all checkbox value and then hide. Based on the choice KFC/Pizzahut corresponding Checkbox options should dynamically come in form. 
 Here is the code that i am trying. Please help me with this. 
 
 if(
 ri!readOnly,
 a!textField(
 label: "Product",
 labelPosition: "ADJACENT",
 value: ri!record.productGroupAffected.value,
 readOnly: true
 ),
 a!dropdownField(
 label: "Product",
 labelPosition: "ABOVE",
 instructions: "",
 helpTooltip: "",
 placeholderLabel: "--- Select a Value ---",
 choiceLabels: local!productGroupAffectedOptions.value,
 choiceValues: local!productGroupAffectedOptions,
 value: ri!record.productGroupAffected,
 saveInto: ri!record.productGroupAffected,
 required: false
 )
 ),
 
	
 if(
 ri!record.productGroupAffected = "KFC",
 a!textField(
 label: "Tools Affected KFC",
 labelPosition: "ADJACENT",
 value: if(
 or(isnull(ri!record.toolsAffected), count(ri!record.toolsAffected.value)=0),
 "",
 joinarray(ri!record.toolsAffected.value, ", ")
 ),
 readOnly: true
 ),
 a!checkboxField(
 label: "Tools Affected KFC",
 labelPosition: "ABOVE",
 instructions: "",
 helpTooltip: "",
 choiceLabels: local!checkbox1Value,
 choiceValues: local!checkbox1Value,
 value: ri!record.toolsAffected,
 saveInto: ri!record.toolsAffected,
 required: false
 )
 ),
 
 if(
 ri!record.productGroupAffected = "PizzaHut",
 a!textField(
 label: "Tools Affected PizzaHut",
 labelPosition: "ADJACENT",
 value: if(
 or(isnull(ri!record.toolsAffected), count(ri!record.toolsAffected.value)=0),
 "",
 joinarray(ri!record.toolsAffected.value, ", ")
 ),
 readOnly: true
 ),
 a!checkboxField(
 label: "Tools Affected PizzaHut",
 labelPosition: "ABOVE",
 instructions: "",
 helpTooltip: "",
 choiceLabels: local!checkbox2Value,
 choiceValues: local!checkbox2Value,
 value: ri!record.toolsAffected,
 saveInto: ri!record.toolsAffected,
 required: false

 )
 ),

Mike Schmitt · Accepted Answer

Some of the advice you got in your previous thread would likely be beneficial here as well (for example, someone suggested reading up on the SAIL recipes), but I will take a shot at this new use case. 
 You haven't given much info on what you would want the different checkbox values to be, but I'll assume Pizza Hut gets one set of food options and KFC gets a completely separate set - and the values will dynamically change when one or the other is picked. 
 I'll create everything using LOAD and WITH variables so this can be copied and pasted into a new interface editor without needing to worry about RI values, etc. 
 load(

 local!restaurantChoices: {
 {id: 1, name: "KFC"}, 
 {id: 2, name: "Pizza Hut"}
 },
 local!selectedRestaurant,
 local!menuSelection: {},
 
 with(
 
 /* dynamically set the menu choices based on which restaurant is picked */
 local!menuChoices: if(
 isnull(local!selectedRestaurant),
 {},
 if(
 tointeger(local!selectedRestaurant) = 1,
 {
 "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy"
 },
 if(
 tointeger(local!selectedRestaurant) = 2,
 {
 "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks"
 },
 {}
 )
 )
 ),
 
 a!formLayout( 
 /* assuming 17.1 or prior, btw... if using 17.2, change this to a!formLayout_17r1 */
 
 firstColumnContents: {
 a!radioButtonField(
 label: "Chain:",
 labelPosition: "ADJACENT",
 choiceLabels: local!restaurantChoices.name,
 choiceValues: local!restaurantChoices.id,
 value: local!selectedRestaurant,
 saveInto: {
 local!selectedRestaurant,
 
 /* the below will clear the previous menu selection when the restaurant is changed */
 a!save(
 local!menuSelection,
 {}
 )
 }
 ),
 
 if(
 not(isnull(local!selectedRestaurant)),
 a!checkBoxField(
 label: "Make your food choices:",
 labelPosition: "ADJACENT",
 choiceLabels: local!menuChoices,
 choiceValues: local!menuChoices,
 value: local!menuSelection,
 saveInto: local!menuSelection
 ),
 {}
 )
 } 
 )
 )
) 
 Let me know if this is close to what you're after.

Mike Schmitt · Answer

Since it sounds like you're in 17.2 and have a!forEach available, I'll switch my example over to a 17.2 layout real quick. 
 In this updated version i've added one new LOAD variable, which at first is an empty set, but which we will populate with an array of dictionary data, where each dictionary entry will be like {item: "biscuits", size: 1}, where sizes are represented by a number array (1=small, 2=medium, 3=large). Also note that I've set it up to retain size selections even when menu items are selected and unselected, and even when the restaurant is changed. This can all be customized to your preference by tweaking the code as needed. 
 Note: just for fun, I've made each size selection appear in its own dynamic column, now that we're allowed to have an arbitrary number of columns on a form. 
 
 load( local!restaurantChoices: { {id: 1, name: "KFC"}, {id: 2, name: "Pizza Hut"} }, local!selectedRestaurant, local!menuSelection: {}, /* set up Menu Selection Sizes to be an array of dictionary - the CDT would resemble {item: "item name", size: sizeId} */ local!menuSelectionSizes: {}, with( /* dynamically set the menu choices based on which restaurant is picked */ local!menuChoices: if( isnull(local!selectedRestaurant), {}, if( tointeger(local!selectedRestaurant) = 1, { "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy" }, if( tointeger(local!selectedRestaurant) = 2, { "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks" }, {} ) ) ), a!formLayout( /* now assuming 17.2 or newer */ contents: { a!radioButtonField( label: "Chain:", labelPosition: "ADJACENT", choiceLabels: local!restaurantChoices.name, choiceValues: local!restaurantChoices.id, value: local!selectedRestaurant, saveInto: { local!selectedRestaurant, /* the below will clear the previous menu selection when the restaurant is changed */ a!save( local!menuSelection, {} ) } ), if( not(isnull(local!selectedRestaurant)), a!checkBoxField( label: "Make your food choices:", labelPosition: "ADJACENT", choiceLabels: local!menuChoices, choiceValues: local!menuChoices, value: local!menuSelection, saveInto: { a!save( local!menuSelection, /* this weird saveInto style will attempt to keep the saved value array in the same order as the initial checkboxes, since Appian versions 17.1 and later no longer do this automatically */ index( local!menuChoices, whereContains( save!value, local!menuChoices ) ) ) } ), {} ), a!columnsLayout( columns: a!forEach( local!menuSelection, with( local!currentIndex: wherecontains( fv!item, touniformstring(property(local!menuSelectionSizes, "item", {})) ), a!columnLayout( contents: { a!radioButtonField( label: "Select Size: '" & fv!item & "'", labelPosition: "ABOVE", /*instructions: "current index: " & local!currentIndex,*/ choiceLabels: {"Small", "Medium", "Large"}, choiceValues: {1, 2, 3}, value: property( index( local!menuSelectionSizes, local!currentIndex, {} ), "size", null() ), saveInto: { a!save( local!menuSelectionSizes, append( if( isnull(local!currentIndex), local!menuSelectionSizes, remove(local!menuSelectionSizes, local!currentIndex) ), { item: fv!item, size: save!value } ) ) } ) } ) ) ) ) } ) ) )

Mike Schmitt · Answer

I was able to get it working - basically it required somewhat different handling of the local variable being used to store sizes, storing it as an array instead of a singular in the local dictionary, and special handling for when the user de-selects back down to the empty set. 
 load(

 local!restaurantChoices: {
 {id: 1, name: "KFC"}, 
 {id: 2, name: "Pizza Hut"}
 },
 local!selectedRestaurant,
 local!menuSelection: {},
 
 /* set up Menu Selection Sizes to be an array of dictionary -
 the CDT would resemble {item: "item name", size: sizeId} */
 local!menuSelectionSizes: {},
 
 with(
 
 /* dynamically set the menu choices based on which restaurant is picked */
 local!menuChoices: if(
 isnull(local!selectedRestaurant),
 {},
 if(
 tointeger(local!selectedRestaurant) = 1,
 {
 "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy"
 },
 if(
 tointeger(local!selectedRestaurant) = 2,
 {
 "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks"
 },
 {}
 )
 )
 ),
 
 a!formLayout( 
 /* now assuming 17.2 or newer */
 
 contents: {
 a!radioButtonField(
 label: "Chain:",
 labelPosition: "ADJACENT",
 choiceLabels: local!restaurantChoices.name,
 choiceValues: local!restaurantChoices.id,
 value: local!selectedRestaurant,
 saveInto: {
 local!selectedRestaurant,
 
 /* the below will clear the previous menu selection when the restaurant is changed */
 a!save(
 local!menuSelection,
 {}
 )
 }
 ),
 
 if(
 not(isnull(local!selectedRestaurant)),
 a!checkBoxField(
 label: "Make your food choices:",
 labelPosition: "ADJACENT",
 choiceLabels: local!menuChoices,
 choiceValues: local!menuChoices,
 value: local!menuSelection,
 saveInto: {
 a!save(
 local!menuSelection,
 /* this weird saveInto style will attempt to keep the saved value array in the same order as the
 initial checkboxes, since Appian versions 17.1 and later no longer do this automatically */
 index(
 local!menuChoices,
 whereContains(
 save!value,
 local!menuChoices
 )
 )
 )
 }
 ),
 {}
 ),
 a!columnsLayout(
 columns: a!forEach(
 local!menuSelection,
 with(
 local!currentIndex: wherecontains(
 fv!item,
 touniformstring(property(local!menuSelectionSizes, "item", {}))
 ),
 a!columnLayout(
 contents: {
 a!checkboxField(
 label: "Select Size: '" & fv!item & "'",
 labelPosition: "ABOVE",
 choiceLabels: {"Small", "Medium", "Large"},
 choiceValues: {1, 2, 3},
 value: tointeger(
 property(
 index(
 local!menuSelectionSizes,
 local!currentIndex,
 null()
 ),
 "sizes",
 null()
 )
 ),
 saveInto: {
 a!save(
 local!menuSelectionSizes,
 append(
 if(
 isnull(local!currentIndex),
 local!menuSelectionSizes,
 remove(local!menuSelectionSizes, local!currentIndex)
 ),
 if(
 apn_isEmpty(save!value),
 /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
 {},
 {
 item: fv!item,
 sizes: save!value
 }
 )
 ) 
 )
 }
 )
 }
 )
 )
 )
 ),
 
 /*a!paragraphField(*/
 /*label: "debug",*/
 /*value: local!menuSelectionSizes*/
 /*),*/
 
 {}
 } 
 )
 )
)

Mike Schmitt · Answer

Since I'm feeling generous, I went back to my old example and converted it to be able to store its saved values in a new CDT containing fields pretty much exactly like yours: 
 
 I'm doing the JSON conversion like I referenced in my prior reply - notice that I created a new WITH variable which checks whether there's any value in the "Size" array (in your version that would be "NodesAffected"), and if so, translates each one back from a JSON string to dictionary data (like was originally used in my original version); then in the checkbox field, it uses this local variable for display, but saves directly into ri!menuSelectionCdt.Size (converting the saved values into a JSON string prior to storing them in the text varray). You should be able to translate this pretty much directly into your use case. 
 load(

 local!restaurantChoices: {
 {id: 1, name: "KFC"}, 
 {id: 2, name: "Pizza Hut"}
 },
 local!selectedRestaurant,
 local!menuSelection: {},
 
 /*local!menuSelectionSizes: {},*/
 
 with(
 
 /* dynamically set the menu choices based on which restaurant is picked */
 local!menuChoices: if(
 isnull(ri!menuSelectionCdt.RestaurantSelected),
 {},
 if(
 tointeger(ri!menuSelectionCdt.RestaurantSelected) = 1,
 {
 "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy"
 },
 if(
 tointeger(ri!menuSelectionCdt.RestaurantSelected) = 2,
 {
 "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks"
 },
 {}
 )
 )
 ),
 
 
 /* set up Menu Selection Sizes to be an array of dictionary -
 the format will resemble this: 
 {
 item: "item name",
 size: {sizeIds}
 }
 */
 
 /* NEW: so we can store these selections safely in a TEXT cdt value, we 
 will convert them to JSON strings for storage in the CDT, and back
 into dictionary data for use in the form. */ 
 local!menuSelectionSizes: if(
 apn_isEmpty(ri!menuSelectionCdt.Size),
 {},
 apply( /* since there will be a separate JSON string for each menu selection */
 a!fromJson,
 ri!menuSelectionCdt.Size
 )
 ),
 
 a!formLayout( 
 /* now assuming 17.2 or newer */
 
 contents: {
 a!radioButtonField(
 label: "Chain:",
 labelPosition: "ADJACENT",
 choiceLabels: local!restaurantChoices.name,
 choiceValues: local!restaurantChoices.id,
 value: ri!menuSelectionCdt.RestaurantSelected,
 saveInto: {
 ri!menuSelectionCdt.RestaurantSelected,
 
 /* the below will clear the previous menu selection when the restaurant is changed */
 a!save(
 ri!menuSelectionCdt.MenuSelections,
 {}
 )
 }
 ),
 
 if(
 not(isnull(ri!menuSelectionCdt.RestaurantSelected)),
 a!checkBoxField(
 label: "Make your food choices:",
 labelPosition: "ADJACENT",
 choiceLabels: local!menuChoices,
 choiceValues: local!menuChoices,
 value: ri!menuSelectionCdt.MenuSelections,
 saveInto: {
 a!save(
 ri!menuSelectionCdt.MenuSelections,
 /* this weird saveInto style will attempt to keep the saved value array in the same order as the
 initial checkboxes, since Appian versions 17.1 and later no longer do this automatically */
 index(
 local!menuChoices,
 whereContains(
 save!value,
 local!menuChoices
 )
 )
 )
 }
 ),
 {}
 ),
 a!columnsLayout(
 columns: a!forEach(
 ri!menuSelectionCdt.MenuSelections,
 with(
 local!currentIndex: wherecontains(
 fv!item,
 touniformstring(property(local!menuSelectionSizes, "item", {}))
 ),
 a!columnLayout(
 contents: {
 a!checkboxField(
 label: "Select Size: '" & fv!item & "'",
 labelPosition: "ABOVE",
 choiceLabels: {"Small", "Medium", "Large"},
 choiceValues: {1, 2, 3},
 value: tointeger(
 property(
 index(
 local!menuSelectionSizes,
 local!currentIndex,
 null()
 ),
 "sizes",
 null()
 )
 ),
 saveInto: {
 a!save(
 ri!menuSelectionCdt.Size,
 append(
 if(
 isnull(local!currentIndex),
 ri!menuSelectionCdt.Size,
 remove(ri!menuSelectionCdt.Size, local!currentIndex)
 ),
 if(
 apn_isEmpty(save!value),
 /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
 a!toJson({}),
 a!toJson(
 {
 item: fv!item,
 sizes: save!value
 }
 )
 )
 ) 
 )
 }
 )
 }
 )
 )
 )
 ),
 
 a!paragraphField(
 label: "(debug info)",
 value: "Menu Selection Size choices converted back from JSON: " & char(10) & local!menuSelectionSizes
 ),
 
 {}
 } 
 )
 )
)

Mike Schmitt · Answer

One initial issue I see in your code & cdt definition is: when you're saving into ri!CCC.NodesAffected, my original rule is assuming the local variable (local!menuSelectionSizes) is capable of holding dictionary data - i'm saving {item: fv!item, sizes: save!value} -- you're doing the same thing (except turned into Tool/Nodes), except the data type you're saving it into is Text, not Dictionary or CDT or "Any Type". 
 
You might want to consider making a new CDT consisting of the fields "Tool" (single) and "Nodes" (multiple), and switching the NodesAffected property in your original CDT to be of that new type (also multiple). After that your saves might work. 
 
If you have the need to not do a nested CDT, however, you could also consider converting the value being saved into a JSON string, which you can store in a single text field like your CDT already has, except that would require conversion to be done both at saving and at loading time.