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):

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