Visual Output Alexa

amazon-alexa
#1

Hello,

Can anyone help me creating visual output for Alexa?

I followed the docs (https://www.jovo.tech/docs/amazon-alexa/visual-output) ut I couldn’t add the code snippets (typescript) to my project.

Is it possible that the code snippets are broken and can anyone provide me with a possible fix?

I added the following template to my handler function

...
let bodyTemplate1 = this.$alexaSkill!.templateBuilder('BodyTemplate1');

bodyTemplate1.setToken('token')
  .setTitle('Title')
  .setTextContent('Primary Text', 'Secondary Test', 'Tertiary Text');

this.$alexaSkill!.showDisplayTemplate(bodyTemplate1);
...

but I cannot compile the typescript code due to the fact that there is no .setTextContent method.

Cheers, Michael

#2

You have two possibilities:

  1. Cast the bodyTemplate1 object
import { BodyTemplate1 } from 'jovo-platform-alexa';
...
let bodyTemplate1 = this.$alexaSkill!.templateBuilder('BodyTemplate1') as BodyTemplate1;

or 2) Instantiate the object the other way

import { BodyTemplate1 } from 'jovo-platform-alexa';
...
let bodyTemplate1 = new BodyTemplate1();
#3

Hello,

May I suggest you to do not use the Templates? they are the old version of the visual output for alexa devices with screens. Amazon released a new version called APL (Alexa Presentation Language) that gives much more flexibility to your UI.
Jovo since version 2 suport APL too and you can read about it here

I have used it for my 2 past projects and I strongly recommend you to give it a go

Let me know what you think about it.

Best Regards

#4

Thanks for the suggestion @Nic
I haven’t seen that APL is the intended Presentation ‘framework’ for Alexa at the time of writing my question. I also switched to APL for my project now.

#5

Well done.

It is a bit of a pain at the beginning but gives you a lot of more flexibility (and jovo ease the process a lot)

Let me know how it goes :slight_smile:

#6

APL is a subset of Flex/yogalayout. If you’re not familiar with it (like I was) I would recommend https://yogalayout.com/. It helped me in the beginning…

Expect more work when designs get more complicated :slight_smile: