How do I tell Alexa/Jovo to use only 1 render document in it's response?

Question

in my project, I have a number of outputs but I have this particular output that displays 2 directives, an APL and an APLA render document. I have passed it to my component like so

 @Handle({
    global: true,
    prioritizedOverUnhandled: true,
         })
  DemoIntent() {
    return this.$send(DemoOutput, {
         });
           }

It works fine in that I get both the APL and APLA responses. However, I want the APLA voice response (without the chat caption) and APL only response to be rendered when it is an APL enabled device and I want the APLA voice and caption only response to be displayed when it is not an APL enabled device. I started implementing this by writing an if-else

DemoIntent() {


    if (this.$device.supports(AlexaCapability.Apl)) {
    return this.$send(DemoOutput, {
    });
  } else {
    return this.$send(DemoOutput, {
      });
  }
}

But it's quite obvious that the if else both do the same thing because I don't know how to tell Jovo to call only the APL response and APLA excluding the chat caption for the APL enabled device and only the APLA voice and chat caption response when non APL enabled device. I see that the 2 render documents under the render directive are inside an array but since I am using Alexa native response, I don't know how to call an Array from an alexa native response in Jovo.

The output document looks like this

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',
}
]
}
}
}
}
}
}
}

As written above, I have written an if else statement but I am not able to pass only 1 of the responses to the else statement. I have tried :

1.

`
    if (this.$device.supports(AlexaCapability.Apl)) {
    return this.$send(DemoOutput, {
    });
  } else {
    return this.$send(DemoOutput, {
       message:directives[0]
      });
  }
}
`

`    if (this.$device.supports(AlexaCapability.Apl)) {
    return this.$send(DemoOutput, {
    });
  } else {
    return this.$send(DemoOutput, {
      DemoOutput.build().return {
      platforms: {
        alexa: {
          nativeResponse: {
            response: {
              directives[0]
      };
  }
}}}}}`

I have the demoOutput imported into the component file.

Answer 1

I'd suggest having a separate document/class that has only APLA and use it when APL is not supported. You can check if the device is APL support or not using this sample code.