List

Shows a list of items retrieved from a DataSource.

Demo

Basic example

{ "type": "list", "value": "{{any}}", "extraSettings": { "dataSource": "Static", "identity": "value", "formatItem": "I like {{$item.text}}", "title": "Awesome static list", "linkUrl": "{{$item.url}}", "items": [ { "text": "Penguins", "url": "https://en.wikipedia.org/wiki/Linux" }, { "text": "Apples", "url": "https://en.wikipedia.org/wiki/MacOS" }, { "text": "Windows", "url": "https://en.wikipedia.org/wiki/Microsoft_Windows" } ] } }

Attributes

Attribute	Type	Description
type	string	Type expected is list

See section Common attributes.

Extra attributes

Attribute	Type	Description
height	number	Height limit of the list in pixels, will show a scrollbar
linkUrl	string	URL to go to when any item is clicked, usually an associated expression, e.g. {{$item.url}}
items	string	Array of data options when dataSource is Static
title	string	Text to show above the items list
titleLink	string	URL to go to when the title is clicked
collapsible	boolean	Allows the list to be collapsed by a button in the title
collapsed	boolean	Defines if the list is collapsed by default. Keep in mind this is only an initial state due to user has the ability to change the state manually.

This component uses DataSource. See section DataSource.

Events

Event	When	Additional	Cancellable
List.dataLoaded	List content is loaded	Definition + State	No

See section Events for more information.

When to use it

Use it when you want to show information in a list style.