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

Images for large carousels should not be taller 230 X 150

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
horizontal boolean false true, false whether the list displays as a horizontal scrollable list
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
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

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

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.

Setting preventRetries to true is recommended for almost all bots that use interactionType=“event”

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: