Lists

List

• A List is a simple list of things
• The List can be simple text, pair text with icons or pair text with images
• The List can also allow the user to select one of the list items

The parameters for a List are:

Name	Type	Default	Values	Description
title	string	-	-	the title text for the list
style	string	standard	standard, small-icon, large-icon	the style of the list that you would like
selectable	boolean	false	true, false	whether the list items should selectable
type	string	chevron	ordered, unordered, chevron, table, multiSelect	The type of the list that you would like
preventRetries	boolean	false	true, false	whether the list should only be selectable once, this should be set to true when using the markup interaction node
shouldDisable	boolean	false	true, false	whether the list should be disabled after it has been passed in flow
interactionType	string	utterance	utterance, event	Event fires a markup interaction with the option selected Utterance adds a message to the timeline with the option selected
cropIcon	boolean	false	true, false	For selectable list, this will crop the icon to a circle
headerColor	string	-	-	Set a custom header background color that overrides configured style
headerTextColor	string	-	-	Set a custom header text color that overrides configured style
postSelectBackgroundColor	string	-	-	Set a custom post-select background color for list that overrides configured style
postSelectTextColor	string	-	-	Set a custom post-select text color for list that overrides configured style
focusSelect	boolean	false	true, false	Whether the list should only display selected option

Selectable vs Non-selectable lists

Lists can be used to present information to end users in a read-only fashion (non-selectable), or they can be configured to allow for users to click on items in the list as input (selectable).

• Selectable-lists
• Non-Selectable Lists

Selectable Lists

The type property of the List element can be used to set the type of list to render. Only the chevron and multiSelect type is compatible with selectable lists

Most list layouts for selectable lists support both event and utterance for the interactionType. multiSelect lists are only compatible with event interactionType

These components can be be set to only allow one selection.

After the user selects an option, the list will change state to prevent other selections.

Chevron List with titles

Chevron List with small icons

Chevron List with large icons

Multi-select List

Using type="multiSelect" allows for a list to accept more than one selection. This timeline element is only supported using the markup interaction node.

After the user selects an option - then the list will change state.

The results will be provided as part of msg.payload.markupInteraction.

Non-selectable Lists Examples

Only ordered, unordered, and border types are compatible with non-selectable lists

Ordered

Unordered

Border

Bordered list with only titles

Bordered list with Titles and Subtitles:

Bordered list with Titles, Subtitles and Icons:

List with Titles, Subtitles, Icons and Details:

List with Titles, Subtitles, Icons, Details and custom detail text color:

Custom List header background and text color

These components can be be set to only allow one selection.