Need checkboxField to deselect options when certain options are selected.

I have an ask to make a checkbox field have the following logic. 

Checkbox has four items. If option ITEM 1 is selected then selection of ITEM 2, ITEM 3, ITEM 4 should be deselected automatically.

If options ITEM 2, ITEM 3, ITEM 4 are selected then option ITEM 1 should be deselected automatically.

Below code tracks the current values for the checkbox field in local!setA, previous values in local!setB, and the difference between the two sets which indicates what object the user just clicked in local!setDIFF.

The issue we are encountering is that when the deselection logic is triggered, I can see local!setA's value meets the requirement but the checkboxField UI doesn't. It still shows the options as selected when they have been removed from local!setA. User has to make another mouse click action like clicking around the page then the UI reflects the local!setA values.

Has anyone experienced a similar issue with checkboxField and were able to have the checkbox options refresh to match the local value?

a!localVariables(
  local!setA:null,
  local!setB:null,
  local!setDIFF:null,
  a!checkboxField(
    align:"LEFT",
    labelPosition:"COLLAPSED",
    choiceLayout:"COMPACT",
    choiceLabels:{"ITEM 1","ITEM 2","ITEM 3","ITEM 4"},
    choiceValues:{"ITEM 1","ITEM 2","ITEM 3","ITEM 4"},
    value: local!setA,
    saveInto: {
      a!save(local!setB,local!setA),
      a!save(local!setDIFF,difference(save!value,local!setB)),
      a!save(local!setA,
      if(
        contains(local!setDIFF,"ITEM 1"),
        {"ITEM 1"},
        difference(save!value,{"ITEM 1"}),
      )
      )
    }
  )
)

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    I can confirm this behavior - I assume this is an inherent effect of how the checkbox field is configured internally to behave.  Generally I don't think it's optimized with the assumption that its selected values will be altered procedurally (like you're doing) rather than by literal user clicks.  If this is causing you grief, I suggest you open an Appian support case and include the same sample code and description you've written here.

  • I'm curious about your use case - is the goal here to have item 1 show as "Select All" and also allow them to choose individual items? If that's the case, I'd probably suggest a different design pattern entirely to meet your goal. For instance, you could create a link that says "Select All" which would then save all of the selections at once. Then, if any item is deselected, you don't need to update any other checkboxes.

  • Due to this behavior of not updating until an additional click is made outside of the form, I'll typically implement a setup with multiple checkboxes, one for each option.  In this scenario, the updates are persisted as soon as you choose a value.  Try the example below.  This uses an interim local variable that always has the same length as the options, then the output variable rejects nulls for your final list.

    a!localVariables(
      local!options: {"ITEM 1","ITEM 2","ITEM 3","ITEM 4"},
      local!selected: repeat(count(local!options),null),
      local!selected_output: reject(fn!isnull,{local!selected}),
      {
        a!forEach(
          items: local!options,
          expression: a!checkboxField(
            choiceLabels: local!options[fv!index],
            choiceValues: local!options[fv!index],
            value: local!selected[fv!index],
            saveInto: {
              local!selected[fv!index],
              if(
                and(fv!isFirst,not(isnull(local!selected[1]))), /* Populating Item 1 */
                a!save(local!selected,{local!options[1],repeat(count(local!options)-1,null)}),
                if(
                  and(not(fv!isFirst),not(isnull(local!selected[fv!index]))), /* Populating Items 2-4 */
                  a!save(local!selected,{null,index(local!selected,2+enumerate(count(local!options)-1))}),
                  {}
                )
              )
            }
          )
        ),
        a!textField(
          label: "Selected (output): ", 
          value: local!selected_output, 
          readOnly: true
        )
      }
    )

  • Hi Chris, 

    Thanks for your checkbox example. The refresh should meet customer's ask.

  • Hi Peter, we can consider different design patterns because ITEM 1 represents a special selectable item. Not necessarily a select all but an mutually exclusive option from the rest of the check boxes.

  • Ok gotcha - the main thing I wanted to get at here is that the example provided below might provide the functionality you're looking for, but it also has the potential to be confusing. Personally I would find it confusing if certain options are conditionally selected or not selected, so sometimes it can be easier to split into multiple sets of checkboxes to ensure users fully understand the options.