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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    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: Specifies the data coming from a server that is used for processing or display.
      1. Choose Data Source: Select data source from the following: HTTP, Workflow, No SQL or RDBMS Defines the source of data that will be used for the server-side operations or API calls.
        1. HTTP: Specifies that the data source is an HTTP-based service or API.
          1. Data Connection: Defines the data connection settings for connecting to the HTTP source.
          2. Method (mandatory): Select method from the following: GET, PUT, POST, PATCH, DELETE, or POCO Defines the HTTP method used for the request to the data source.
          3. API URL (mandatory): Specifies the URL endpoint for the API that provides the data.
          4. Query Parameters: Parameters that are sent along with the API request to filter or modify the data.
            1. Key: Specifies the key for the query parameter.
            2. Value: Specifies the value for the query parameter.
            3. Query Variable: Defines a variable used in the query parameter.
            4. Select Type: Defines the type of data or selection for the query parameter.
          5. Headers: Custom headers to be included in the API request.
            1. Name: The name of the header.
            2. Value: The value of the header.
          6. Others: Additional settings for the HTTP request.
            1. Enable raw query: Enables the use of a raw query in the request.
      2. Response Attribute: Specifies the attribute in the response that contains the data needed.
    2. Client Data: Specifies the data that is provided by the client or the front-end side of the application.
      1. Data: Defines the various pieces of data that are managed or provided by the client.
        1. Enter Text: Specifies the text input provided by the user or client.
        2. Display Subtext: Defines additional text displayed under the main input or control to provide more context or instructions.
        3. Enter Value: Specifies a value that can be entered by the user or client in the form of text or a number.
        4. Image URL: Defines the URL of an image that is used or displayed in the client-side data.
        5. Populate JSON: Specifies whether JSON data should be populated or used in the client-side operations.
      2. Bind data with model: Specifies the process of linking client-side data to a specific model for dynamic updates.
        1. Binding model key: Specifies the key used for binding the data from the client to the model.
    3. Text Field: Specifies a field where users can enter or display text.
    4. Value Field: Defines a field that holds the value associated with a selection or input.
    5. Store Extra Nodes: Store extra dropdown nodes with value field to Model Json Defines whether additional nodes (such as options) from a dropdown are stored in the model's JSON data.
      1. Extra Nodes: Enter field from binding API response Specifies the field in the API response to be added as extra nodes in the dropdown.
      2. Stop Extra Nodes On Load: Defines whether the extra nodes should be stopped from loading when the dropdown is initialized.
  2. Relationship

    3. 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 Defines the source of data for the action, which can be HTTP-based, workflow-driven, NoSQL, or RDBMS.
      1. HTTP: Specifies that the action will fetch data from an HTTP-based service or API.
        1. Data Connection: Defines the data connection settings for accessing the HTTP data source.
        2. Method (mandatory): Select method from the following: GET, PUT, POST, PATCH, DELETE, or POCO Defines the HTTP method to be used for sending the request to the API.
        3. API URL (mandatory): Specifies the URL of the API endpoint used to access the data.
        4. Query Parameters: Parameters that can be passed with the HTTP request to modify the response.
          1. Key: Specifies the key for the query parameter.
          2. Value: Specifies the value for the query parameter.
          3. Query Variable: Defines variables used in the query parameters.
          4. Select Type: Specifies the type of data or selection for the query parameter.
        5. Headers: Custom headers to be included in the HTTP request.
          1. Name: The name of the header.
          2. Value: The value of the header.
        6. Others: Additional settings for the HTTP request.
          1. Enable raw query: Enables the use of raw query parameters in the request.
    2. Response Attribute: Specifies the attribute in the response that contains the desired data.
    3. Query Param (mandatory): Defines the mandatory query parameter needed to fetch the data.
    4. Allow Binding with Other Controls: Allows binding this control to other controls for dynamic data linking or updates.
      1. Control Properties: Defines various properties for controlling data binding and interaction with other controls.
        1. Action: Pre Populate or Filter - Specifies whether the action should pre-populate data or filter existing data.
        2. Control Type: Specifies the type of control (e.g., text field, dropdown, etc.).
        3. Control Key: Defines the unique key for the control.
        4. Is Control Bind with API: Specifies whether the control should be bound with an API.
          1. API Binding Field: Defines the field used for binding data from the API.
        5. Refresh Controls On Change: Specifies whether to refresh related controls when this control's value changes.
        6. Select Refresh Form: Allows selecting a form to refresh when changes are made.
        7. Binding Attribute (e.g Key): Specifies the attribute to be used for binding data (e.g., key for selection).

4th Step – Advance

  1. Design
    1. Enable Panel Header: Defines whether the panel header should be enabled or not.
      1. Panel Header: Specifies the title or label for the panel header.
    2. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    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: Aligns the content in a vertical direction.
      2. Horizontal: Aligns the content in a horizontal direction.
      3. Images: Displays content using images and provides additional image-related settings.
        1. Is Left Image & Right Text view: Defines whether the image is on the left with text on the right.
        2. Hide Border on Image: Hides the border around the image.
        3. Number of Radiobox in Row: Specifies how many radio buttons appear per row.
        4. List Justify: Defines the justification for the list items.
        5. List Align: Specifies how the list items should be aligned.
        6. Image Width: Specifies the width of the image.
        7. Images Height: Specifies the height of the image.
        8. Font Size: Defines the font size for text within the image view.
        9. Hide Tic Mark: Hides the tick mark associated with the image options.
      4. Group Button: Displays buttons as a group with the following settings.
        1. Group Color: Specifies the color for the button group.
  2. Other
    1. Set data model to page variable: Here, you can access page variable on the sidebar. Maps data to a specific variable within the page for use in dynamic operations.
      1. Page variable: Defines the page-level variable to which the data model will be assigned.
      2. Type: Specifies the data structure of the page variable.
        1. Object: Assigns the data model as an object.
        2. Array: Key and Value - Assigns the data model as an array containing keys and values.
    2. Attach with form wizard: Associates the data model with a specific form wizard component.
      1. Form Wizard Key: Identifies the unique key of the form wizard to attach.
      2. Form Wizard Component Form Id (mandatory): Specifies the mandatory form ID for the form wizard component.
  3. Mobile
    1. Padding Left: Sets the left padding for the element, defining spacing between content and the left boundary.
    2. Padding Top: Sets the top padding for the element, defining spacing between content and the top boundary.
    3. Padding Right: Sets the right padding for the element, defining spacing between content and the right boundary.
    4. Padding Bottom: Sets the bottom padding for the element, defining spacing between content and the bottom boundary.
    5. Border Radius: Adjusts the roundedness of the element's corners.
    6. Gap between Radiobox List: Defines the spacing between individual radiobox items in the list.
    7. Gap between Text and Icon: Specifies the spacing between text and its associated icon.
    8. Icon on Right: Places the icon to the right of the associated text or element.
    9. Is Gluestack Icon?: Indicates whether the icon is part of the Gluestack design system.
    10. Align Self: Defines how the element aligns within its parent container, overriding container alignment.
    11. Flex: Sets the flex property, controlling how the element grows, shrinks, or adjusts its size.
    12. Form Control Margin Bottom: Adds space below the form control to separate it from adjacent elements.
    13. Icon: Specifies the default icon displayed for the element.
    14. Active Icon: Defines the icon displayed when the element is in an active state.

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