How to hide a component unless a condition is met?
You can use a Conditional for this. Alternatively, you can use the customConditional
property to achieve this.
For example, if you wish to show a button only when a specific checkbox is checked and a number that is entered is larger than 5, use the following code:
cb = component.Checkbox("TheCheckbox", form);
cb.label = "I agree";
nr = component.Number("TheNumber", form);
nr.label = "Years of experience";
btn = component.Button("TheButton", form);
btn.hidden = true;
btn.label = "Continue";
btn.block = true;
btn.customConditional = "show = data.TheCheckbox && data.TheNumber > 5;";
cb = component.Checkbox("TheCheckbox", form)
cb.label = "I agree"
nr = component.Number("TheNumber", form)
nr.label = "Years of experience"
btn = component.Button("TheButton", form)
btn.hidden = True
btn.label = "Continue"
btn.block = True
btn.customConditional = "show = data.TheCheckbox && data.TheNumber > 5;"
The resulting form in action: