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

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

backgroundAlign

String

center

Image/video alignment to apply to background image/video. Defaults to center.

1.1.0

backgroundBlur

Boolean

false

When true, the provided background image is blurred. Applies only when backgroundImageSource is set. Defaults to false.

1.1.0

backgroundColorOverlay

Boolean

false

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

backgroundColor

Color

None

Color to use as background color. Used when neither backgroundImageSource or backgroundVideoSource are provided.

1.1.0

backgroundImageSource

String

None

URL for the background image source. Used when backgroundVideoSource is not provided.

1.1.0

backgroundOverlayGradient

Boolean

false

When true, a gradient is applied to the background.

1.1.0

backgroundScale

String

best-fill

Image or video scaling to apply to background image or video. Defaults to best-fill.

1.1.0

backgroundVideoAudioTrack

String

foreground

Audio track to play on when playing the video. Can be foreground | background | none Defaults to foreground.

1.1.0

backgroundVideoAutoPlay

Boolean

false

When true, the video automatically begins playing when the document is rendered on the device. Applies when backgroundVideoSource is set. Defaults to false.

1.1.0

backgroundVideoSource

Video source

None

The background video source. Provide a source in the same format shown for the source property of the Video component

1.1.0

headerAttributionImage

String

None

URL for attribution image source. Only shown when headerAttributionPrimacy is true, or on a device that shows Title/Subtitle and Attribution.

1.0.0

headerAttributionPrimacy

Boolean

true

On devices that can only display one element due to screen size, Attribution is prioritized. Setting to false displays Title/Subtitle. Defaults to true.

1.0.0

headerAttributionText

String

None

Attribution text to render in the header. The headerAttributionText value is shown only when no headerAttributionImage is provided and when headerAttributionPrimacy is true, or on a device that shows both Title/Subtitle and Attribution.

1.0.0

headerBackButtonAccessibilityLabel

String

None

An accessibility label to describe the back button to customers who use a screen reader.

1.1.0

headerBackButtonCommand

Command

{"type":"SendEvent","arguments":["goBack"]}

Command to execute when the user selects the back button. Defaults to SendEvent with a 'GoBack' argument.

1.1.0

headerBackButton

Boolean

false

Toggle to display back button in header. Defaults to false.

1.0.0

headerBackgroundColor

String

transparent

Optional color value to use as the background color for the Header. Defaults to transparent.

1.0.0

headerDivider

Boolean

false

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

headerSubtitle

String

None

Secondary text to render in header.

1.0.0

headerTitle

String

None

Primary text to render in header.

1.0.0

hideDivider

Boolean

false

When true, hide the horizontal divider displayed below each item in the list. Default to false.

1.1.0

hideOrdinal

Boolean

false

When true, do not display the number next to each list item. Defaults to false.

1.1.0

listItems

Array of listItems

Array of text list items to present in list.

1.1.0

primaryAction

Command

none

The action to trigger when the user selects an item from the list.

1.1.0

theme

String

dark

Colors will be swiched depending on the specified theme (light/dark). Default to dark theme

1.1.0

type

String

None

Always set to AlexaTextList

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."
          }
        ]
      }
    ]
  }
}
Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment