We've extended the ResponseBuilder to support Display.RenderTemplate, Hint and VideoApp.Play directives.
this.response.renderTemplate(template)adds aDisplay.RenderTemplateDirective to the response with the specified template object. See the Display.RenderTemplate reference for more information.this.response.hint(hintText)adds aHintDirective to the response with the specified hintText. See the Hint Directive reference for more informationthis.response.playVideo(url, metadata)adds aVideoApp.Playdirective.url (string)- url to the video source. See the VideoApp Interface reference for details on supported video formats.metadata ({ title : string, subtitle : string }) [optional]- specify the title and secondary title to show with the video
When you've set up your response, simply call this.emit(':responseReady'); to send your response off.
Building Echo Show templates
Template Builders are now included in alexa-sdk in the templateBuilders namespace. These provide a set of helper methods to build the JSON template for the Display.RenderTemplate directive. In the example below we use the BodyTemplate1Builder.
const Alexa = require('alexa-sdk');
// utility methods for creating Image and TextField objects
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;
// ...
'LaunchRequest' : function() {
const builder = new Alexa.templateBuilders.BodyTemplate1Builder();
let template = builder.setTitle('My BodyTemplate1')
.setBackgroundImage(makeImage('http://url/to/my/img.png'))
.setTextContent(makePlainText('Text content'))
.build();
this.response.speak('Rendering a template!')
.renderTemplate(template);
this.emit(':responseReady');
}We've added helper utility methods to build Image and TextField objects. They are located in the Alexa.utils namespace.
const ImageUtils = require('alexa-sdk').utils.ImageUtils;
// Outputs an image with a single source
ImageUtils.makeImage(url, widthPixels, heightPixels, size, description)
/**
Outputs {
contentDescription : '<description>'
sources : [
{
url : '<url>',
widthPixels : '<widthPixels>',
heightPixels : '<heightPixels>',
size : '<size>'
}
]
}
*/
ImageUtils.makeImages(imgArr, description)
/**
Outputs {
contentDescription : '<description>'
sources : <imgArr> // array of {url, size, widthPixels, heightPixels}
}
*/
const TextUtils = require('alexa-sdk').utils.TextUtils;
TextUtils.makePlainText('my plain text field');
/**
Outputs {
text : 'my plain text field',
type : 'PlainText'
}
*/
TextUtils.makeRichText('my rich text field');
/**
Outputs {
text : 'my rich text field',
type : 'RichText'
}
*/Building Multi-modal skills
Sending a Display.RenderTemplate directive to a headless device (like an echo) will result in an invalid directive error being thrown. To check whether a device supports a particular directive, you can check the device's supportedInterfaces property.
let handler = {
'LaunchRequest' : function() {
this.response.speak('Hello there');
// Display.RenderTemplate directives can be added to the response
if (this.event.context.System.device.supportedInterfaces.Display) {
//... build mytemplate using TemplateBuilder
this.response.renderTemplate(myTemplate);
}
this.emit(':responseReady');
}
}Similarly for video, you check if VideoPlayer is a supported interface of the device
let handler = {
'PlayVideoIntent' : function() {
// VideoApp.Play directives can be added to the response
if (this.event.context.System.device.supportedInterfaces.VideoPlayer) {
this.response.playVideo('http://path/to/my/video.mp4');
} else {
this.response.speak("The video cannot be played on your device. " +
"To watch this video, try launching the skill from your echo show device.");
}
this.emit(':responseReady');
}
}