What's New in APL 1.6

Alexa Presentation Language (APL) 1.6 introduces new features and capabilities for APL.

Authoring tool updates

The APL authoring tool has been updated with several improvements.

  • When creating a new document, the authoring tool offers improved sample templates to use as a starting point. These templates use the responsive components and templates and follow best practices for responsive design, so they look good on different devices. For details, see Create and Edit an APL Document.
  • You can now convert animations in Lottie format into Alexa Vector Graphics (AVG) format and use them within your APL documents. Lottie is a JSON animation format that you can export from Adobe After Effects. For details, see Import a Lottie Animation.
  • The authoring tool includes three new viewport profiles for previewing on tablet devices: Mobile Small, Mobile Medium, and Mobile Large. These correspond to new viewport profiles in the alexa-viewport-profiles package. Use these profiles in your conditional logic to create documents that look good on tablet devices.
    • For details about previewing a document in the authoring tool with different viewport profiles, see Preview a visual response.
    • For details about using the alexa-viewport-profiles package in your document, see Viewport Profiles.

APL responsive components and templates

APL 1.6 includes some updates to the responsive components and templates:

  • The alexa-styles package has been updated to 1.2.0. The package has been updated with some stylistic changes to the existing styles. For details about the styles, see Styles and Resources
  • The viewport-profiles-package has been updated to 1.2.0. The package now includes the new mobileSmall, mobileMedium, and mobileLarge profiles. For details about the viewport profiles package, see Viewport Profiles.
  • The alexa-layouts package has been updated to 1.3.0. Although there are no new components or templates, some existing items have new properties. The following table shows the new properties available to the components and templates in the alexa-layouts package.
Property Description Available on components

imageShadow

When true, displays a drop-shadow behind the image.

imageThumbnailShadow

When true, displays a drop-shadow behind the image thumbnail.

headerAttributionOpacity

Sets the opacity of the attribution text and attribution image. Set to a number between 0 and 1.

AlexaHeader

ratingTextOpacity

Sets the opacity of the text shown next to the rating. Set to a number between 0 and 1.

AlexaRating

For an overview of the components and templates, see Responsive Components and Templates.

Support for tablets that can resize the screen

APL supports devices that can change their characteristics during the skill session. For example, the user can turn a tablet to switch between portrait and landscape. You can create APL documents that automatically resize to fit the new screen. You can also use the new Reinflate command to change the layout when the screen size changes.

See the following topics:

Custom transitions for Pagers

For a Pager component, you can now create custom animated page transitions that replace the default page transition. Provide an array of page move handlers in the new handlePageMove property on the Pager.

For details and examples, see handlePageMove.

Better support for Japanese text

  • The Text component now supports a <nobr> tag that prevents text from automatically wrapping across multiple lines.
  • The new lineBreakProcessor transformer automatically adds <nobr> tags to Japanese text.

General updates

Token-based lazy loading

New data source types, directives, and requests to support token-based lazy loading. This lets you progressively load items in large lists as the user scrolls through the content. Token-based lazy loading is useful when your back-end uses a token-based API for the data. See the following topics:

Component and layout properties

  • All components now support a padding property. You can set the padding for the top, left, bottom, and right sides with a single array. For details, see padding.
  • All components now support the preserve property to indicate properties to save when reinflating the document. For details, see preserve and Support Tablets and Other Devices that Can Change Size.
  • The Sequence and GridSequence components support the snap property. When the user scrolls through the content and then stops scrolling, the component can shift the child items to "snap" to the start, center, or end of the container. For details, see Sequence and GridSequence
  • Several component properties are now dynamic. You can change the values of dynamic properties with the SetValue command.
  • Several component properties are now styled. You can set the value of a styled property with a style. For a full list of all styled properties, see APL Styled Properties.
  • Layouts now support the bind property, similar to the bind property for components. For details, see the bind property.

New function calls

The Math object in the data-binding context provides 2 new functions:

Function Description Example

Math.float(x)

Converts x into a floating-point number. A trailing '%' character specifies a percentage.

${Math.float('23.4')} == 23.4
${Math.float('23.4%')} == 0.234

Math.int(x,[b=10])

Convert x into an integer. b is the optional base to use for string conversion, where 0 auto-detects or 2-36 define the base.

${Math.int('23.3')} == 23
${Math.int('20', 16)} == 32
${Math.int('0x20', 0)} == 32

For details, see Math functions

Skill response size limit increased

The total size of a skill response can now be up to 120 kilobytes. The APL document and data sources can take full advantage of the larger response size. Previously, the APL document and data sources were limited to 24 kilobytes.

Work with APL versions

In your APL document, set the version to "1.6".

A user can invoke your skill on older devices that do not support the latest version of APL. When working with features introduced in a specific version of APL, provide an alternative experience for devices running earlier versions of APL. The environment.aplVersion property in the data-binding context returns the version of APL on the device. This property returns null for APL 1.0 and the actual version for 1.1 or later. Use this property in when statements to create conditional blocks based on version.

For example, this renders a VectorGraphic on a device with APL 1.1 or later, and an image for APL 1.0:

[
  {
    "type": "Image",
    "when": "${environment.aplVersion == null}",
    "width": 100,
    "height": 100,
    "source": "https://example.com/alternate/image/for/older/versions.jpg"
  },
  {
    "type": "VectorGraphic",
    "when": "${environment.aplVersion != null}",
    "source": "lightbulb",
    "width": 100,
    "height": 100,
    "scale": "best-fit"
  }
]

The APL version is also available in requests sent to your skill, in:

context.System.device.supportedInterfaces.['Alexa.Presentation.APL'].runtime.maxVersion

This example shows a request from a device with 1.6. Note that the session, request, and viewport properties are omitted for brevity.

{
  "version": "1.0",
  "session": {},
  "context": {
    "System": {
      "application": {
        "applicationId": "amzn1.ask.skill.1"
      },
      "user": {
        "userId": "amzn1.ask.account.1"
      },
      "device": {
        "deviceId": "amzn1.ask.device.1",
        "supportedInterfaces": {
          "Alexa.Presentation.APL": {
            "runtime": {
              "maxVersion": "1.6"
            }
          }
        }
      },
      "apiEndpoint": "https://api.amazonalexa.com",
      "apiAccessToken": "eyJ..."
    },
    "Viewport": {}
  },
  "request": {}
}

Previous APL versions