<img alt="" src="https://secure.agile365enterprise.com/790157.png" style="display:none;">

APL: Alexa Presentation Language-basics

author
By Sanjay Rohila Feb 3, 2019
APL: Alexa Presentation Language-basics
APL: Alexa Presentation Language-basics

I have been using display templates for quite a while now for screen enabled Alexa devices. There are few templates and directives we can use in response for display devices. But there is not as much in customization we can do about templates and layout.

Alexa Presentation Language (APL) is a beta feature which gives lot more power to developers. APL is a new directive type in DisplayRenderer. To give a perspective on what we can do is, below is the simple view I have created (below is code which is responsible for this view):

image showing header and footer block

A Basic APL document must have the type, version, and mainTemplate.

{
"type": "APL",
"version": "1.0",
"mainTemplate": {
"item": {
"type": "Text",
"text": "Hello, world"
}
}
}

There are lots of components (Text, Image, Video etc) that we can use in APL. We can also create a sequence for repeating set of components. For more details see the list of components — https://developer.amazon.com/docs/alexa-presentation-language/apl-component.html

We can define various styles for components, somewhat similar to CSS — color, font, background etc. Have a look at https://developer.amazon.com/docs/alexa-presentation-language/apl-styled-properties.html for details about styles.

Following is the document which is responsible for the above view. 

To use this in Alexa response we have to add Alexa.Presentation.APL.RenderDocument directive and add the above code in document property. The result would be:

{
"version": "1.0",
"response": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>This is a minimal APL document</speak>"
},
"directives": [{
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "document1",
"document": <content of above gist>
}]
}
}

To play around APL, try this new tool from Alexa team - https://developer.amazon.com/alexa/console/ask/displays

Stay tuned for followup post where we are going to talk to advance of APL including - dataSources, videos, sequence, html5 (this is gonna be huge, once supported by APL - it means we can run PWA apps in Alexa devices).

Subscribe to our newsletter