AutoPage Alexa skill APL

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
     }
   ]
  });
}