This tutorial shows you how to enable a Checkbox List
" control in your application. Read through our step-by-step instructions which are accompanied with sample screens for a better understanding and experience.
Checkbox List control can be enabled by going through the 4 step form wizard. Steps are defined below as:
1. Define Property
This is the 1st step of the Checkbox List form wizard. Here you are required to fill in the following details:
(i)Attributes(mandatory) : This is the attributes of the form
(ii)Is Required? : This button is set as "ON" if you need to apply this control as mandatory
(iii)Error Message : Here you define the error message that will be showed if this control is mandatory and not filled in
(iv) Enable Panel? : This button is set as "ON" if you need to apply a Panel on this control
(v) Add in Filter? : This button is set as "ON" if you need to add this control in the filter
2. Define View
Similar to other controls here you design how the control will look on the form. Here you need to define:
(i) Label Text
(ii) Placeholder Text
(iv) Direction :Here you define the layout of the values in the Checkbox List. There are multiple options to choose from, i.e. you may want to display the Checkbox List as horizontal, vertical, with images or without images, etc. Since, the configuration options change with the type of "Direction" that you choose, we will learn about these options one by one below.
(v) Enable Help Text :Once you enable help text, you can define your help message in the text box below and also align the direction of the help text to be displayed.
Checkbox List with Vertical Direction
More Ways to Display Checkbox List
With the configuration shown below you will be able to display your Checkbox List with Images. You can also choose the alignment of the image and the text. The sample configuration shown below helps you do the configuration of the Checkbox List with images and text aligned in center.
Checkbox List with Image & Text Center Aligned
Another sample configuration has an option to turn the "Is Left Image & Right Text View" button as "ON" and this changes the alignment of the image and text. The image is left aligned and text is right aligned.
Checkbox List with Image Left & Text Right Aligned
Another sample configuration shows you how to configure a horizontal Checkbox List.
Checkbox List with Horizontal direction
3. Define Data
Here, you need to define data connections. Either configure an API or add data points manually.
If you choose to configure an API, then you have an option to choose from HTTP, Logic Apps, Cosmos DB, or Azure Function. API configuration is exactly similar to the configurations done earlier for any other control. Please refer to the sample below for "Cosmos DB" connection.
For binding data, you have an option to just add the data points manually and omit the API configurations completely. You can add as many data points as you wish to.
Try out the controls in a live demo in the laptop screen below!
Get a demo
Schedule a demo with one of our experts to see how NCAMEO can streamline the way your team works.