Checkbox 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 “Checkbox 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. 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. Store Json Node: Defines where the form data is stored in the JSON structure, allowing for easy retrieval and manipulation of the data.
  3. Select Refresh Form: Indicates if the form should be refreshed when certain changes are made to the data or controls.
  4. Refresh component on change: Specifies whether the associated component should be refreshed automatically when a change is made to the control's value.

3rd Step – API

    1. Display Field: Defines the field that will be displayed to the user in the form.
    2. Display Sub Field: Specifies a secondary field that can provide additional information in the form.
    3. Value Field: The field containing the actual value or data that is being captured or processed in the form.
    4. Image URL Field: The field where the URL of an image is stored or selected.
    5. API: Specifies the configuration settings for connecting to and interacting with an API.
      1. Choose Data Source: Select data source from the following: HTTP, Workflow, No SQL or RDBMS Specifies where the data for the API request is coming from, such as HTTP, NoSQL, etc.
        1. HTTP: Defines the settings for an HTTP-based API request.
          1. Data Connection: Specifies the connection string or settings for connecting to the data source.
          2. Method (mandatory): Select method from the following: GET, PUT, POST, PATCH, DELETE, or POCO Defines the HTTP method to use for the API request.
          3. API URL (mandatory): The URL endpoint for the API request.
          4. Query Parameters:
            1. Key: The key for the query parameter.
            2. Value: The value for the query parameter.
            3. Query Variable: The query variable that can be used dynamically.
            4. Select Type: Choose the type of query variable (e.g., string, integer).
          5. Headers:
            1. Name: The name of the header to send with the API request.
            2. Value: The value for the header.
          6. Others:
            1. Enable raw query: Allows the use of a raw query string in the request.
      2. Response Attribute: Specifies the attribute or field in the API response to be used for further processing.
    6. Data: Defines the data related to the form or component, typically including options for selection or display.
      1. Options: Specifies the available options or choices for the field or control.
        1. Display Text: The text that is shown to the user for the option.
        2. Value: The underlying value that corresponds to the option selected.
        3. Display Sub Text: Additional text displayed alongside the option for further clarification.
        4. Image URL: The URL that points to an image associated with the option.
        5. Mobile: Defines any mobile-specific settings or attributes related to the option.
          1. Background Color: The background color for the option in the interface.
          2. Text Color: The color of the text displayed for the option.
          3. Icon: The icon associated with the option, usually displayed alongside the text.
          4. Active Background Color: The background color applied when the option is in an active or selected state.
          5. Active Text Color: The text color used when the option is active or selected.
          6. Active Icon: The icon displayed when the option is active or selected.
      2. Bind data with model: Binds the data to a specific model in the system, allowing for dynamic updates.
        1. Binding model key: Specifies the key in the model that will be bound to the data value.
    7. Allow to Enter Other Value?: Specifies whether the user is allowed to enter a custom value that is not part of the predefined options or choices.

4th Step – Advance

  1. Design
    1. Direction: Defines the orientation of the layout or control.
      1. Vertical: Specifies that the layout or control is oriented vertically.
      2. Horizontal: Specifies that the layout or control is oriented horizontally.
      3. Display Images: Indicates whether images should be displayed alongside text.
        1. Is Left Image & Right Text view: Specifies if the image should be displayed on the left and the text on the right.
        2. Image Width: Defines the width of the displayed image.
        3. Image Height: Defines the height of the displayed image.
        4. Number of Checkbox in Row: Specifies how many checkboxes should be displayed in a single row.
    2. Enable Panel: Specifies whether a panel should be enabled for this control or field.
      1. Panel Header: Defines the header title displayed at the top of the panel.
      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 Provides additional tips or guidance to improve the user’s experience with this field.
  2. Mobile
    1. Enable Button View: Specifies whether the button view should be enabled for the field or control.
    2. Dynamic Data Binding: Enables dynamic binding of data to the control, updating the data as needed.
      1. Dynamic Data Count: Enter Number OR Data Model Key Defines the number of dynamic data items to be used or a key to bind the data model dynamically.
    3. Padding Left: Defines the amount of padding on the left side of the control or field.
    4. Padding Top: Defines the amount of padding at the top of the control or field.
    5. Padding Right: Defines the amount of padding on the right side of the control or field.
    6. Padding Bottom: Defines the amount of padding at the bottom of the control or field.
    7. Border Radius: Specifies the rounded corners for the border of the control or field.
    8. Gap between Checkbox List: Defines the space between each checkbox in a list of checkboxes.
    9. Gap between Text and Icon: Specifies the space between the text and the icon within the control or field.
    10. Icon on Right: Indicates if the icon should be displayed on the right side of the text or field.
    11. Is Gluestack Icon?: Specifies if the control uses the Gluestack icon set for its icons.
    12. Align Self: Defines the alignment of the control or field relative to its parent container (e.g., center, flex-start).
    13. Flex: Enables or configures the flex layout for the control or field, making it responsive.
    14. Form Control Margin Bottom: Specifies the margin space at the bottom of the form control, used to separate it from other elements.

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