Radio List

You have to go through a four-step form wizard to enable this Control, i.e., Design, Validation, API & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Radio List” control form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name
3. Column Width
4. Placeholder
5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
   1. Tooltip Text
   2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
   1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
2. Allow Other?: This field is used to take user input, if options in the radio list are not relevant as per user.
3. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.

3rd Step – API

1. Data
1. Server Data
   1. Choose Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Response Attribute

2. Client Data
   1. Data
      1. Enter Text
      2. Display Subtext
      3. Enter Value
      4. Image URL
      5. Populate JSON
   2. Bind data with model
      1. Binding model key

3. Text Field
4. Value Field
5. Store Extra Nodes: Store extra dropdown nodes with value field to Model Json
   1. Extra Nodes: Enter field from binding api response
   2. Stop Extra Nodes On Load
2. Relationship

You can set binding with other form controls and this control by allowing reload for selected controls.

1. Action Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Response Attribute
3. Query Param (mandatory)
4. Allow Binding with Other Controls
   1. Control Properties
      1. Action: Pre Populate or Filter
      2. Control Type
      3. Control Key
      4. Is Control Bind with API
         1. API Binding Field
      5. Refresh Controls On Change
      6. Select Refresh Form
      7. Binding Attribute (e.g Key)

4th Step – Advance

1. Design
1. Enable Panel Header
   1. Panel Header
2. Bootstrap Column Class
3. Description: Enter extra suggestions for user experience on this field
4. Direction: Select direction from the following Vertical, Horizontal, Images, and Group Button
   1. Vertical
   2. Horizontal
   3. Images
      1. Is Left Image & Right Text view
      2. Hide Border on Image
      3. Number of Radiobox in Row
      4. List Justify
      5. List Align
      6. Image Width
      7. Images Height
      8. Font Size
      9. Hide Tic Mark
   4. Group Button
      1. Group Color

2. Other
1. Set data model to page variable: Here, you can access page variable on sidebar
   1. Page variable
   2. Type
      1. Object
      2. Array: Key and Value
2. Attach with form wizard
   1. Form Wizard Key
   2. Form Wizard Component Form Id (mandatory)

3. Mobile
1. Padding Left
2. Padding Top
3. Padding Right
4. Padding Bottom
5. Border Radius
6. Gap between Radiobox List
7. Gap between Text and Icon
8. Icon on Right
9. Is Gluestack Icon?
10. Align Self
11. Flex
12. Form Control Margin Bottom
13. Icon
14. Active Icon

Click “Confirm” and “Radio List” control is configured.