Menu

Designing Screens - Working with Checkboxes

While radio buttons only allow you to choose one option, checkboxes permit multiple selection. Checkboxes are more flexible as they can be unchecked. Common use cases for checkbox in input screen (or form) are to enable certain parts of the template and test if a condition is true or not to enable  a screen button or a flow.


Same as Radio Button, Checkbox is also designed to hold attributes: name, value and label. To add checkbox to screen:

  1. Select the 'Group' element on the breadcrumb. The form element needs to be inside a group in order to be inserted inside the container
  2. Click on '</> Checkbox Group' on the left side bar
  3. A checkbox group with 1 checkbox will appear inside the container.

Add More Checkboxes

More checkboxes can be added by select 'Add Item' appears in 'Checkbox Group' element.

Also in 'Checkbox Group', its label can also be defined. Label is the text that displays on top of the checkboxes. 

Setup Checkboxes

To put those checkboxes to work in a template logic, template designer needs to enter values in the Attributes section on the right pane for 'Checkbox' element.

  1. Click on each checkbox and then click on the 'Checkbox' element on the breadcrumb
  2. On the right pane, enter values for 'Name, 'Value' and 'Label' in the Attributes section:
  • 'Name' (required) is a variable name that holds the value
  • 'Value' (not required) is the value of the checkbox and value of the variable (Name) that has been defined. If not define, the default value when checkbox is checked give 'true', not checked is a 'false' 
  • 'Label' is the placeholder text for each checkbox. This attribute should not be empty. 

In the example below presents a list of document parts that can be choose to merge to the Body Content. If user check on the box 'Terms & Condition', the value for ${includeTC} will resolve into true

Then in the Body Content, you can map this option to a Paragraph element so it would merge a subtemplate (document part) to the main Document as shown in the picture below.

  • Give 'If' the name of the checkbox (variable)
  • Map 'Content' with another document part by clicking on the small three-dot icon

When document is generated, if the checkbox is ticked, the 'Terms & Conditions' document will be merged into the main Body Content.

Other use case of checkbox is to change the value of a predefined variable. For example, a predefined variable called 'selectAtt' is set to give 'library' as the value. If the box in the screen below is checked, it will give this 'selectAtt' variable a new value which  is 'record'. Otherwise, 'selectAtt' still holds 'library' as its value.

You can remove a checkbox by selecting the Checkbox element on the breadcrumb > Click on the trash can icon on the top of the right pane. 

Comments

0 comments