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

[BenjaminGsmg]

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"
                  }
              }
          }
      });
  }

[BenjaminGsmg]

@matt-kruse Thank you very much, I could make the template working!
I didn't have the display API activated for my skill, that was probably the main mistake...though your hint, that whatever I provide gets passed through to the JSON response directly was very helpful and should be added to the official documentation! :)

However, now only the template is displayed. According to the Amazon documentation, it should be possible to display a hint for the user

To use a hint directive in a response, you must also include a display template, other than BodyTemplate3 and ListTemplate1, which do not support hints, in your response.

Unfortunately my hint is not displayed.
The following is my current code.

               response
                    .card({
                        type: 'Simple',
                        title: 'Wonderful card title',
                        content: cardContent
                    })
                    .directive({
                        'type': 'Display.RenderTemplate',
                        'template': {
                            'type': 'BodyTemplate1',
                            'backButton': 'HIDDEN',
                            'title': 'Wonderfull title',
                            'textContent': {
                                'primaryText': {
                                    'text': `<b>Name:</b> ${name}`,
                                    'type': 'RichText'
                                },
                                'secondaryText': {
                                    'text': `${templateContent}`,
                                    'type': 'RichText'
                                },
                                'tertiaryText': {
                                    'text': '<br/><i>Powered by your awesome App</i>',
                                    'type': 'RichText'
                                }

                            },
                        }
                    })
                    .directive({
                        'type': 'Hint',
                        'hint': {
                            'type': 'PlainText',
                            'text': 'Say X or say Y'
                        }
                    })
                    .say(answer)
                    .shouldEndSession(false)
                    .send();

What is the right way in this alexa framework to add two custom directives like a display template and a hint?

[sakurakhadag]

I have the same problem. The hint is visible on BodyTemplate2, but not on BodyTemplate1.
Did you find a solution?

[matt-kruse]

Multiple directives are just passed along to the user in the JSON response. If it's not working, then check your JSON to see if it's in the correct format. Log the full response, then inspect it to see if it matches the Alexa documentation.

[sakurakhadag]

When I use the same content for BodyTemplate1, the hint is not visible, but in BodyTemplate2, the hint is visible.
Other than the hint, the display is correct.

Below are the JSON outputs for Body Templates 1 and 2 respectively. They seem to match the documentation for hint directives, but could you please check @matt-kruse? I'm a JS noob.

BodyTemplate1 output:

"directives": [
      {
		"type": "Display.RenderTemplate",
		"template": {
			"type": "BodyTemplate1",
			"backgroundImage": {
				"sources": [
					{
						"url": "https://s-media-cache-ak0.pinimg.com/originals/22/f0/14/22f014df2c569c8e50e544d72ff0bb6e.jpg",
						"widthPixels": 0,
						"heightPixels": 0
					}
				]
			},
			"title": "Vineyards",
			"textContent": {
				"primaryText": {
					"type": "RichText"
				},
				"secondaryText": {
					"type": "RichText",
					"text": "If you are feeling lucky, ask for a quick game."
				}
			},
			"backButton": "VISIBLE"
		}
	},
	{
		"type": "Hint",
		"hint": {
			"type": "PlainText",
			"text": "string"
		}
	}
],

BodyTemplate2 output

"directives": [
	{
		"type": "Display.RenderTemplate",
		"template": {
			"type": "BodyTemplate2",
	         	"backgroundImage": {
	 			"sources": [
	 				{
						"url": "https://s-media-cache-ak0.pinimg.com/originals/22/f0/14/22f014df2c569c8e50e544d72ff0bb6e.jpg",
						"widthPixels": 0,
						"heightPixels": 0
					}
				]
			},
			"title": "Vineyards",
			"textContent": {
				"primaryText": {
					"type": "RichText"
				},
				"secondaryText": {
					"type": "RichText",
					"text": "If you are feeling lucky, ask for a quick game."
				}
			},
			"backButton": "VISIBLE"
		}
	},
	{
		"type": "Hint",
		"hint": {
			"type": "PlainText",
			"text": "string"
		}
	}
],

Any idea on what is wrong?
Thanks

[matt-kruse]

I don't think BodyTemplate1 supports hints.

[sakurakhadag]

Really? Oh no. I need to have full width text with a hint. BodyTemplates 2 and 3 only show text one on half of the screen.
Do you think I can modify the font size of BodyTemplate6 to show more information than it allows?
Anyway thanks for telling me about the BodyTemplate1 thing!

[patrickbussmann]

To use a hint directive in a response, you must also include a display template, other than BodyTemplate3 and ListTemplate1, which do not support hints, in your response.

https://developer.amazon.com/docs/custom-skills/display-interface-reference.html#hint-directive

Maybe you close your session or something else.

[sakurakhadag]

No sir. My sessions are fine. As matt-kruse noted above, hints are not possible for BodyTemplate1. This was also corroborated by a few threads on the Alexa developer forum.
I've since submitted a request to have that documentation changed to note this discrepancy.

[yuvarajag]

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

[patrickbussmann]

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

secondaryText: {
    text: `<span style="color: red;">Phone: 08163/2534</span>`,
    type: "RichText"
}

Or if span is not working you can try font or something mentioned in the link above.

[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...