List template with Alexa APL

amazon-alexa

#1

Hi all,

I need to create a survey in which the answer options are inside a list of buttons. I’ve seen this: https://www.jovo.tech/marketplace/jovo-platform-alexa/interfaces/visual-output and I think the ListTemplate1 would be good. But there’s one problem: from the Alexa developer console i can’t toggle the Display Interface, and it says:

Display Interfaces will be retired soon

  • Your skill uses the Display Interface which is not supported on all Alexa devices and will soon be retired. To add multimodal experiences to your skill, use Alexa Presentation Language (APL) instead.

So I’ve seen this https://www.jovo.tech/tutorials/alexa-presentation-language, and this https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-alexa-text-list-layout.html, but I can’t understand how to make it work together.
For example, how could I add some item to the list?
Can someone help me?


#2

What part do you need help with? I’ve just been using one of the list templates with dynamic entries.


#3

Hi @Programmusic,
I’ve never used APL, so tell me if I’m wrong.
For the configuration, seeing the Jovo tutorial, I belive I have to toggle the APL interface in the console, then in the code i have to use:

this.$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: {/path},
datasources: {/path},
});

and i create document and datasources JSON from the authoring tool by Amazon console.
Then how can i add some dynamic item to the list? What methods should I use? Is there a documentation?

For example, here https://www.jovo.tech/marketplace/jovo-platform-alexa/interfaces/visual-output#list-templates, i know the methods to create a template object and the .addItem to add some “buttons”. Are there similar methods for APL? and how to handle the button click?


#4

Hey @Alberto1

Here’s an example of the datasources.json from the ListTemplate. https://github.com/jovotech/jovo-templates/blob/master/alexa/apl/javascript/src/apl/list-template-1/data-sources.json

You could import the JSON and add another item like here:

const ds = require('datasources.json');

ds.listTemplate1ListData.listPage.listItems.push({// item});

this.$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: {/path},
datasources: ds,
});

I haven’t tested it myself but it should work as a starter.


#5

HI Albero - forgive me for slow response times as I am in Australia.

  1. yes you need to toggle the APL interface to on but this can be done programmatically in the project.js under alexaskill manifest

alexaSkill :{
nlu:‘alexa’,
manisfest: {
apis: {
custom: {
interfaces: [
{
type: ‘ALEXA_PRESENTATION_APL’,
},
],
},
},

…}}
}

  1. yes you are correct but you also nee tro warp this in **if(this.$alexaSkill.$request.hasAPLInterface()) {

this.$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: {/path},
datasources: {/path},
});
}
make sure to wrap all of it in if(this.isAlexaSkill()){*} incase you are building googleaction too as it will crash it if you dont.

download the jovo turtorial template there are several starter APL templates in the "APL " folder in the src and then just reference the path to them as above. I prefer to do it like this

f(this.isAlexaSkill()){
if(this.$alexaSkill.$request.hasAPLInterface()) {
const document = require(./apl/list-template-1/document.json);
const datasource = require(./apl/datasources.json)
this.$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: document,
datasources: datasource

      });

}}

now if you test in the alexa dev console you will see the APL - you can choose to simulate, spot or show or other devices.

The template should show you some yummy cheeses.

Now go diog around in ./apl/datasources.json fie and you will see how images and texts correspond.

So far so good!

Now to get the dynaic data in there the way I have found is to reference the data directly into the .$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: document,
datasources: YOUR DATA HERE INSTEAD OF REFERENCING FILE

This way you can pass in session attributes.
so for example i define an object called “totalWorth” which is equal to some value I save in session attibutes then pass it in as follows:
datasources: {
reportData: {
type: ‘object’,
properties: {
headerTitle: “SOME TITLE HERE”,
text: "Total worth = " + totalWorth + “Dollars”,
…} }}

Now this starts to get messy when you have a lot to go in (which is why the jovo templates are structured as files in folder in first place. So to get around this I created ap helper functions in a separater utils file to abstarct it all away so now my code looks like this:

first require in the function before app initialisation in the code

const { listDataSource} = require(’./utils/apl-helpers’);

then in your code:

const document = require(./apl/list-template-1/document.json);
const datasource = await listDataSource(this)
this.$alexaSkill.addDirective({
type: ‘Alexa.Presentation.APL.RenderDocument’,
version: ‘1.0’,
document: document,
datasources: datasource

          }) 

if you need any further help in writing the function let me know. I can also suggest searching youtube tutorials by @Voice_First as Patrick Sweetman does some good work!

Hope this helps.


#6

Thank you both, i manage to use it.
I did the configuration as @Programmusic suggested. Then, since I need to fill the list with a for cicle, I added the items with datasources.listTemplate1ListData.listPage.listItems.push(item); as @AlexSwe said. This way I can display a list with the answers I need, but it seems I can’t interact with them.

Now I have to handle the item selection, I’ve tried to add an ON_ELEMENT_SELECTED() intent in my state, but it doesn’t work. From Alexa documentation (https://developer.amazon.com/it-IT/docs/alexa/custom-skills/display-interface-reference.html#touch-selection-events) seems I have to create an intent that responds to Display.ElementSelected event. I never worked with events handling, can i do this from Jovo model?
Or do you think there is another way around?


#7

Hi @Alberto1,

Have you tried adding ON_ELEMENT_SELECTED to your global handlers?