Radio Button
- Sergio Rodriguez
- Matias
Overview
In this lesson, we will learn how to create a “Radio Button” control under the page. This control is a graphical element that allows us to choose only one of a predefined set of mutually exclusive options. This is an easy way to represents only one item as active and the remains unchecked in the form, especially when there are only few options to display in the screen.
How to create a “Radio Button” control ?
As precondition to create a “Radio Button” control, we need an active requirement in our project. Then we can select any page where we want to add the control.
Select the “Radio Button” on dropdown list and click on “New” button
Complete the “General” tab with the basic information to identify the control. Turn to “Data Binding” tab and check the field description
Field | Description |
|---|---|
Dataset | Connect the radio button to any dataset and establish the values based on DB table or SP |
Default Value | Set a default value for Radio Button control |
Neutral Element | Choose the initial position of the element between:
|
Mode | Set the type of loading data to the control between the options:
|
Options | If “Free” is the control mode, we can include the options on the fly. This is the correct syntax to establish the values to choose in the radio button “ID,Value1;ID,Value2” |
Instance | Set the environment for the project |
In this example, we will create the options inside the “Radio Button” control without the association between dataset or stored procedure. That’s the “Free” mode option and consequently, we need to add the radio button options separating by commas the id and the name, and semicolon to add a new option in the query. For example:
1,No access;2,Access;3,Guest
Option Id | Option Name |
|---|---|
1 | No access |
2 | Access |
3 | Guest |
Once the “Layout” options are selected, click on “Submit” button and verify that the “Radio Button” control is generated.
How to set variables in “Radio Button” options using other controls?
Let’s review an example where the “Radio Button” previously created can be set as variable for other controls like “Button” or “Label” that we learnt in previous lessons.
Select “Button” control and click on “New” button
Complete the required fields and focus on “Parameters” field. Under this textbox, include the parameter related to the “Radio Button” control previously created. It’s pointing to the “RB_1” field name that we are going to connect this radio button as parameter that will trigger another action when the “Button” control is triggered.
Turn to “Layout” tab in new “Button” control
Then switch to “Conditional” tab and make “Visible” and “Editable” fields as “YES” option. After completing this values, click on “Submit” button to create the new control.
Now we are going to connect this control with any other listed. Select “Label” control and click on “New” button again.
A popup is displayed to complete the required fields for “Label” control. If we are going to link this to the other controls, focus on “Value” field. You can introduce a fix text beside the parameter “&RB_1” that will point to the “Radio Button” options.
Click on “Submit” button to generate the label and verify the objects in page.
Later, we add multiple options on “Radio button” control where user has to select 1 value and also we have a “Label” control that will display the option selected as soon as the “Button” control is clicked.
Let’s check this association on “Preview” to verify that the settings are correctly triggered in the page.
Notice that the 3 options are available and ready to be selected with the radio button element beside the “Option” name and ordered by the query that we established in “Data Binding” tab. Once it’s selected, the label display the option 1 as the active.
Recap
On this lesson, we learnt about this simple control that give us the possibility to show multiple options in certain conditions when the form requires to select only one element. Also we discovered how to connect the selection from radio button to be displayed in other places inside our page as label information.