Menu

Designing Screens - Working with Radio Buttons

Insert radio buttons to a screen

After creating a new screen (also called form), a modal container will appear where you can edit the title and insert needed content inside. To add radio buttons inside the container, please follow the following steps:

  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 '</> Radio Group' on the left side bar.
  3. A radio group with 2 radio buttons will appear inside the container.

Set up Radio Buttons

In order for radio buttons to work in a template logic, template designer needs to enter values in the Attributes section on the right pane for Radio Group element and Radio element.

For Radio Group element:

  1. Select the 'Radio Group' element on the breadcrumb
  2. On the right pane, enter values for 'Name' and 'Label' in the Attributes section.
    • 'Name' should be the variable that will hold the value that end user selects. In the example below, I named this variable selectedPricing, which holds the pricing option that end user will choose later. You can refer to this variable in latter steps in the logic flow.
    • 'Label' is the text that displays above the radio buttons, giving more details about the radio selection for end users. Label can be left empty if not needed.

For Radio element:

  1. Click on each radio button and then click on the 'Radio' element on the breadcrumb
  2. On the right pane, enter values for 'Value' and 'Label' in the Attributes section:
    • 'Value' is the value that the radio button holds. In the example below, there are 2 radio buttons for this form, whose values are pricingOptions1 and pricingOptions2. Whichever button end user clicks on, the value of that button will become the value of the variable selectedPricing that we declared earlier for the Radio Group.
    • 'Label' is the placeholder text for each radio button. This attribute should not be empty.

Adding/removing radio buttons:

  • Adding additional radio buttons can be done by: select the Radio Group element on the breadcrumb > Click on 'Add item' on the top of the right pane
  • Removing radio buttons can be done by: select the Radio element on the breadcrumb > Click on the trash can icon on the top of the right pane.

Radio buttons with dynamic labels

The radio button can also get its label dynamically from a variable. In the example below, the first radio button's label needs to show the current date to the end user.

Steps to add dynamic content to radio button's label:

  1. Follow the instructions described in 'Set up Radio Buttons' section to set up the radio button.
  2. Click on the radio button, then select the 'Span' element on the breadcrumb.
  3. On the right pane, add the wanted variable to the 'Content' attribute in the Dynamic Attributes section. To display the current date, the variable today was used for the example. The 'Span' element will become bold and dark blue, indicating that there's dynamic content behind.

Comments

0 comments