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): These are the attributes of the form
2. Label Name
3. Column Width
4. 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. Store Json Node
3. Select Refresh Form
4. Refresh component on change

3rd Step – API

1. Display Field
2. Display Sub Field
3. Value Field
4. Image URL Field
5. API
   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

6. Data
   1. Options
      1. Display Text
      2. Value
      3. Display Sub Text
      4. Image URL
      5. Mobile
      1. Background Color
      2. Text Color
      3. Icon
      4. Active Background Color
      5. Active Text Color
      6. Active Icon
   2. Bind data with model
      1. Binding model key

7. Allow to Enter Other Value?

4th Step – Advance

1. Design
1. Direction
   1. Vertical
   2. Horizontal
   3. Display Images
      1. Is Left Image & Right Text view
      2. Image Width
      3. Image Height
      4. Number of Checkbox in Row
2. Enable Panel
   1. Panel Header
   2. Bootstrap Column Class
   3. Description: Enter extra suggestions for user experience on this field

2. Mobile
1. Enable Button View
2. Dynamic Data Binding
   1. Dynamic Data Count: Enter Number OR Data Model Key
3. Padding Left
4. Padding Top
5. Padding Right
6. Padding Bottom
7. Border Radius
8. Gap between Checkbox List
9. Gap between Text and Icon
10. Icon on Right
11. Is Gluestack Icon?
12. Align Self
13. Flex
14. Form Control Margin Bottom

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