Radio List

Description
The Radio List part allows users to select a value from a list of items, causing that value to be stored in the corresponding data object. Unlike a checklist, a radio list is a list of objects from which only one item may be selected at any time. The Radio List part contains a routing function that allows you to create links to different downstream steps based on the value selected from the radio list.
Use
You can use this part to create an interactive form that presents a question or topic to a user along with a discrete list of allowable answers. The user selects or deselects a single option at a time. Users can only select one option from the presented list. The Radio List part saves the value associated with the option selected by the user into the data object. Since there is only one allowable option, the data object is not a collection. However, in the data object parameter, you can specify one element within a collection.
An important element of this part is that it has a built-in routing function that you can activate by checking the "route on output" option. This allows you to assign a different outbound link from the radio list form node to downstream nodes for each possible answer.
For projects created without a framework, you can use the Radio List part to add a radio list control in a page. In the Designer, add a form node. In the form node editor, "insert radio list" appears as an option in the menu bar. Position your cursor in the HTML editor where you want to insert the radio list control, and select the insert radio list option. The system inserts the part and displays the Radio List part editor. If your project is based on a framework, you can also create individual radio list "form part" nodes. The part editor may contain additional parameters for controlling functionality specific to that framework. Based on the framework type for your project, you can add options and pass the selected option to a variable and store the selections this way.
NOTE: Due to the underlying code, you should not use the following words in a data object name: and, break, do, else, elseif, end, false, for, function, if, in, local, nil not, or, repeat, return, then, true, until, while, type. You should also never start a data object with a number.
Editor Fields
Basic Tab Options
Field Name | Description/Use | Type/Options | Optional/Mandatory |
Type (v7.4+) |
This field defaults to the specific form part you selected from the Nodes Toolbox; for example, a radio list. However, you can use this field to quickly change the type of form part without having to recreate answer options. If you first created your question and a checklist, for example, but realize it should be a radio list, use this field to select an alternative question type, and click save. The system transfers the key parameters into the new question type. Parameters specific to the question type (e.g. top choice for dropdown) remain in the configuration, and will be redisplayed if you convert the form part back to your original selection. Making this change may trigger some validation warnings, which you can address as necessary. WARNING: When converting a radio list with "Route on Output" to a checklist, remove the Route on Output flag prior to converting your part or remember to connect the checklist with the next node using a standard link (not one that says "default" or a specific answer option). NOTE: When switching from a checklist to dropdown, the data type stays set to collection, which results in the dropdown allowing multiple values. To force the user to select only one value from the dropdown list, change the data type to text or number based on the answer options. |
- Radiolist - Checklist - Dropdown |
Mandatory |
HTML enabled | When this is enabled you can put HTML formatting in the Question caption, which means the system will display HTML tags in the text in the caption editor as they would appear in a browser. The editor browser provides limited HTML editing options for text formatting. You can toggle the HTML-enabled button on and off to alternate between seeing and editing tags and displaying them as they will appear. | Yes | No | Optional |
Question | This is the text the system shows in front of the radio list control. | Text | Mandatory |
Short logging caption | The system shows the short caption on the bottom of the radio list control. | Text | Optional |
Data object | This field is used to store the result of the selection in a Data Object. | Data object | Mandatory |
Caption object | This is the name of the data object in which the caption associated with the user’s choice will be stored. | Data object | Optional |
Default value | The system uses the value you enter in this field to pre-select an option. Note that the value entered here has to match a value in Options. | Text | Optional |
Prefill value | This is the value they system fills in the control when no value has been set to the data object. Note Prefill is different from default in the sense that the system will not save the value to the data object--it will only display on the screen. Any subsequent nodes will work on the basis that THIS object is undefined. When the form is submitted, the system stores the value to the data object. |
Text | Optional |
Weight | You can enter a value here and the system will assign that weight to this value if you don't specify the weight of the "Options". | Number | Optional |
Submit on select | This field is used to submit the form on radio list selection so that system executes parallel and downstream steps as soon as the user makes a selection. | Yes | No | Optional |
Route on output | If you select this field the system will follow the path to the next step based on the selection the user makes. | Yes | No | Optional (when using data location = manual only) |
Speech command | This is the alternative caption the system recognizes when your application uses the Speech Recognition module to make the checklist component the current element so that its individual items can be specified. | Text | Optional |
Data location | This field is used to determine the store type of the checklist object. When you select Manual, the system creates items in the list using the Options table below. If you select Collection the system displays an editor so you can select a collection containing the items to list. If you select Table, the system displays an editor so you can select a table resource from the project and specify the filters and column details for a controlled set of data from the table to display as options in the radio list. | - Manual - Collection - Table data |
Mandatory |
Options | The system creates radio list options using this field.
|
Table | Mandatory |
Data type | This is the item type of the data object the radio list is being used to create. | Text Number |
Mandatory |
Shape | If your application is using the Visual Navigation Framework, this is the shape in which the system will display the node. | - Rectangle |
Mandatory |
Display options horizontally | By default, the system displays all options in a vertical list. If you enable this option the system displays the options horizontally. | Yes | No | Optional |
Maximum amount of columns | This is the maximum number of columns the system should display horizontally when displaying the fields. | Number | Optional |
Validation Tab Options
Field Name | Description/Use | Type/Options | Optional/Mandatory |
Type | This field allows you to configure a validation error to display when the condition is violated.
|
Options | Optional |
Condition | This is only required when type=custom. See Setting Conditions (Data Validation) for more information. | Optional | |
Message | This is the message the system displays to the user when a validation rule is violated. The system only shows the first message for the violated rule to the user. | Optional |
Advanced Tab Options
Field Name | Description/Use | Type/Options | Optional/Mandatory |
Calculator Call (VGN Tab in v7.4) |
This field is used to receive the result of the check list from a call node. | Call Logicnet | Optional |
Display link text (VGN Tab in v7.4) |
This field is used to show the result of the call node with a specific text. | - Data object - Text |
Optional |
Disable logging | Click this checkbox to disable logging. | Checkbox | Optional |
Disable input | If you click this checkbox, the system will display the radio list options but will not allow the user to click them. | Checkbox | Optional |
Use Image map |
If you click this checkbox, the system will open a image selection field that allows you to select an image from your resources/images folder. When a user accesses your application, the system displays the selected image between the radio list question and selection options. See below for more information. | Checkbox | Optional |
Hide options (v7.4.5+) |
For use with an image map, click this checkbox for the system will display the radio list question and image, but not the options. | Checkbox | Optional |
Display Label Options | This field is used to show which values can be assigned by the call node (Calculator Call) object. The result of the call node must be only one of the values on the list.
|
Table | Mandatory |
Only use Display Label for connectors | If your application uses the Visual Guideline Framework and you check this checkbox the system will use the display label values, including blanks, for all outputs. | Checkbox | Optional |
Processing Mode (v7.4) |
The default behavior is Always use form value, which takes the user input or on-screen value, including "not answered", and assigns it to the data object. If an earlier answer/pathway combines to set a later on-screen variable, choose Use ctx for this data object to display the context value. This value can always be overwritten by user input. |
- Always use form value - Use ctx when form value empty |
Mandatory |
Clickable Image Maps
For Release 7.4.5 onwards, Designer Users can utilize an image map with defined areas to act as an input (either radiolist or checklist). When clicking on an area (can be a rectangle, circle, or multi-point polygon), the click is translated into the selection of an answer option. An example project shows a human body map with clickable areas for heart, lungs, etc. The radiolist options can be shown or hidden from view.
For help laying out the clickable areas, there are several free tools available on the internet, including:
- https://www.image-map.net/ (good for creating simple image maps) or
- https://summerstyle.github.io/summer/ (more sophisticated tool for intricate shapes, PLUS the ability to load a set of coordinates and edit).
For some basic information on how clickable maps work in browsers, see this article.
Implementation Notes:
- Clickable areas should not overlap. Take care to draw the map coordinates accurately.
- Only one fully enclosed area can be defined for each answer option.
- Depending on the image, leave space between areas so the user can easily tell which part of the image is selected.
- Clickable areas will show with a change in mouse style.
- When hovering over a clickable area, the system shows the caption for that answer option as a tooltip.
Examples
Download and import this example project in your workspace. This example shows various basic configurations of the radio list part.
Clickable Image Example
Download and import this second example project to see the human body as a clickable map supporting a radiolist choice.
Conditions on Answer Options
Check out the article on Setting Conditions on Answer Options for help showing a subset of answer options based on user-defined conditions.