Radio List

1 mth ago
164
Form Node Parts

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. Value: Number and text. This is the stored value of the selected item. Caption: Number and text. This is the caption the system shows next to the item. If this is empty, the system uses the "Value". Weight: Number only. This is the specific item's weight the system assigns with this value. In v7.4, this is located on the Advanced tab. Column: Number only. This field separates the items into different columns. Condition: Number and text. This field makes the item visible if the item meets the specified condition. In v7.4, this is located on the Advanced tab. Tooltip: This is the explanatory text that appears when the user hovers over the answer option. The browser dictates the styling. In v7.4, this is located on the Advanced tab. References: Number and text. This field lets you attach a reference to the item with a clickable icon. Speech command: Number and text. This is the alternative caption that is recognized by the speech component for selecting the item. Options: Button. This is used to add, rename, and remove the item.	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 - Diamond - Hexagon	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. mandatory: The user must enter a value. numeric, percentage, currency: The value must be a number and may contain a comma or dot as the decimal character. You can use this validation rule when the data object type is set to text. This combination allows the user to enter a decimal number and allows users to enter a different decimal point (e.g. comma). time: The input must be a time string: hh:mm or hhmm. 12:14 and 1214 are both allowed custom: This allows you to set a custom condition. email: The value must contain an @ symbol. date: The input must be a date string: mm/dd/yy.	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 (v7.4.5+)	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. Value: The system passes the value by "Calculator Call". Display Label: This is the text you want to display on the label for each value. If you leave this empty the system displays the "Value" on the screen. Prefix Caption: Tooltip: This is the explanatory text that appears when the user hovers over the answer option. The browser dictates the styling. Weight: Number only. This is the specific item's weight the system assigns with this value. Condition: Number and text. This field makes the item visible if the item meets the specified condition. Hotspot shape: (v7.4.5+) For use with clickable image maps. Valid options are rect, circle, poly. Hotspot coordinates: (v7.4.5+) For use with clickable image maps. Enter the comma-separated string of coordinates that define the shape. See below for more information.	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.