Buttons that toggle state of other buttons

Question

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"
)
}
),

Harshit Bumb (Appyzie) · Accepted Answer

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"
 )
 }
 )
 )
)

Buttons that toggle state of other buttons

Top Replies