Skip to main content
O
oludareo0002
January 13, 2022
Solved

Buttons that toggle state of other buttons

  • January 13, 2022
  • 2 replies
  • 0 views
Currently have 3 buttons that show and hide 3 separate sections of code. 

If I click button 1 I want to disable button 1 and leave button 2 and 3 enabled. 

If I click button 2 after clicking button 1 I want button 1 to reset and for button 2 to be disabled. 

Appreciate the help in advance!

a!localVariables(
local!buttonTierOne: false(),
local!buttonTierTwo: false(),
local!buttonTierThree: false(),
local!buttonRest: true(),

a!formLayout(
label: "Label",
a!sectionLayout(
contents: {
a!sectionLayout(
label: "",
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!boxLayout(
label: "",
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextItem(
text: {
"Submit Tier 1 "
},
size: "MEDIUM_PLUS"
),
char(10),
a!richTextItem(
text: {
"Service Output Form"
},
size: "MEDIUM_PLUS"
)
},
align: "CENTER"
),
a!buttonArrayLayout(
buttons: {
a!buttonWidget(
label: "Start",
icon: "file-text-o",
value: true(),
saveInto: {local!buttonTierOne, a!save(local!buttonRest,false())},
submit: false(),
disabled: if (local!buttonTierOne, true, false), style: "PRIMARY",
validate: true()
)
},
align: "CENTER"
)
},
style: "ACCENT",
marginBelow: "STANDARD"
)
}
),
a!columnLayout(
contents: {
a!boxLayout(
label: "",
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextItem(
text: {
"Submit Tier 2 "
},
size: "MEDIUM_PLUS"
),
char(10),
a!richTextItem(
text: {
"Additional Request Form"
},
size: "MEDIUM_PLUS"
)
},
align: "CENTER"
),
a!buttonArrayLayout(
buttons: {
a!buttonWidget(
label: "Start",
icon: "file-text-o",
value: true(),
saveInto: local!buttonTierTwo,
submit: false(),
style: "PRIMARY",
validate: true()
)
},
align: "CENTER"
)
},
style: "ACCENT",
marginBelow: "STANDARD"
)
}
),
a!columnLayout(
contents: {
a!boxLayout(
label: "",
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextItem(
text: {
"Submit Tier 3"
},
size: "MEDIUM_PLUS"
),
char(10),
a!richTextItem(
text: {
"Service output Form"
},
size: "MEDIUM_PLUS"
)
},
align: "CENTER"
),
a!buttonArrayLayout(
buttons: {
a!buttonWidget(
label: "Start",
icon: "file-text-o",
value: true(),
saveInto: local!buttonTierThree,
submit: false(),
style: "PRIMARY",
disabled: local!buttonTierThree,
validate: true()
)
},
align: "CENTER"
)
},
style: "ACCENT",
marginBelow: "STANDARD"
)
}
)
}
)
},
divider: "BELOW",
dividerWeight: "MEDIUM"
)
}
),
    Best answer by harshitb6843

    Hi there,

    This should help. 

    a!localVariables(
  local!buttonTierOne: false(),
  local!buttonTierTwo: false(),
  local!buttonTierThree: false(),
  local!buttonRest: true(),
  a!formLayout(
    label: "Label",
    contents: a!sectionLayout(
      contents: {
        a!sectionLayout(
          label: "",
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 1 " },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Service Output Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierOne,
                                a!save(local!buttonRest, false())
                              },
                              submit: false(),
                              disabled: if(local!buttonTierOne, true, false),
                              style: "PRIMARY",
                              validate: true()
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 2 " },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Additional Request Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierTwo,
                                a!save(
                                  local!buttonTierOne,
                                  false
                                )
                              },
                              submit: false(),
                              style: "PRIMARY",
                              validate: true(),
                              disabled: local!buttonTierTwo
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 3" },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Service output Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierThree,
                                a!save(
                                  {
                                    local!buttonTierOne,
                                    local!buttonTierTwo
                                  },
                                  false
                                )
                              },
                              submit: false(),
                              style: "PRIMARY",
                              validate: true(),
                              disabled: local!buttonTierThree
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                )
              }
            )
          },
          divider: "BELOW",
          dividerWeight: "MEDIUM"
        )
      }
    )
  )
)

    2 replies

    harshitb6843
    harshitb6843Answer
    January 13, 2022

    Hi there,

    This should help. 

    a!localVariables(
  local!buttonTierOne: false(),
  local!buttonTierTwo: false(),
  local!buttonTierThree: false(),
  local!buttonRest: true(),
  a!formLayout(
    label: "Label",
    contents: a!sectionLayout(
      contents: {
        a!sectionLayout(
          label: "",
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 1 " },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Service Output Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierOne,
                                a!save(local!buttonRest, false())
                              },
                              submit: false(),
                              disabled: if(local!buttonTierOne, true, false),
                              style: "PRIMARY",
                              validate: true()
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 2 " },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Additional Request Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierTwo,
                                a!save(
                                  local!buttonTierOne,
                                  false
                                )
                              },
                              submit: false(),
                              style: "PRIMARY",
                              validate: true(),
                              disabled: local!buttonTierTwo
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!boxLayout(
                      label: "",
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Submit Tier 3" },
                              size: "MEDIUM_PLUS"
                            ),
                            char(10),
                            a!richTextItem(
                              text: { "Service output Form" },
                              size: "MEDIUM_PLUS"
                            )
                          },
                          align: "CENTER"
                        ),
                        a!buttonArrayLayout(
                          buttons: {
                            a!buttonWidget(
                              label: "Start",
                              icon: "file-text-o",
                              value: true(),
                              saveInto: {
                                local!buttonTierThree,
                                a!save(
                                  {
                                    local!buttonTierOne,
                                    local!buttonTierTwo
                                  },
                                  false
                                )
                              },
                              submit: false(),
                              style: "PRIMARY",
                              validate: true(),
                              disabled: local!buttonTierThree
                            )
                          },
                          align: "CENTER"
                        )
                      },
                      style: "ACCENT",
                      marginBelow: "STANDARD"
                    )
                  }
                )
              }
            )
          },
          divider: "BELOW",
          dividerWeight: "MEDIUM"
        )
      }
    )
  )
)

      O
      oludareo0002Author
      January 13, 2022

      Perfect that helped me resolve the code! thank you for clearing things up for me! 

      Terms & ConditionsAccessibility statement