AutoPage Alexa skill APL - alexa

Question

I'm trying to create a slide show (2-3 images) using the Alexa authoring tool.I have managed to do this using the APL Pager which displays a series of components one at a time. The thing is that in order to switch from image A to image B..C I have to touch the screen and swipe left/right.
i want to make this happen automatically and have alexa swicth the images within a certain time, and it seems that this can be achieved using APL autopage but for some reason this is not working 😩
What I've done
Set up the APL using the APL pager
Added the auto page to the APL document
Component Id
duration
delay
After trying the simulation and directly in an echo show 5 it still only triggers when the display is touched.
Also tried:
Adding the standard command (auto pager) directly in the handler of alexa but same response.
Some doubts
Does it matter if i put the commands in the APLdocument.json[1] file or directly in the handler when i call .addDirective[2]..the only difference i see if i want the content or duration to be dynamic i should put it directly in the backend code(index.js) right?
[1]
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": [
{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}
],
[2]
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: physiolift,
commands: [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
});
}
Expected outPut
Have Alexa (echo show 5) to display a series of images like a carousel (without the need to touch the screen)
My code
APL Document
{
"type":"APL",
"version":"1.4",
"settings":{
},
"theme":"light",
"import":[
],
"resources":[
],
"styles":{
},
"onMount":[
],
"graphics":{
},
"commands":[
{
"type":"AutoPage",
"componentId":"fisrtpager",
"duration":1000,
"delay":500
}
],
"layouts":{
},
"mainTemplate":{
"parameters":[
"payload"
],
"items":[
{
"type":"Pager",
"id":"fisrtpager",
"width":"100%",
"height":"100%",
"items":[
{
"type":"Image",
"width":"100%",
"height":"100%",
"scale":"best-fill",
"source":"https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align":"center"
},
{
"type":"Image",
"width":"100%",
"height":"100%",
"source":"https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale":"best-fill"
},
{
"type":"Text",
"text":"Just text content shown on page #3",
"textAlign":"center"
}
],
"navigation":"wrap"
}
]
}
}
index.js
// somewhere inside the intent im invoking
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: require('./documents/ImageTest.json')
});
}
speakOutput += ' just saying somthing'
return handlerInput.responseBuilder
.speak(speakOutput)
.reprompt('just saying something else')
.getResponse();

Answer 1

Just add the command in the "onMount" event handler. Here is the modified code which does exactly what you need:
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Pager",
"id": "fisrtpager",
"width": "100%",
"height": "100%",
"items": [
{
"type": "Image",
"width": "100%",
"height": "100%",
"scale": "best-fill",
"source": "https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align": "center"
},
{
"type": "Image",
"width": "100%",
"height": "100%",
"source": "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale": "best-fill"
},
{
"type": "Text",
"text": "Just text content shown on page #3",
"textAlign": "center"
}
],
"navigation": "none",
"onMount": [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
}
]
}
}

Answer 2

to update dynamically this feature from your backend code you can do the following:
// check if device supports APL
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: "dialogManagementPagerDoc",
document: require('./PATH-TO/YOUR-APL-FILE.json')
})
.addDirective({
type: "Alexa.Presentation.APL.ExecuteCommands",
token: "dialogManagementPagerDoc",
commands: [
{
type: "AutoPage",
componentId: "YOUR_PAGER_ID",
delay: 1000,
duration: 5000
}
]
});
}