Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.amazon.com/docs/custom-skills/display-template-reference.html below:

Display Template Reference | Alexa Skills Kit

The Display interface is deprecated and isn't supported on all Alexa devices. To add multimodal experiences to your skill, use Alexa Presentation Language (APL) instead.

To learn about APL, see Add Visuals and Audio to Your Skill.

The Alexa Design System for APL includes a set of templates that are similar to the display templates, so you can transition your skill. For details about which templates to use, see Replace display templates with responsive templates.

This reference describes specific information about display templates that you may want to include in your skill responses that create screen displays for your Alexa skill. For a reference to the Display interface directives and requests, see Display Interface Reference.

The body templates and list templates are designed to support a wide range of presentations. The following behavior applies across templates:

• The textContent field contains primaryText, secondaryText, and tertiaryText.

• Each list template must include at least one list item.

• A hint can be included with BodyTemplate2, BodyTemplate6, and ListTemplate2, by use of the Hint directive. See Hint Directive.

• For Echo Show and Fire TV Cube, the back button appears by default on each template, but can be hidden. The back button does not appear on Echo Spot, but the customer can achieve the same effect with a long swipe from the left. See Back Button Object.

The images shown below may not be to scale, and may not exactly represent what you see on the device.

When titles are displayed, they typically appear as headers, which are either left-aligned or center-aligned, depending on the template or the device.

To use APL instead of this deprecated display template (recommended)

Create an APL document and use one of the following APL responsive templates:

• AlexaHeadline displays brief text over a background.
• AlexaDetail displays longer text over a background. The layout scrolls, so longer text isn't cut off.

For details, see Replace display templates with responsive templates.

{
  "type":"BodyTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "title": "string",
  "textContent": TextContent
}

• This template does not support full-width foreground images. Instead, developers should use BodyTemplate7 for this purpose.
• Line lengths with the default font size of 7 will vary, so text will wrap differently on different-sized devices.
• If scrolling is needed, the body text will scroll by touch, and the skill icon and header text are fixed.

Echo Show and Fire TV Cube

• Title text left-aligned
• Skill icon
• Full-width TextView, top and left aligned, default font size 7, scrollable (if needed)
• Allowance for small, in-line images
• Background image (optional)

Echo Spot

• Title text center-aligned
• Skill icon
• TextView top and left aligned, default font size 7, scrollable (if needed)
• Allowance for small, in-line images
• Background image (optional)

Skills as displayed on Echo Show and Echo Spot

Wireframe representations for BodyTemplate1

Fire TV Cube

Echo Show

Echo Spot

To use APL instead of this deprecated display template (recommended)

Create an APL document and use the AlexaDetail responsive template to display text along with a foreground image.

For details, see Replace display templates with responsive templates.

{
  "type": "BodyTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

• Use BodyTemplate2 when you have a limited amount of text that is paired with an image.
• Keep the content short and concise, to supplement but not to replace the VUI.
• Content that displays as side-by-side on Echo Show and Fire TV Cube is stacked on Echo Spot. The image in the background, and the text will layer on top of it.
• Hints are not displayed on Echo Spot.
• BodyTemplate2 and BodyTemplate3 render the same on Echo Spot, except that text is auto-centered on BodyTemplate2.
• If scrolling is required, the full screen, including the skill icon, header text, and body content, will scroll via touch.
• Do not include important information such as trademarks in the background image.

• Title text is left-aligned
• Skill icon
• TextView left, aligned left, default font size 3, no scrolling
• Foreground image right
• Hint (optional)
• Background image (optional)

• No title text
• Skill icon
• TextView left, aligned center, default font size 3, scrollable (if needed), text will layer on top
• Foreground image will become the background image, with a 70% opacity black scrim over it
• Background image (optional) does not render on Echo Spot

Skills as displayed on Echo Show and Echo Spot

Wireframe representations of BodyTemplate2

Fire TV Cube

Echo Show

Echo Spot

To use APL instead of this deprecated display template (recommended)

Create an APL document and use the AlexaDetail responsive template to display text along with a foreground image.

For details, see Replace display templates with responsive templates.

{
  "type": "BodyTemplate3",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

• Content that is displayed side-by-side on Echo Show and Fire TV Cube is stacked on Echo Spot. The image is in the background, and the text is layered on top of it.
• BodyTemplate2 and BodyTemplate3 are rendered the same on Echo Spot. Text is aligned left on BodyTemplate3.
• If scrolling is required, the full screen, including the skill icon, header text, and body content, will scroll via touch.
• Do not include important information such as trademarks in the background image.

• Title text
• Skill icon
• TextView is on the right and left-aligned, scrollable (if needed), default font size 3
• Foreground image left
• Background image (optional)

• No title text
• Skill icon
• TextView is on the left and left-aligned, default font size 3, scrollable (if needed), text will layer on top
• Foreground image will become the background image, with a 70% opacity black scrim over it
• Background image (optional)

Skills as displayed on Echo Show and Echo Spot

Wireframe representations of BodyTemplate3

Fire TV Cube

Echo Show

Echo Spot

To use APL instead of this deprecated display template (recommended)

Create an APL document and use the AlexaHeadline responsive template to display brief text over a background.

For details, see Replace display templates with responsive templates.

Display Characteristics

• Skill icon
• Full-width TextView (2-3 lines max), bottom-aligned, left-aligned, default font size 7, no scrolling
• Hint (optional)
• Background image (optional)

• Skill icon
• TextView is middle- and center-aligned, scrollable (if needed), default font size 7
• No hints appear on Echo Spot
• Background image (optional)

Guidelines for BodyTemplate6:

• Hints are not displayed on Echo Spot.
• On Echo Spot, background images are scaled down based on the aspect ratio, and then centered within the available viewport. For example, a 1024x600px background image on Echo Show will be scaled to 819x480px on Echo Spot. Thus, part of a background image may not be visible on Echo Spot.
• If scrolling is required on Echo Spot, the full screen, including the skill icon, header text, and body content, are scrolled via touch.

{
  "type": "BodyTemplate6",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "image": "Image",
  "textContent": TextContent
}

Skills as displayed on Echo Show and Echo Spot

Wireframe representations of BodyTemplate6

Fire TV Cube

Echo Show

Echo Spot

To use APL instead of this deprecated display template (recommended)

Create an APL document and combine the following responsive components to create a similar look.

• AlexaBackground to display a background image.
• AlexaHeader to display text on the top of the screen.
• AlexaImage to display a scalable foreground image.

For an example, create a new APL document in the authoring tool and select the Image Display Sample.

Display Characteristics

• Title text
• Skill icon
• Full-width, scalable ImageView for foreground image
• Background image (optional)

• Title text
• Skill icon
• Full-width, scalable ImageView for foreground image
• Background image (optional)

Guidelines for using BodyTemplate7:

• BodyTemplate7 supports scalable foreground images on Alexa-enabled devices with a screen.
• On Echo Spot, the foreground image will center within the viewable area, and will scale up and down appropriately, keeping the original aspect ratio.

{
  "type": "BodyTemplate7",
  "token": "SampleTemplate_3476",
  "backButton": "VISIBLE",
  "title": "Sample BodyTemplate7",
  "backgroundImage": {
    "contentDescription": "Textured grey background",
    "sources": [
      {
        "url": "https://www.example.com/background-image1.png"
      }
    ]
  },
  "image": {
    "contentDescription": "Mount St. Helens landscape",
    "sources": [
      {
        "url": "https://example.com/resources/card-images/mount-saint-helen-small.png"
      }
    ]
  }
}

Skills as displayed on Echo Show and Echo Spot

If the foreground image is transparent, then the visual effect is different, as shown here.

Wireframe representations of BodyTemplate7

Fire TV Cube

Echo Show

Echo Spot

To use APL instead of this deprecated display template (recommended)

Create an APL document and use the AlexaTextList responsive template to display a vertical scrolling list of text items. List items can include image thumbnails and multiple fields of information.

For details, see Replace display templates with responsive templates.

Display characteristics

• Title text
• Skill icon
• List items:
  • Primary text, default font size 7
  • Secondary text (optional), default font size 3
  • Tertiary text (optional), default font size 5
  • Image (optional)
  • Background image (optional)

• Title text
• Skill icon
• List items:
  • Primary text, default font size 7
  • Secondary text (optional), default font size 3
  • Tertiary text (optional), default font size 3
  • Image (optional),
  • Background image (optional)

Guidelines for using ListTemplate1:

• Use this template for lists where images are not primary content.
• Ensure that list items are selectable via touch, and selectable by voice using the primary text or the ordinal.
• If using thumbnail images, the space for text is reduced.
• If there is more text than can be displayed on the screen, an ellipsis will appear.

{
  "type": "ListTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    }
  ]
}

To use APL instead of this deprecated display template (recommended)

Create an APL document and use the AlexaLists responsive template with listImagePrimacy set to true to display image items in a horizontal list.

For details, see Replace display templates with responsive templates.

Display characteristics

• Title text
• Skill icon
• List items:
  • Primary text, default font size 2
  • Secondary text (optional), default size 24sp (undefined font size)
  • Image (square, portrait, 4:3 or 16:9)
  • Background image (optional)
  • Hint

• No title text
• Skill icon
• List items:
  • Primary text, default font size 7
  • Secondary text (optional), default font size 2
  • List item image will become the background image, with a 70% opacity black scrim over it
  • Background image (optional)

Guidelines for using ListTemplate2:

• Use this template for lists where images are the primary content.
• Ensure list items are selectable via touch, and selectable by voice using the primary text or the ordinal.
• Keep in mind that text will truncate on Echo Spot particularly, so make sure the primary text on the screen is descriptive enough that the customer is aware of what they are selecting.
• Only one list item will be visible on the screen at a time.
• Text will layer on top of the foreground image now, and be bottom-aligned.
• Hints will not display on Echo Spot.
• If there is more text than can be displayed on the screen, an ellipsis will appear.

{
  "type": "ListTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
  ]
}

This table lists all of the elements that can be found in a display template, although each template might use only a subset of these elements.

{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}

{
    "primaryText": ...,
    "secondaryText": ...,
    "tertiaryText": ...
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}

  [
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    },
    ...
    ...
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    }
  ]

For template-related information, see:

• Character Count Maximums for Display Templates for information on how many characters can be used in a template.
• Display Image Sizes for Each Template for information about the appropriate image sizes and shapes for each template.

To build skills with screen display, see:

• How to Build Alexa Skills for Alexa-Enabled Devices With a Screen for a quick start to creating an Alexa skill with screen support.

• Configure a Skill to Support the Display Interface

• Best Practices for using Display Templates for design guidance.

• Use Display Templates to Show Content on Screens for device display and behavior specifications.

• Display Interface Reference for information about using the Display interface.

Last updated: Nov 28, 2023

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4