Invoke a layout
To invoke the layout in your document, use the layout name for the component type, and then pass in the parameters. The following example shows how you invoke the Marker layout:
"mainTemplate": {
"parameters": [],
"items": [
{
"type": "Container",
"items": [
{
"type": "Marker",
"markerURL": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
}
]
}
]
}
Test the entire APL document in the APL authoring tool.
Observe how handling the viewport occurs in the resources now, and how the @imgHeight resource carries the correct height of the image within different viewport profiles. Also, notice that when you invoke the new custom layout—like any other pre-built APL components—you use the type and the properties (markerURL parameter).
{
"type": "APL",
"version": "1.7",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"resources": [
{
"when": "${@viewportProfile == @hubRoundSmall}",
"dimensions": {
"imgHeight": "65%"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationLandscape}",
"dimensions": {
"imgHeight": "35%"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationPortrait}",
"dimensions": {
"imgHeight": "40%"
}
}
],
"layouts": {
"Marker": {
"parameters": [
{
"name": "markerURL",
"type": "string",
"description": "URL of marker"
}
],
"items": [
{
"type": "AlexaImage",
"imageSource": "${markerURL}",
"imageRoundedCorner": false,
"imageHeight": "@imgHeight",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
},
"mainTemplate": {
"parameters": [],
"items": [
{
"type": "Container",
"items": [
{
"type": "Marker",
"markerURL": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
}
]
}
]
}
}