Use the Radio Button control in the Capriza Designer to add a group of radio buttons to your Zapp. Within the mobile preview, radio buttons will be rendered as a dropdown from which the user can make his or her selection.
First, select Radio Button from the Input menu in the Simplify toolbar.
Click the radio button you wish to capture.
If the radio button is not automatically detected, you can hold down the Alt key and click to manually capture it. The Designer will prompt you to select all of the items to be included in the radio group.
Once selected, click again to save. Capriza will then ask you to confirm if the label for each item is correct.
Next, confirm the current state of the first button.
Capriza will ask you to select/unselect the item to team the engine how to recognize each state.
A dropdown list with all the Radio Button options will be added on the Mobile page. The name of the group will be the name of the list.
To invoke the In Line Editor (ILE), hover over the element in the Zapp and click on the pencil. Through the ILE you can change the dropdown label, change the options label, and predefine the selected option.
- Presets: Choose between Standard, No Gutter, and Full Border layouts.
- Display: Vary the width and background color of the input field.
- Content: Specify placeholder and tooltip text.
- Text: Change various aspects of the control's text and label. See Text & Label Styling Options for more information.
- Suggest Recent Values: Automatically selects values recently selected values.
- Reverse: Change the direction of the on/off switch (see below).
On/Off Switch Control
If the Radio Button group has only 2 options the mobile control can be displayed as an on/off switch. To do so, first open the Web Properties dialog using the wrench icon, and navigate to "Properties." Select "Some Options," and choose the two options. Note: Once "Some Options" is chosen, the options will become static and not dynamically update if the source application provides different options.
Open the ILE, click "Selector" at the top of the screen, and choose On/Off Switch.
The field will now appear as an on/off toggle.