Detail (1.2.0 - 1.3.0)

backgroundAlign

String

center

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

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.

1.2.0

backgroundColor

Color

—

Color to use as a background color. Used when neither backgroundImageSource or backgroundVideoSource contain values.

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.

1.2.0

backgroundImageSource

String

—

URL for the background image source. Used when backgroundVideoSource isn't provided.

1.2.0

backgroundOverlayGradient

Boolean

false

When true, apply a gradient to the background.

1.2.0

backgroundOverlayNoise

Boolean

false

When true, the Noise filter is applied to the background image.

1.2.0

backgroundScale

String

best-fill

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

1.2.0

backgroundVideoAudioTrack

String

foreground

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

1.2.0

backgroundVideoAutoPlay

Boolean

false

When true, the video begins playing automatically when the document renders on the device. Applies when backgroundVideoSource contains a value. Defaults to false.

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.

1.2.0

bodyText

String

—

The main body text to display. Since the entire layout scrolls, the body text can be long. This property is ignored when detailType is recipe.

1.2.0

button1AccessibilityLabel

String

—

A string describing button 1. Voice over reads this string when the user selects the button.

1.2.0

button1PrimaryAction

Command

—

The action to trigger when the user selects button 1.

1.2.0

button1Style

String

contained

The style to use for button 1. Set to contained or outlined. For details about the options, see the buttonStyle property for AlexaButton.

1.2.0

button1Text

String

—

The text to display on button 1. Button text should indicate the purpose of the button. Leave this property not set to remove button 1 from the layout. When both button1Text and button2Text are omitted, the entire button row is removed.

1.2.0

button1Theme

String

dark

Color theme to use for button 1. Set to light or dark.

1.2.0

button2AccessibilityLabel

String

—

A string describing button 2. Voice over reads this string when the user selects the button.

1.2.0

button2PrimaryAction

Command

—

The action to trigger when the user selects button 2.

1.2.0

button2Style

String

contained

The style to use for button 2. Set to contained or outlined. For details about the options, see the buttonStyle property for AlexaButton.

1.2.0

button2Text

String

—

The text to display on button 2. Button text should indicate the purpose of the button. Leave this property not set to remove button 2 from the layout. When both button1Text and button2Text are omitted, the entire button row is removed.

1.2.0

button2Theme

String

dark

Color theme to use for button 2. Set to light or dark.

1.2.0

detailImageAlignment

String

left

Determines the placement of the image on viewports wide enough to show the image and content side-by-side. Set to left or right.

1.2.0

detailType

String

generic

Specifies the type of layout to display. Set to one of the following: generic, moviesTV, location, or recipe. For details about each type of layout, see AlexaDetail content types and layouts.

1.2.0

emptyRatingGraphic

Any

empty

The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

entities

Array

—

Array of entity data to bind to this template.

1.2.0

fullRatingGraphic

Any

full

The graphic to display to represent a 'full' rating slot (such as a full star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

halfRatingGraphic

Any

half

The graphic to display to represent a 'half' rating slot (such as a half star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

headerAttributionImage

String

—

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

1.2.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.

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.

1.2.0

headerBackButton

Boolean

false

When true, display a back button in the header.

1.2.0

headerBackButtonAccessibilityLabel

String

—

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

1.2.0

headerBackButtonCommand

Command

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

Command to run when the user selects the back button.

1.2.0

headerBackgroundColor

String

transparent

Optional color value to use as the background color for the header.

1.2.0

headerDivider

Boolean

false

When true, display a divider below the header to help separate it from content.

1.2.0

headerSubtitle

String

—

Secondary text to render in header.

1.2.0

headerTitle

String

—

Primary text to render in header.

1.2.0

imageAlignment

String

center

Determines how to position the image within the bounding box. Used when the image is smaller than the bounding box. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. For more details about image alignment, see the imageAlignment property on AlexaImage.

1.2.0

imageAspectRatio

String

square

Aspect ratio to use for the image bounding box. The image width is set to a standard default based on the aspect ratio. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, and widescreen.

For more details about aspect ratios, see the imageAspectRatio property on AlexaImage. However, note that within AlexaDetail, you cannot specify the width of the image. To calculate the image size based on the aspect ratio, leave imageHeight not set.

1.2.0

imageBlurredBackground

Boolean

false

When true, display a blurred version of the image behind the image. size. Ignored when imageScale is set to fill or best-fill. For more details about this property, see the imageBlurredBackground property on AlexaImage.

1.2.0

imageCaption

String

—

A title or brief explanation of the image, displayed below the image.

1.2.0

imageHeight

Dimension

—

Height of the image bounding box. The image is scaled to fit within this height using the imageScale setting.

When imageHeight isn't set, the bounding box for the image uses a default width and calculates the height based on the selected imageAspectRatio.

When imageHeight is set, the bounding box for the image uses the specified height and a default width based on the selected imageAspectRatio. The resulting image then might not match the specified imageAspectRatio. For best results, set imageAspectRatio to the shape you want and leave imageHeight not set.

1.2.0

imageRoundedCorner

Boolean

true

When true, use rounded corners for the image.

1.2.0

imageScale

String

best-fit

Determines how to scale the image to fit within the bounding box. Options are none, fill, best-fit, best-fill, or best-fit-down. For more details about image scaling, see the imageScale property on AlexaImage.

1.2.0

imageShadow

Boolean

true

When true, display a drop shadow behind the image.

1.3.0

imageSource

String

—

URI for the image to display.

1.2.0

ingredientListItems

Any

—

Applies when detailType is recipe. Array of objects representing the recipe ingredients to display in a list. Each object has two properties:

ingredientsContentText – Contains the text to display.
ingredientsPrimaryAction – The command to run when the user selects the ingredient item.

See Recipe.

1.2.0

ingredientsHideDivider

Boolean

false

When true, hide the divider between each ingredient item.

1.2.0

ingredientsText

String

—

Applies when detailType is recipe. A heading to display before the list of ingredients. See Recipe.

1.2.0

locationText

String

—

Applies when detailType is location. Text to display after the primaryText to display the location name or address. See Location.

1.2.0

primaryText

String

—

The primary text to display in the content area. The primaryText displays in a larger font to provide a title.

1.2.0

quaternaryText

String

—

Applies when detailType is moviesTV. A fourth block of text to display in the content block. Useful for displaying movie or show length or other details about the item. See Movies and TV.

1.2.0

ratingGraphicType

String

AVG

The type of graphic to use for the rating. Set to AVG or image.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingNumber

Number

—

The numeric rating between 0 and 5. Used when ratingSlotMode is multiple.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingSlotMode

String

multiple

Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to single, provide a single graphical asset in the singleRatingGraphic property. When multiple, provide the numeric rating in ratingNumber.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingSlotPadding

Dimension

3dp

The padding to use between each rating slot. Used when ratingSlotMode is multiple. Can be between 0dp and 4dp.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingText

String

—

Text to display next to the rating.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

scrollViewId

String

—

The component ID for the ScrollView used to present the content. Set this property when you need to target the component with commands.

1.2.0

secondaryText

String

—

The secondary text to display in the content area, after the primaryText.

1.2.0

singleRatingGraphic

Any

—

The graphic to display to represent the rating. Used when ratingSlotMode is single. You can provide either a reference to an AVG or the URL of an image.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

singleRatingGraphicWidth

Dimension

—

The width of the bounding box for the single graphic that represents the rating. Used when ratingSlotMode is single.

Used with the variants that display a rating (moviesTV, location, and recipe). For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

tertiaryText

String

—

Applies when detailType is moviesTV. A third block of text to display in the content block. Useful for displaying movie or show length or other details about the item. See Movies and TV.

1.2.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

1.2.0

type

String

—

Always set to AlexaDetail.

1.2.0