Question: How to use Display.RenderTemplates as directives and get it working

Hi guys,

I’m currently trying to integrate some display responses and wanted to use the Display.RenderTemplates from the Alexa Skills Kit. My problem is, I can’t get it working. Unfortunately, the documentation isn’t really detailed in this point, it just says

The response.directive(Object directive) method allows you to set custom directive objects to devices to perform a specific device-level actions. The full specification for the directive object passed to this method can be found here.

So, here’s the code of the latest of my tries:

                  response
                        .card({
                            type: 'Simple',
                            title: 'Test Title',
                            content: 'short text'
                        })
                        .directive({
                            type: "Display.RenderTemplate",
                            template: {
                                type: "BodyTemplate1",
                                token: "token1",
                                backButton: "VISIBLE",
                                title: "rendertemplate title",
                                textContent: {
                                    primaryText: {
                                        text: `<b>Name:</b> John`,
                                        type: "RichText"
                                    },
                                    secondaryText: {
                                        text: `<b>Phone:</b> 08163/2534`,
                                        type: "RichText"
                                    },
                                    tertiaryText: {
                                        text: "<i>Powered by my awesome skill</i>",
                                        type: "RichText"
                                    }
                                },
                            }
                        })
                        .directive({
                            type: 'Hint',
                            hint: {
                                type: 'PlainText',
                                text: 'test hint'
                            }
                        })
                        .say('this is the answer you want to hear')
                        .shouldEndSession(false)
                        .send();

Well, this code doesn’t work, my Echo Show says there was a problem with the answer of the skill.

So, could anyone show me a working example of such a DisplayTemplate directive please?

Best regards, Benjamin

[matt-kruse]

The directive method just passes thru whatever json you provide, so you need to validate that your json is correct. You can do this manually in the simulator or thru the SMAPI. Are you testing on a device with display capability? Have you enabled that in your skill configuration? You can’t return display directives unless your skill declares that it requires that API. Here’s a working call to directive for one of my skills:

  if (has_display(request)) {
      response.directive({
          "type" : "Display.RenderTemplate",
          "template" : {
              "type" : "BodyTemplate6",
              "backButton" : "HIDDEN",
              "backgroundImage" : {
                  "contentDescription" : "",
                  "sources" : [{
                          "url" : "https://matt-kruse.github.io/alexa-color-tap/game.jpg",
                          "size" : "MEDIUM"
                      }
                  ]
              },
              "textContent" : {
                  "primaryText" : {
                      "text" : "Color Tap!",
                      "type" : "PlainText"
                  }
              }
          }
      });
  }

[pschild]

Is there any option for changing text color in List template1. It would be helpful if you share the json sample.

You can easily use RichText and use color. https://developer.amazon.com/de/docs/custom-skills/display-interface-reference.html#supported-markup

@patrickbussmann Did you manage to make it work? AFAIK the supported markup does not include setting the text’s color. Hopefully we get this functionality in the future…