question

Stef Nado avatar image
Stef Nado asked ·

How to correctly use TouchWrapper, primaryAction and SendEvent on text list items?

I'm trying to create a visual response for my custom skill. The device should display a list of items, then the user should be able to manually select an item from that list, then the skill should get the item title or ordinal in order to launch the related audio stream.

I tried lots of different things based on what I read from the docs, but no luck. Could someone help me out with that code please?

aplalexa presentation language
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Alexander Martin avatar image
Alexander Martin answered ·

Hi @Stef Nado,

just to understand what you want. For example, you have a list of genres, if the user selects a genre the corresponding stream should be started?

Regards,

Alex


---

Twitter: @xeladotbe

10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Stef Nado avatar image
Stef Nado answered ·

Hi @Alexander Martin!


Yes, exactly! Do you happen to have a code sample for this? I don't know why, but everything that I tried so far didn't work...


Thanks a lot in advance!

10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Alexander Martin avatar image
Alexander Martin answered ·

Hi @Stef Nado,

to play an audio stream you need the audio player respectively the audio player interface, but unfortunately this can't be combined with the APL interface. You can initially show the user a choice of genres via APL, but once the user has chosen a genre the view changes to the audio player view and the user would have to restart the skill to choose another genre.

I would also recommend to have a look at this github repository, it contains a complete implementation for the audio player interface.

https://github.com/alexa/skill-sample-nodejs-audio-player

For your purpose you need a TouchWrapper that executes a SendEvent command when the user clicks on it and triggers a UserEvent request in the skill.

This is a minimal APL document to show a list of genres:

{
  "type": "APL",
  "version": "1.4",
  "mainTemplate": {
    "items": [
      {
        "type": "Container",
        "width": "100vw",
        "height": "100vh",
        "data": [
          {
            "genre": "genre1",
            "name": "Genre 1"
          },
          {
            "genre": "genre2",
            "name": "Genre 2"
          }
        ],
        "items": [
          {
            "type": "TouchWrapper",
            "onPress": [
              {
                "type": "SendEvent",
                "arguments": [
                  "${data.genre}"
                ]
              }
            ],
            "item": {
              "type": "Text",
              "text": "${data.name}"
            }
          }
        ]
      }
    ]
  }
}


In the skill itself you define a handler that responds to the UserEvent request and returns a corresponding response.

My example is based on the assumption that you use the ASK SDK v2 (NodeJS)


const GENRE_TO_STREAM = {
  genre1: 'https://sld.tld/path/to/stream',
  genre2: 'https://sld.tld/path/to/stream'  
};

const AplUserEventHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'Alexa.Presentation.APL.UserEvent';
    },
    handle(handlerInput) {
        const args = handlerInput.requestEnvelope.request.arguments;
        const [ genre ] = args;
        
        
        if (!(genre in GENRE_TO_STREAM)) {
            return handlerInput.responseBuilder
                .speak('Sorry, I do not know that one.')
                .withShouldEndSession(undefined)
                .getResponse();
        }
        
        return handlerInput.responseBuilder.addAudioPlayerPlayDirective('REPLACE_ALL', GENRE_TO_STREAM[genre], genre, 0, null).withShouldEndSession(true).getResponse();
    }
};

Hope this helps.

Regards,

Alex

10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.