Text List
The Alexa text list template (AlexaTextList
) displays a scrolling list of text items. This is a full-screen template that can include the header and background. You provide a set of text-based items to display in the list. You can configure the appearance of the list, such as including dividers and whether items should be numbered. You can also provide the command to run when a user selects an item from the list.
- Import the alexa-layouts package
- AlexaTextList Parameters
- Provide the list items
- AlexaTextList example
- Related topics
Import the alexa-layouts package
To use AlexaTextList
, import the alexa-layouts package.
The latest version of the alexa-layouts
package is 1.1.0
. AlexaTextList
was introduced in version 1.1.0
.
AlexaTextList Parameters
All parameters except type
are optional.
Name | Type | Default | Description | Version added |
---|---|---|---|---|
|
String |
|
Image/video alignment to apply to background image/video. Defaults to center. |
1.1.0 |
|
Boolean |
|
When true, the provided background image is blurred. Applies only when |
1.1.0 |
|
Boolean |
|
When true, a scrim is applied to the background. With images and videos, this can make it easier to read the text displayed over the item. Defaults to false. |
1.1.0 |
|
None |
Color to use as background color. Used when neither |
1.1.0 |
|
|
String |
None |
URL for the background image source. Used when |
1.1.0 |
|
Boolean |
|
When true, a gradient is applied to the background. |
1.1.0 |
|
String |
|
Image or video scaling to apply to background image or video. Defaults to |
1.1.0 |
|
String |
|
Audio track to play on when playing the video. Can be |
1.1.0 |
|
Boolean |
|
When true, the video automatically begins playing when the document is rendered on the device. Applies when |
1.1.0 |
|
None |
The background video source. Provide a source in the same format shown for the |
1.1.0 |
|
|
String |
None |
URL for attribution image source. Only shown when |
1.0.0 |
|
Boolean |
true |
On devices that can only display one element due to screen size, Attribution is prioritized. Setting to |
1.0.0 |
|
String |
None |
Attribution text to render in the header. The |
1.0.0 |
|
String |
None |
An accessibility label to describe the back button to customers who use a screen reader. |
1.1.0 |
|
|
Command to execute when the user selects the back button. Defaults to |
1.1.0 |
|
|
Boolean |
|
Toggle to display back button in header. Defaults to |
1.0.0 |
|
String |
|
Optional color value to use as the background color for the Header. Defaults to |
1.0.0 |
|
Boolean |
|
Toggle to display the divider that appears at the bottom of header to help separate it from the content below. Default to false |
1.1.0 |
|
String |
None |
Secondary text to render in header. |
1.0.0 |
|
String |
None |
Primary text to render in header. |
1.0.0 |
|
Boolean |
|
When |
1.1.0 |
|
Boolean |
|
When |
1.1.0 |
|
Array of listItems |
Array of text list items to present in list. |
1.1.0 |
|
|
none |
The action to trigger when the user selects an item from the list. |
1.1.0 |
|
|
String |
dark |
Colors will be swiched depending on the specified theme (light/dark). Default to dark theme |
1.1.0 |
|
String |
None |
Always set to |
1.1.0 |
Provide the list items
The AlexaTextList
layout expects an array of items in the listItems
property. Each item is an object with a primaryText
property. For example, you could define an array of items like this:
{
"listItems": [
{
"primaryText": "The first list item."
},
{
"primaryText": "The second list item."
},
{
"primaryText": "The third list item."
}
]
}
You can define this in the listItems
array parameter of AlexaTextList
, or in a separate data source.
AlexaTextList example
{
"type": "APL",
"version": "1.1",
"import": [
{
"name": "alexa-layouts",
"version": "1.1.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "AlexaTextList",
"theme": "${viewport.theme}",
"headerTitle": "Header Title",
"headerSubtitle": "Header Subtitle",
"headerAttributionText": "Attribution",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true,
"headerDivider": true,
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "transparent",
"headerBackButtonCommand": {
"type": "SendEvent",
"arguments": [
"goBack"
]
},
"backgroundColor": "transparent",
"backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT6_Background.png",
"backgroundVideoSource": null,
"backgroundScale": "best-fill",
"backgroundAlign": "center",
"backgroundBlur": false,
"backgroundColorOverlay": false,
"backgroundOverlayGradient": false,
"backgroundVideoAutoPlay": false,
"backgroundVideoAudioTrack": "foreground",
"hideDivider": false,
"hideOrdinal": false,
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
},
"listItems": [
{
"primaryText": "First item in the list."
},
{
"primaryText": "Second item in the list."
},
{
"primaryText": "Third item in the list."
},
{
"primaryText": "Of course, this array of list items could be provided in a separate data source."
}
]
}
]
}
}