Follow

Input > Radio Button

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.

 

Radio_Button.png

 

Click the radio button you wish to capture.

 

Screen_Shot_2017-05-22_at_4.38.49_PM.png

 

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.

Screen_Shot_2017-05-22_at_4.34.27_PM.png

Once selected, click again to save. Capriza will then ask you to confirm if the label for each item is correct.

Screen_Shot_2017-05-22_at_4.34.42_PM.png

Next, confirm the current state of the first button.

Screen_Shot_2017-05-22_at_4.34.54_PM.png

Capriza will ask you to select/unselect the item to team the engine how to recognize each state.

Screen_Shot_2017-05-22_at_4.35.02_PM.png

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.

Screen_Shot_2017-05-22_at_4.34.10_PM.png 

Styling Options

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.

 

Screen_Shot_2017-05-22_at_4.35.36_PM.png

  • 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.

Screen_Shot_2017-05-22_at_4.44.31_PM.png

Open the ILE, click "Selector" at the top of the screen, and choose On/Off Switch.

Screen_Shot_2017-05-22_at_4.44.46_PM.png

The field will now appear as an on/off toggle.

Screen_Shot_2017-05-22_at_4.45.35_PM.png

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.