[Tutorial] Using the Alexa Presentation Language (APL) with Jovo

#1

Learn how to build visual Alexa Skills with the Alexa Presentation Language (APL) and the Jovo Framework.

This is a companion discussion topic for the original entry at https://www.jovo.tech/tutorials/alexa-presentation-language
#2

When will the tutorial on APL Commands be posted? I have a video playing on APL and I want it to pause when I say pause/stop/cancel/exit and also play back when session is still active

#3

Now started using APL in my existing skill. Wanted to know if there is some way I can have input boxes in my screens by using APL, like the html : is there some way I can use this tag in APL.

#4

Unfortunately it’s not possible.

Here’s a list of the available APL components
https://developer.amazon.com/docs/alexa-presentation-language/apl-component.html

Menu on the left -> Reference -> Components -> …

#5

How can I go about displaying a variable whose value I set in app.js to display using APL?

#6

Actually I am thinking about reading/writing the data-sources.json file in my app.js to be able to display those variables.

Is there any better solution?

#9

Hi
i have an issue when launch invocation.
16

#10

i found answere here .

#11

How can I go about displaying a variable whose value I set in app.js to display using APL?

You could either use node.js export-require (or the same with the ES6 standard)

I require the datasource.json and than modifiy the properties i want to change. After that u append the modified datasource.json to the alexaSkillDirective and render the APL Template

Is there any better solution?

I did’t figured out sth better yet. But thats the best way to manipulate a JSON, isn’t it?

#12

Hey @H1Gerd thanks for the reply but I figured it out and had been doing that same way.

#13

Not able to create new Project with this jovo new --template alexa/apl
It gives the following error
Please use a valid template name.
› Error: There was a problem:
› Error: EEXIT: 1

#14

This was fixed with the latest CLI update. See here:

#15

Does Jovo work with APLA as well? Could the json be replaced with something like the following? or does JOVO need something else to connect to the APLA.RenderDocument?

Here is Amazon’s example.

{
  "type": "Alexa.Presentation.APLA.RenderDocument",
  "token": "developer-provided-string",
  "document": {
    "version": "0.8",
    "type": "APLA",
    "mainTemplate": {
      "parameters": [
        "payload"
      ],
      "item": {
        "type": "Selector",
        "items": [
          {
            "type": "Speech",
            "when": "${payload.user.name == ''}",
            "content": "Hello!"
          },
          {
            "type": "Speech",
            "content": "Hi ${payload.user.name}!"
          }
        ]
      }
    }
  },
  "datasources": {
    "user": {
      "name": "John"
    }
  }
}
#16

Hey @David_MacDougall! Welcome to the Jovo Community.

Here’s an APL-A example:

jovo.$alexaSkill.addAplDirective({
			"type": "Alexa.Presentation.APLA.RenderDocument",
			"token": "developer-provided-string",
			document: require('./documents/audioTemplate'),
			datasources: {
				user: {
					name: 'max',
				},
			},
		});

./documents/template.js

module.exports = {
    "type": "APLA",
    "version": "0.8",
    "description": "This document demonstrates key components used to create audio responses.",
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "item": {
            "type": "Mixer",
            "description": "The Mixer component plays a set of audio clips at the same time. See docs for more information.",
            "items": [
                {
                    "type": "Sequencer",
                    "description": "The Sequencer component plays a series of audio clips one after another.",
                    "items": [
                        {
                            "type": "Selector",
                            "description": "The Selector component renders a single audio clip, selected from an array of possible clips. See docs for more information.",
                            "items": [
                                {
                                    "type": "Speech",
                                    "description": "The Speech component converts the provided text into speech output. This particular component has a 'when' property and will only render if the property evaluates to 'true'.",
                                    "when": "${payload.user.name == ''}",
                                    "content": "Hello!"
                                },
                                {
                                    "type": "Speech",
                                    "content": "Hi ${payload.user.name}!"
                                }
                            ]
                        },
                        {
                            "type": "Speech",
                            "contentType": "SSML",
                            "content": "<speak>This sample demonstrates how to mix audio, bind data, use conditional expressions, sequence speech components, and incorporate SSML tags into your audio response.<break time=\"1s\"/></speak>"
                        },
                        {
                            "type": "Speech",
                            "content": "Click the 'DATA' icon on the left side of your screen and add your name to the dataset to see how it changes the first line of this response."
                        }
                    ]
                },
                {
                    "type": "Audio",
                    "description": "The Audio component plays the provided audio file, such as an MP3 file. See docs for more information.",
                    "source": "soundbank://soundlibrary/ui/gameshow/amzn_ui_sfx_gameshow_waiting_loop_30s_01"
                }
            ]
        }
    }
};
#17

hi H1Gerd Good Day!, I have a problem on Alexa Presentation Language. In the DEVELOPER CONSOLE its working fine while trying on the ECHO SHOW 5 its say there was the problem with the requested skill response on device.

this.$alexaSkill.addDirective({

type: “Alexa.Presentation.APL.RenderDocument”,
version: “1.0”,
token: “homepage”,
document: require(./apl/homepage/document.json),
datasources: require(./apl/homepage/data-sources.json),

});