Within my project, there are multiple outputs, but I am specifically focused on an output that presents 2 directives: an APL and an APLA render document. My component is set up to handle this in the following way:
@Handle({
global: true,
prioritizedOverUnhandled: true,
})
DemoIntent() {
return this.$send(DemoOutput, {
});
}
The current setup successfully displays both the APL and APLA responses. However, my goal is to have the APLA voice response (without the chat caption) along with the APL only response displayed on APL-enabled devices, while showcasing the APLA voice and caption response only on non-APL enabled devices. To achieve this, I initially attempted implementing an if-else statement:
DemoIntent() {
if (this.$device.supports(AlexaCapability.Apl)) {
return this.$send(DemoOutput, {
});
} else {
return this.$send(DemoOutput, {
});
}
}
However, it became evident that the if-else statement was redundant as both paths were executing the same action. This stemmed from my uncertainty on how to instruct Jovo to call only the APL response and APLA (excluding the chat caption) for APL-enabled devices, and solely the APLA voice and chat caption response for non-APL enabled devices. The challenge lies in handling an array within an Alexa native response structure in Jovo.
The structure of the output document is as follows:
export class DemoOutput extends BaseOutput<DemoOutputOptions> {
build(): OutputTemplate | OutputTemplate[] {
return {
platforms: {
alexa: {
nativeResponse: {
response: {
directives: [ {
type: 'Alexa.Presentation.APL.RenderDocument',
},
{
type: 'Alexa.Presentation.APLA.RenderDocument',
}
]
}
}
}
}
}
}
}
In attempting to tackle this issue, I experimented with different approaches, one being:
1.
`
if (this.$device.supports(AlexaCapability.Apl)) {
return this.$send(DemoOutput, {
});
} else {
return this.$send(DemoOutput, {
message: directives[0]
});
}
}
`
I also explored another option:
`
if (this.$device.supports(AlexaCapability.Apl)) {
return this.$send(DemoOutput, {
});
} else {
return this.$send(DemoOutput, {
DemoOutput.build().return {
platforms: {
alexa: {
nativeResponse: {
response: {
directives[0]
};
}
}}}}}`
The component file imports `DemoOutput`, yet I am still faced with the challenge of efficiently passing just one of the responses to the else statement.