Add Visuals to Your Skills with New Alexa Presentation Language (APL) Support for Responsive Components and Templates, Dynamic Data Sources, New Time Primitives, and Conditional Commands
Starting today, you can use the next version of the Alexa Presentation Language (APL) with support for new Alexa responsive components and templates, dynamic data sources, new time primitives, and conditional commands. APL is supported on Echo Show devices, Fire TVs, and other devices with screens such as LG TVs and Lenovo Smart Tab devices.
New Responsive Components
- AlexaIconButton: Make a small vector graphic into a button that can trigger an action in your skill when touched or selected using a controller.
- AlexaRating: Add a rating with custom text to your skill so you can display customer feedback.
New Responsive Templates
- AlexaLists: Create lists of any kind using a full-screen template that incorporates other responsive templates based on the viewport profile and data.
- AlexaPaginatedList: Create a list of items in a series of pages using the Pager component.
- AlexaImageList: Display a scrolling list of images and text.
You can now create Alexa experiences that show large lists by progressively loading items as the customers scroll through the content. These lists can be used to present a list of restaurants to eat at, travel destinations, contact lists, videos to watch, and so on. Sending data from your data source piecemeal instead of all at once can provide a better customer experience.
This capability uses a new data source type, which can be used for both defining a list of items for lazy loading and a list you want to update. You can use new dynamic data sources and associated APIs to add, remove, or update specific values without having to re-render your APL document. To get started, check out our documentation for dynamic data sources. The new interfaces which enable dynamic data sources are:
Note: When you do need to render a new APL document, you can still keep the experience seamless by maintaining the same background color or gradient across documents.
Productivity tools such as timers are one of the most popular customer use cases on Alexa. You can use new top-level variables in APL to get the time. Additionally, the data-binding context also includes a Time object, which is a collection of built-in Time functions for manipulating and formatting time so that you can build analog clocks, digital clocks, countdown timers, and stopwatches into the experience of your skill.
The new Select command brings the power of conditional execution to commands, allowing you to execute a series of actions on an array of data. Depending upon values in your data sources, you can use a "when" clause to conditionally execute one command out of a list of commands.
For example, imagine a character that does a dance on-screen driven by the AnimateItem command except the animations are completely controlled by the values in the associated data source. To build new dance moves, just bind with a new data source.
Our goal is to continue investing in APL to make it easier to create visually rich experiences for your customers. As a reminder, here are some key features we recommend checking out:
- Use the AnimateItem command to animate the position, scale, rotation, or opacity of any APL component or layout. You can also combine AnimateItem with Alexa Vector Graphics (a subset of the Scalable Vector Graphics standard) to create new experiences that will help you keep your customers engaged.
- Check out the APL video component to show an embedded video or series of videos to play in your skill. You can use this in conjunction with the transport controls responsive component to give on screen control for your videos.
Ready to get started? Read more about the latest version of APL.