Grid List

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

The Alexa grid list template (AlexaGridList) displays a list of images and text in a grid. AlexaGridList is a full-screen template that optionally displays a header and background. You provide a set of image-based items to display in the list and configure the appearance of the list, such as including dividers and whether to number the items. You can also provide the command to run when a user selects an item from the list.

Important: AlexaGridList requires APL 1.4 or later. Provide an alternate experience for devices running older versions of APL.

Compatibility

AlexaGridList is designed to work with all standard viewport profiles in the alexa-viewport-profiles package:

All hub round profiles
All hub landscape profiles
All hub portrait profiles
All mobile profiles
All TV profiles

If you use AlexaGridList on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaGridList, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaGridList was introduced in version 1.2.0.

AlexaGridList parameters

All parameters except type are optional.

Name	Type	Default	Description	Widget support	Version added
`backgroundAlign`	String	`center`	Image/video alignment to apply to background image/video.	Not supported	1.2.0
`backgroundBlur`	Boolean	`false`	When `true`, display the provided background image with a blur effect. Applies when `backgroundImageSource` contains a value. Defaults to `false`.	Not supported	1.2.0
`backgroundColor`	Color	—	Color to use as a background color. Used when neither `backgroundImageSource` or `backgroundVideoSource` contain values.	Not supported	1.2.0
`backgroundColorOverlay`	Boolean	`false`	When `true`, apply a scrim to the background to make it easier to read the text displayed over the image or video.	Not supported	1.2.0
`backgroundImageSource`	String	—	URL for the background image source. Used when `backgroundVideoSource` isn't provided.	Not supported	1.2.0
`backgroundOverlayGradient`	Boolean	`false`	When `true`, apply a gradient to the background.	Not supported	1.2.0
`backgroundScale`	String	`best-fill`	Image or video scaling to apply to background image or video.	Not supported	1.2.0
`backgroundVideoSource`	Video source	—	The background video source. Provide a source in the same format shown for the `source` property of the Video component.	Not supported	1.2.0
`customLayoutName`	Any	—	The name of a custom layout to use for each list item. Leave this unset to use the `AlexaImageListItem` layout for your list items. See Provide the list items.	Not supported	1.2.0
`defaultImageSource`	String	—	URL for a default image to use for any list items that don't have an `imageSource` defined. Provide a `defaultImageSource` to make sure that image containers are never empty. The same `defaultImageSource` is used for all list items that are missing `imageSource`.	Not supported	1.2.0
`entities`	Array	—	Array of entity data to bind to this template.	Not supported	1.2.0
`headerAttributionImage`	String	—	URL for attribution image source. Shown when `headerAttributionPrimacy` is `true`, or on a device that shows Title/Subtitle and Attribution.	Not supported	1.2.0
`headerAttributionOpacity`	Number	`1` for small, round hubs. `@opacitySecondary` for all others.	The opacity of the attribution text and attribution image.	Not supported	1.3.0
`headerAttributionPrimacy`	Boolean	`true`	When `true`, display the `headerAttributionImage` on devices that display a single element due to screen size. When `false`, display the `headerTitle` and `headerSubtitle`.	Not supported	1.2.0
`headerAttributionText`	String	—	Attribution text to render in the header. Shown when `headerAttributionImage` doesn't have a value and `headerAttributionPrimacy` is `true`, or on a device that shows both Title/Subtitle and Attribution.	Not supported	1.2.0
`headerBackButton`	Boolean	`false`	When `true`, displays a back button in the header. Set the `headerBackButtonCommand` property to specify a command to run when the user clicks this button.	Not supported	1.2.0
`headerBackButtonAccessibilityLabel`	String	`Back`	An accessibility label to describe the back button to customers who use a screen reader.	Not supported	1.2.0
`headerBackButtonCommand`	Command	`{"type":"SendEvent","arguments":["goBack"]}`	Command to run when the user selects the back button.	Not supported	1.2.0
`headerBackgroundColor`	String	`transparent`	Optional color value to use as the background color for the header.	Not supported	1.2.0
`headerDivider`	Boolean	`false`	When `true`, display a divider below the header to help separate it from the content.	Not supported	1.2.0
`headerSubtitle`	String	—	Secondary text to render in header.	Not supported	1.2.0
`headerTitle`	String	—	Primary text to render in the header.	Not supported	1.2.0
`hideOrdinal`	Boolean	`false`	When `true`, don't display the number next to each list item.	Not supported	1.2.0
`imageAlignment`	String	`center`	Sets a default for the `imageAlignment` option for the items in `listItems`. See the `imageAlignment` property in `AlexaImageListItem`.	Not supported	1.2.0
`imageAspectRatio`	String	`square`	Aspect ratio to use for the image bounding box for all the items in the list. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, widescreen. This property works the same as the `imageAspectRatio` property for the `AlexaImage` responsive component except that the height and width of the bounding box are pre-defined based on the aspect ratio and can't be changed. All list items always use the same aspect ratio.	Not supported	1.2.0
`imageBlurredBackground`	Boolean	`false`	Sets a default for the `imageBlurredBackground` option for the items in `listItems`. See the `imageBlurredBackground` property in `AlexaImageListItem`.	Not supported	1.2.0
`imageHideScrim`	Boolean	`false`	Sets a default for the `imageHideScrim` option for the items in `listItems`. See the `imageHideScrim` property in `AlexaImageListItem`.	Not supported	1.2.0
`imageMetadataPrimacy`	Boolean	`true`	When `true`, prioritize the `secondaryText` and `tertiaryText` on small devices. Set this property to `false` to hide the `secondaryText` and `tertiaryText`. This property is ignored on larger devices.	Not supported	1.2.0
`imageRoundedCorner`	Boolean	`true`	Sets a default for the `imageRoundedCorner` option for the items in `listItems`. See the `imageRoundedCorner` property in `AlexaImageListItem`.	Not supported	1.2.0
`imageScale`	String	`best-fit`	Sets a default for the `imageScale` option for the items in `listItems`. See the `imageScale` property in `AlexaImageListItem`.	Not supported	1.2.0
`imageShadow`	Boolean	`true`	Sets a default for the `imageShadow` option for the items in `listItems`. When `true`, display a drop shadow behind the image for each list item.	Not supported	1.3.0
`imageShowProgressBar`	Boolean	`true`	When `true`, display the progress bar on the image overlay. Set the progress bar percentage in each individual list item with the `imageProgressBarPercentage` property.	Not supported	1.2.0
`layoutDirection`	String	`${environment.layoutDirection}`	Specifies the layout direction for the content. Set this property to either `LTR` (left-to-right) or `RTL` (right-to-left). This property doesn't inherit the `layoutDirection` from the component's parent container. Therefore, explicitly set this property when needed. For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.	Not supported	1.4.0
`listEntities`	Any	—	Array of entity data bind to GridSequence.	Not supported	1.5.0
`listId`	String	—	An identifier to assign to the `Sequence` component used for the list. Set `listId` to a value to enable voice-based scrolling with the built-in intents. Also set this parameter to an ID if you want to target the list for commands, such as the `SpeakList` command. The `listId` must be different from the `id` for the overall component. If you set `listId` and `id` to the same value, you can't target the list for commands.	Not supported	1.2.0
`listItemHeight`	Dimension	Calculated based on size of data to display.	The height for the list items.	Not supported	1.2.0
`listItemHorizontalCount`	Number	0	The number of list items to display in a single row. Setting this property a larger value might truncate your images. Leave this unset to use a default optimized the `imageAspectRatio` and viewport size. See Horizontal list density.	Not supported	1.2.0
`listItems`	Array of `AlexaImageListItem`	—	An array of items to display in the list. Each item is an object with the same properties as defined in `AlexaImageListItem` or a set of properties defined in a custom list item. See Provide the list items.	Not supported	1.2.0
`primaryAction`	Command	—	Sets a default for the `primaryAction` option for the items in `listItems`. Set this property to the command to trigger when the user selects an item from the list. See the `primaryAction` property in `AlexaImageListItem`.	Not supported	1.2.0
`speechItems`	Any	—	An array of speech items. The `AlexaGridList` template assigns each item in this array to the `speech` property of the corresponding list item. Use this property when you want to use the `SpeakList` command to speak the list items.	Not supported	1.2.0
`theme`	String	`dark`	Set the dark or light color theme. The selected theme controls the colors used for the template.	Not supported	1.2.0
`type`	String	—	Always set to `AlexaGridList`.	Not supported	1.2.0
`videoAudioTrack`	String	`foreground`	Audio track to play on when playing the video. Can be `foreground` \| `background` \| `none`.	Not supported	1.2.0
`videoAutoPlay`	Boolean	`false`	When `true`, the video begins playing automatically when the document renders on the device. Applies when `backgroundVideoSource` contains a value.	Not supported	1.2.0

Horizontal list density (`listItemHorizontalCount`)

The AlexaGridList doesn't scroll horizontally. The template displays a fixed number of items in multiple rows. You can set the number of list items to display in a single row with the listItemHorizontalCount property. By default, AlexaGridList sets listItemHorizontalCount to a number based on the imageAspectRatio and the viewport size. This default ensures that the full list items display and aren't truncated.

The following table summarizes the defaults for the standard viewport profiles and image aspect ratios.

Image aspect ratio	Hub round	Hub landscape small	Hub landscape medium	Hub landscape	TV fullscreen
Square	1	3	3	3	4
Round	1	3	3	3	4
Standard landscape	1	3	3	3	4
Standard portrait	2	4	4	4	5
Poster landscape	1	3	3	3	4
Poster portrait	2	4	4	4	5
Widescreen	1	2	2	3	4

To use these responsive defaults, leave listItemHorizontalCount not set. If you do change listItemHorizontalCount, note that AlexaGridList truncates your list items as needed to fit the specified number of items into a row.

AlexaGridList using the default density based on image aspect ratio

AlexaGridList truncates list items to fit more on the row

Provide the list items

The AlexaGridList template expects an array of items in the listItems property. Use one of the following options to structure your list items:

Provide an array of objects, each with the same properties as those defined in the AlexaImageListItem responsive component.
Define a custom layout for your list items, and then pass an array of objects that correspond to your custom items.

Use AlexaImageListItem for the list items

The following example illustrates an array of items in a data source called gridListData.

{
  "gridListData": {
    "listItemsToShow": [
      {
        "primaryText": "First list item",
        "secondaryText": "Secondary text",
        "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gruyere.png",
        "imageProgressBarPercentage": 90,
        "imageShowProgressBar": false,
        "ratingSlotMode": "multiple",
        "ratingNumber": 2.87,
        "ratingText": "(206 ratings)"
      },
      {
        "primaryText": "Second list item",
        "secondaryText": "Secondary Text",
        "tertiaryText": "Tertiary text",
        "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png",
        "providerText": "Provider Text",
        "imageProgressBarPercentage": 50,
        "ratingSlotMode": "multiple",
        "ratingNumber": 4.5,
        "ratingText": "(500 ratings)"
      },
      {
        "primaryText": "No image, use the default",
        "secondaryText": "Secondary text",
        "ratingSlotMode": "multiple",
        "ratingNumber": 2,
        "ratingText": "(50 ratings)"
      },
      {
        "primaryText": "Fourth list item",
        "secondaryText": "No progress bar",
        "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/tl_brie.png",
        "ratingSlotMode": "multiple",
        "ratingNumber": 5,
        "ratingText": "(452 ratings)"
      },
      {
        "primaryText": "Fifth list item",
        "secondaryText": "With background blur",
        "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
        "ratingSlotMode": "multiple",
        "ratingNumber": 0,
        "ratingText": "(206 ratings)"
      },
      {
        "primaryText": "Sixth list item (long text that wraps)",
        "secondaryText": "Longer secondary text that truncates",
        "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/sm_blue.png",
        "ratingSlotMode": "multiple",
        "ratingNumber": 0,
        "ratingText": "(206 ratings)"
      }
    ]
  }
}

Then, bind this array to the listItems property with the expression ${gridListData.listItemsToShow}.

{
  "type": "AlexaGridList",
  "headerTitle": "Header Title",
  "headerAttributionImage": "https://s3.amazonaws.com/ask-skills-assets/apl-layout-assets/attribution_dark_hub_prime.png",
  "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT6_Background.png",
  "listItems": "${gridListData.listItemsToShow}",
  "imageShowProgressBar": true
}

Use a custom layout for the list items

You can use a custom layout to define the list items displayed in AlexaGridList. Use this option when the AlexaImageListItem format doesn't meet your needs.

For more details about building your own layouts, see APL Layout.

To use a custom layout for the list items

Create an array of list items to display. Each item in the array is an object with a set of properties. The following example illustrates a list item object with two properties: listItemText and color.
```
 {
   "listItemText": "First list item",
   "color": "@colorGreen800"
 }
```
In the layouts section of your APL document, create a custom layout to display a single list item. Use the data property to access the data for an individual item.

For example, if each list item in your array has a listItemText property with the list item text to display, use data.listItemText to refer to that property in the layout. AlexaGridList passes the listItems you provide to the data property for the list. For more details about how the data property works, see data array inflation.

The following example shows a custom layout that draws a box with the background color and text provided by an item in the data array.
```
 {
   "type": "Frame",
   "backgroundColor": "${data.color}",
   "padding": "@spacingSmall",
   "items": [
     {
       "type": "Text",
       "width": "100%",
       "height": "100%",
       "text": "${data.listItemText}",
       "textAlign": "center",
       "textAlignVertical": "center"
     }
   ]
 }
```

In AlexaGridList, set the customLayoutName property to the name of your custom layout and bind your array of list items to the listItems property.

     {
   "type": "AlexaGridList",
   "listItems": "${gridListData.listItemsToShow}",
   "customLayoutName": "MyListItem"
 }

The following example illustrates an AlexaGridList that uses a custom layout for the list items. The document defines a custom layout called MyListItem that displays the listItemText in a Frame that has the specified color for the background color. The data source in this example shows the structure of the array passed to listItems.

Note: The AlexaGridList template passes several properties to AlexaImageListItem to set defaults. For example, you can set defaultImageSource one time to specify an image to use when a given list item doesn't have an image. When you use a custom layout, your custom layout doesn't have access to these defaults.

Set defaults for the list items

The AlexaGridList template includes properties that correspond to properties in AlexaImageListItem. Use these to set default values for those properties. AlexaGridList ignores these defaults when you use a custom layout for your list items.

There are two types of defaults:

Defaults you can set or override for an individual item – AlexaGridList uses the value provided on the individual item when available, and uses the value provided on AlexaGridList otherwise.

For example, you might set imageScale to best-fit for the whole list, but then override it to best-fill for one item on the list.
Defaults that always apply to all the items in the list – AlexaGridList always uses the value provided on AlexaGridList for these properties. Any value in a corresponding property on an individual item is ignored.

For example, you must set imageAspectRatio on the whole list. You can't have a list in which some items display as squares and some as circles. Any value for imageAspectRatio on a list item is ignored.

The following table lists the properties you use as defaults.

Property	Can override on an item
`defaultImageSource`	No
`imageAlignment`	Yes
`imageAspectRatio`	No
`imageBlurredBackground`	Yes
`imageHideScrim`	Yes
`ImageMetadataPrimacy`	No
`imageRoundedCorner`	Yes
`imageScale`	Yes
`imageShadow`	Yes
`primaryAction`	Yes

For details about each of these properties, see AlexaImageListItem.

Specify the action for each list item

AlexaGridList is interactive. Users can select items on the list. Set the primaryAction property to the command you want to run when the user selects an item.

When you set primaryAction on the AlexaGridList component, AlexaGridList passes the command to each item on the list.

To override command for an individual list item, set the primaryAction property on the list item itself.

The following example shows how you to use the SendEvent command to send your skill a UserEvent request. This passes the number representing the selected item as part of the SendEvent.arguments array.

{
  "primaryAction": {
    "type": "SendEvent",
    "arguments": [
      "ListItemSelected",
      "${ordinal}"
    ]
  }
}

AlexaGridList example

The following example shows an AlexaGridList.

Was this page helpful?

Provide feedback

Last updated: Nov 28, 2023