I have made a template using the Alexa Display tool available inside the skill builder. I made my template from a sample template in the builder which is similar to List Template 2. Then in my lambda, I added this piece of code inside my Launch request where I want to display the template:
if (supportsAPL(handlerInput)) {
handlerInput.responseBuilder
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
document: require('./apl.json')
});
and this code at the end,
function supportsAPL(handlerInput) {
const supportedInterfaces =
handlerInput.requestEnvelope.context.System.device.supportedInterfaces;
const aplInterface = supportedInterfaces['Alexa.Presentation.APL'];
return aplInterface != null && aplInterface != undefined;
}
But I get the below output when I run my skill. The display screen is not even showing up in the emulator.
My code downloaded from the display builder is written below.
{
"document": {
"type": "APL",
"version": "1.1",
"settings": {},
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"resources": [
{
"description": "Stock color for the light theme",
"colors": {
"colorTextPrimary": "#151920"
}
},
{
"description": "Stock color for the dark theme",
"when": "${viewport.theme == 'dark'}",
"colors": {
"colorTextPrimary": "#f0f1ef"
}
},
{
"description": "Standard font sizes",
"dimensions": {
"textSizeBody": 48,
"textSizePrimary": 27,
"textSizeSecondary": 23,
"textSizeDetails": 20,
"textSizeSecondaryHint": 25
}
},
{
"description": "Common spacing values",
"dimensions": {
"spacingThin": 6,
"spacingSmall": 12,
"spacingMedium": 24,
"spacingLarge": 48,
"spacingExtraLarge": 72
}
},
{
"description": "Common margins and padding",
"dimensions": {
"marginTop": 40,
"marginLeft": 60,
"marginRight": 60,
"marginBottom": 40
}
}
],
"styles": {
"textStyleBase": {
"description": "Base font description; set color",
"values": [
{
"color": "@colorTextPrimary"
}
]
},
"textStyleBase0": {
"description": "Thin version of basic font",
"extend": "textStyleBase",
"values": {
"fontWeight": "100"
}
},
"textStyleBase1": {
"description": "Light version of basic font",
"extend": "textStyleBase",
"values": {
"fontWeight": "300"
}
},
"textStyleBase2": {
"description": "Regular version of basic font",
"extend": "textStyleBase",
"values": {
"fontWeight": "500"
}
},
"mixinBody": {
"values": {
"fontSize": "@textSizeBody"
}
},
"mixinPrimary": {
"values": {
"fontSize": "@textSizePrimary"
}
},
"mixinDetails": {
"values": {
"fontSize": "@textSizeDetails"
}
},
"mixinSecondary": {
"values": {
"fontSize": "@textSizeSecondary"
}
},
"textStylePrimary": {
"extend": [
"textStyleBase1",
"mixinPrimary"
]
},
"textStyleSecondary": {
"extend": [
"textStyleBase0",
"mixinSecondary"
]
},
"textStyleBody": {
"extend": [
"textStyleBase1",
"mixinBody"
]
},
"textStyleSecondaryHint": {
"values": {
"fontFamily": "Bookerly",
"fontStyle": "italic",
"fontSize": "@textSizeSecondaryHint",
"color": "@colorTextPrimary"
}
},
"textStyleDetails": {
"extend": [
"textStyleBase2",
"mixinDetails"
]
}
},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {
"FullHorizontalListItem": {
"parameters": [
"listLength"
],
"item": [
{
"type": "Container",
"height": "100vh",
"width": "100vw",
"alignItems": "center",
"justifyContent": "end",
"items": [
{
"type": "Image",
"position": "absolute",
"height": "100vh",
"width": "100vw",
"overlayColor": "rgba(0, 0, 0, 0.6)",
"source": "${data.image.sources[0].url}",
"scale": "best-fill"
},
{
"type": "AlexaHeader",
"headerTitle": "${title}",
"headerAttributionImage": "${logo}",
"grow": 1
},
{
"type": "Text",
"text": "${data.textContent.primaryText.text}",
"style": "textStyleBody",
"maxLines": 1
},
{
"type": "Text",
"text": "${data.textContent.secondaryText.text}",
"style": "textStyleDetails"
},
{
"type": "Text",
"text": "${ordinal} | ${listLength}",
"paddingBottom": "20dp",
"color": "white",
"spacing": "5dp"
}
]
}
]
},
"HorizontalListItem": {
"item": [
{
"type": "Container",
"maxWidth": 528,
"minWidth": 312,
"paddingLeft": 16,
"paddingRight": 16,
"height": "100%",
"items": [
{
"type": "Image",
"width": "23vh",
"height": "23vh",
"paddingLeft": "0",
"paddingTop": "0",
"source": "${data.image.sources[0].url}",
"alignSelf": "start",
"position": "relative"
},
{
"type": "Text",
"text": " ${data.textContent.primaryText.text}",
"style": "textStyleSecondary",
"maxLines": 1,
"spacing": 5
},
{
"type": "Text",
"text": "${data.textContent.secondaryText.text}",
"style": "textStyleDetails",
"spacing": 4
},
{
"type": "Image",
"source": "${data.image.sources[2].url}",
"height": "23vh",
"width": "23vh"
},
{
"type": "Text",
"text": " ${data.textContent.primary1Text.text}",
"style": "textStyleSecondary",
"maxLines": 1,
"spacing": 5
},
{
"type": "Text",
"text": "${data.textContent.secondary2Text.text}",
"style": "textStyleDetails",
"spacing": 4
}
]
}
]
},
"ListTemplate2": {
"parameters": [
"backgroundImage",
"title",
"logo",
"hintText",
"listData"
],
"items": [
{
"when": "${viewport.shape == 'round'}",
"type": "Container",
"height": "100%",
"width": "100%",
"items": [
{
"type": "Sequence",
"scrollDirection": "horizontal",
"data": "${listData}",
"height": "100%",
"width": "100%",
"numbered": true,
"item": [
{
"type": "FullHorizontalListItem",
"listLength": "${payload.listTemplate2ListData.listPage.listItems.length}"
}
]
}
]
},
{
"type": "Container",
"height": "100vh",
"width": "100vw",
"items": [
{
"type": "Image",
"source": "${backgroundImage}",
"scale": "best-fill",
"width": "100vw",
"height": "100vh",
"position": "absolute"
},
{
"type": "AlexaHeader",
"headerTitle": "${title}",
"headerAttributionImage": "${logo}"
},
{
"type": "Sequence",
"width": "100%",
"height": "70vh",
"paddingLeft": "@marginLeft",
"paddingRight": "@marginRight",
"data": "${listData}",
"numbered": true,
"scrollDirection": "horizontal",
"item": [
{
"type": "HorizontalListItem"
}
]
}
]
}
]
}
},
"mainTemplate": {
"parameters": [
"payload"
],
"item": [
{
"type": "ListTemplate2",
"backgroundImage": "${payload.listTemplate2Metadata.backgroundImage.sources[0].url}",
"title": "${payload.listTemplate2Metadata.title}",
"hintText": "${payload.listTemplate2Metadata.hintText}",
"logo": "${payload.listTemplate2Metadata.logoUrl}",
"listData": "${payload.listTemplate2ListData.listPage.listItems}"
}
]
}
},
"datasources": {
"listTemplate2Metadata": {
"type": "object",
"objectId": "lt1Metadata",
"backgroundImage": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/black.jpeg",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/black.jpeg",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"title": "Coach Red Pill",
"logoUrl": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.44.36+PM.png"
},
"listTemplate2ListData": {
"type": "list",
"listId": "lt2Sample",
"totalNumberOfItems": 10,
"hintText": "Try, \"Alexa, select number 1\"",
"listPage": {
"listItems": [
{
"listItemIdentifier": "brie",
"ordinalNumber": 1,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Always De-escalate"
},
"secondaryText": {
"type": "PlainText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "The Pyramid"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.12+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.12+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.02.38+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.02.38+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "brie"
},
{
"listItemIdentifier": "gruyere",
"ordinalNumber": 2,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Men are tired"
},
"secondaryText": {
"type": "RichText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "Gambling"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.32+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.32+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.02.14+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.02.14+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "gruyere"
},
{
"listItemIdentifier": "gorgonzola",
"ordinalNumber": 3,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Longing for belonging"
},
"secondaryText": {
"type": "RichText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "Action Express Priorities"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.45+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.47.45+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.35.27+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.35.27+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "gorgonzola"
},
{
"listItemIdentifier": "brie",
"ordinalNumber": 1,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Don't have heroes"
},
"secondaryText": {
"type": "PlainText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "Shilling"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.48.00+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-24+at+5.48.00+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.35.37+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.35.37+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "tl_brie"
},
{
"listItemIdentifier": "gruyere",
"ordinalNumber": 2,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Trust"
},
"secondaryText": {
"type": "RichText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "Ghosting"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.01.39+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.01.39+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.01.59+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+8.01.59+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "tl_gruyere"
},
{
"listItemIdentifier": "gorgonzola",
"ordinalNumber": 3,
"textContent": {
"primaryText": {
"type": "PlainText",
"text": "Always push forward"
},
"secondaryText": {
"type": "RichText",
"text": "Coach red pill"
},
"primary1Text": {
"type": "PlainText",
"text": "The Great German Experiment"
},
"secondary2Text": {
"type": "PlainText",
"text": "Coach red pill"
}
},
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-29+at+1.08.12+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-10-29+at+1.08.12+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.36.06+PM.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://coachredpill.s3.amazonaws.com/Screen+Shot+2019-11-11+at+7.36.06+PM.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"token": "tl_gorgonzola"
}
]
}
}
}
}
