Question

Checkbox as Radio button functionality

Forum|Forum|2 years ago
October 20, 2023
6 replies
0 views

Hi everyone!

I'd like to explain my issue. I have a Record Type for Drivers, and one of its attributes is a boolean called "Primary driver." I've created an interface named "Driver" for entering information about a single driver, including a description, summary, and metrics. To allow users to mark a driver as the "Primary Driver," I've implemented a checkbox.

Additionally, I have a parent interface named "Multiple Drivers," where users can add up to 5 drivers or remove them. I've used a foreach loop to generate sections for each driver using the child interface. My main challenge is that I want users to be able to select only one driver as the "Primary driver." I'd like the checkboxes for each child interface in "Driver" to function as a group, similar to radio buttons. I want the selection to work smoothly, and users should not have to click again on an active checkbox to deactivate it.

I attempted to manage value changes, but they are saving as "true" and don't change to "false" when I select another checkbox. As you can see in the image, the values deactivate and change, but the "Primary" indicator for each driver object remains "true."

stefanhelzle0001

Brainy

Did you try to add a a!save() to the saveInto of the checkbox field that just cleans that field? Do that before storing the current value and you should be good.

mikes0011

Brainy

I attempted to manage value changes, but they are saving as "true" and don't change to "false" when I select another checkbox.

It should be possible with some (carefully implemented) semi-advanced a!save() coding. To help you understand what you may be missing though, we'd really need to see that snippet of your current code (please remember to use a Code Box for code of any length so it maintains indentation, etc).

mikes0011

Brainy

For instance I was able to whip up this quick example where 3 pre-defined, simplified, "driver" array members all have a "isPrimary" element and when any of them is set to true, the others are all set to false.

a!localVariables(
  local!drivers: {
    a!map(id: 1, name: "Mike", isPrimary: false()),
    a!map(id: 2, name: "Stefan", isPrimary: true()),
    a!map(id: 3, name: "Yaha", isPrimary: false())
  },
  
  a!forEach(
    local!drivers,
    
    a!localVariables(
      local!currentDriverId: fv!item.id,
      a!boxLayout(
        label: "Driver " & local!currentDriverId,
        marginBelow: "STANDARD",
        contents: {
          a!textField(
            label: "Name",
            required: true(),
            value: fv!item.name,
            saveInto: fv!item.name
          ),
          a!checkboxField(
            choiceLabels: {"Primary"},
            choiceValues: {true()},
            value: if(fv!item.isPrimary, true(), null()),
            saveInto: {
              a!save(
                local!drivers.isPrimary,
                a!forEach(
                  local!drivers,
                  if(
                    fv!item.id = local!currentDriverid,
                    if(save!value, true(), false()),
                    false()
                  )
                )
              )
            }
          )
        }
      )
    )
  )
)

J

jaydeom0001

Hi Mike, I tried to use this logic for value and saveInto parameters in my code, But still am not able to store the selected answers in local. Kindly guide me for this case where multiple answers can be selected for a question.

a!localVariables(
  local!question: split(rule!MWJ_qe_multiCorrect_fetchQuestion(), ";"),
  local!option: split(rule!MWJ_qe_multipleCorect_options(), ";"),
  local!numberOfAnswers: 4,
  local!correctAnswer: rule!MWJ_qe_MultiCorrect_CorrectAnswer(),
  local!selectedAnswer: rule!MWJ_QE_MultiCorrectOption_SelectedAnswer(),
  local!Temp: stripwith(
    local!selectedAnswer.SelectedAnswer,
    "ZYWX[]:"
  ),
  /*local!result: intersection(local!correctAnswer, local!Temp),*/
  /*local!score: length(local!result),*/

  local!submit: false,
  {
    a!sectionLayout(
      label: "Exam",
      contents: {
        a!forEach(
          items: local!question,
          expression: a!localVariables(
            local!currentQuestion: fv!index,
            {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {a!checkboxField(
                      choiceLabels: {
                        a!forEach(
                          items: enumerate(local!numberOfAnswers),
                          expression: index(
                            split(stripwith(local!option, "[]ZYWX:"), ","),
                            if(
                              local!currentQuestion = 0,
                              fv!index,
                              fv!index + local!numberOfAnswers * (local!currentQuestion - 1)
                            )
                          )
                        )
                      },
                      choiceValues: {
                        a!forEach(
                          items: enumerate(local!numberOfAnswers),
                          expression: index(
                            split(local!option, ","),
                            if(
                              local!currentQuestion = 0,
                              fv!item,
                              fv!index + local!numberOfAnswers * (local!currentQuestion - 1)
                            )
                          )
                        )
                      },
                      label: fv!index & ".  " & fv!item,
                      labelPosition: "ABOVE",
                      
                      
                      value: local!selectedAnswer.SelectedAnswer[local!currentQuestion],
                      saveInto:
                      a!save(
                        local!selectedAnswer.SelectedAnswer[local!currentQuestion],
                        save!value
                      ),
                      
                      
                      validations: {},
                      choiceLayout: "STACKED",
                    )},)
                  
                },
                alignVertical: "TOP"
              ),
              a!sectionLayout(
                label: "",
                contents: {
                  a!richTextDisplayField(
                    label: "Correct Answer : ",
                    labelPosition: "ABOVE",
                    value: a!richTextItem(
                      text: {
                        a!forEach(
                          items: local!currentQuestion,
                          expression: index(
                            local!correctAnswer,
                            if(
                              local!currentQuestion = 0,
                              "",
                              fv!index + 1 * (local!currentQuestion - 1)
                            )
                          )
                        )

                      },
                      color: "POSITIVE",
                      size: "MEDIUM",
                      style: "EMPHASIS"
                    ),
                    showWhen: local!submit

                  )

                }
              )

            }

          )
        )
      },
      marginBelow: "STANDARD"

    ),
    /*a!timeDisplayField(*/
    /*label:"Time Lapsed",*/
    /*value:time(now())*/
    /*),*/
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Check Score",
          icon: "thumbs-up",
          iconPosition: "END",
          saveInto: {

            /*a!save(local!submit, save!value),*/
            /*a!save(ri!score.score,local!score)*/
          },
          /*submit: true,*/

          style: "GHOST"
        ),
        a!buttonWidget(
          label:"close",
          value:"close",
          saveInto: ri!buttonAction,
          submit:true,
          style: "SOLID"


        )

      },
      align: "CENTER"

    ),
    a!sectionLayout(
      labelColor: "POSITIVE",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "ADJACENT",

                  value:{a!richTextItem(
                    text: "Your Score is  ",
                    color: "ACCENT",
                    size: "LARGE",
                    style: "STRONG"

                  ),
                  a!richTextItem(
                    /*text: { local!score },*/
                    color: "ACCENT",
                    size: "LARGE",
                    style: "STRONG"


                  )},
                  showWhen: local!submit,
                  marginAbove: "STANDARD"

                )
              }
            )

          }
        )
      },
      isInitiallyCollapsed: true,
      dividerWeight: "MEDIUM",
      dividerColor: "ACCENT",
      marginAbove: "STANDARD"
    )


  }
)

abhayd3663

See if it helps - Configure a Boolean Checkbox - Appian 23.4

Sign up

Login with SSO

Login to the community

Login with SSO