Story

How to use Radio List

This tutorial shows you how to enable a " Radio List " control in your application. Our step-by-step instructions are accompanied with sample screens for a better understanding and experience. 

Radio List control can be enabled by going through a 4 step form wizard. Steps are defined below as:

1. Define Property

This is the 1st step of the "Radio 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? : Set as "ON" if you need to apply this control as mandatory

(iii) Error Message : Define the error message that will be showed if this control is not filled

(iv) Allow Other? : Define whether or not you require a value as "Other" in your list of values

(v) Add on Filter? : Set as 'ON' if you need this Radio List 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

(iii) Width

(iv) Direction : Define the layout of the values in the Radio List. There are multiple options to choose from, i.e. horizontal, vertical, with images or without images, etc. Since, the configuration options change with the type of "Direction" that you choose, learn about these options one by one below.

(v) Enable Help Text : Define your help message in the text box and align the direction of the help text.







Radio List with "Horizontal" direction


3. More ways to display Radio List


With the configuration shown below you will be able to display your Radio List with Images. You can also choose to display a "Tick Mark" on the selection of a particular value.

Please go through the sample configuration shown below and the display result of Radio List with Images with/without Tick Mark option.



Radio List with "Images" and no tick mark on selected values

Radio List with "Images" and "Tick Mark" on selected values


4. Define Data

In the last step of this wizard, you need to define data connections. You could 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 also 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. Please refer to the sample below for adding data manually for a Radio List.





With data connection, the Radio List enabling form wizard is completed.


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.
Start free trial
Experience the NCAMEO advantage free for 14 days (no credit card required)