I’m trying to create an APL document (for an Alexa widget) that contains a background image, several text components, and a footer action button. I would like for the user to be able to touch anywhere on the widget (outside of the footer action button) to open the corresponding Alexa skill. I added a VectorGraphic with a width and height, each with a value of 100%. When I touch anywhere outside of the text components, I receive the “onPress” event. But when I touch on the text components, I don’t receive the “onPress” event. Do I need to wrap each of the text components in a TouchWrapper? Or, is there a better way to achieve what I’m after. I’ve included a mockup of my APL document below. Thanks in advance!
{
"type": "APL",
"version": "2023.2",
"import": [
{
"name": "alexa-layouts",
"version": "1.7.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"height": "100%",
"items": [
{
"type": "AlexaBackground",
"colorOverlay": "true",
"backgroundImageSource": "https://teamassist-resources.s3.amazonaws.com/stadium_small_500x347.jpg"
},
{
"type": "VectorGraphic",
"position": "absolute",
"height": "100%",
"width": "100%",
"source": "alexaPhotoOverlayScrim",
"scale": "fill",
"onPress": [
{
"type": "SendEvent",
"arguments": [
"openSkill"
],
"flags": {
"interactionMode": "STANDARD"
}
}
]
},
{
"type": "AlexaFooterActionButton",
"id": "actionButtonId",
"buttonText": "Text to Phone",
"position": "absolute",
"bottom": 0,
"primaryAction": [
{
"type": "SendEvent",
"arguments": [
"send text"
],
"flags": {
"interactionMode": "STANDARD"
}
}
]
},
{
"type": "Text",
"id": "eventDateText",
"text": "2024-06-10",
"textAlign": "center",
"paddingTop": "${viewportSizeClass == @viewportClassMediumLarge ? @spacingLarge : @spacingSmall}",
"fontSize": "${viewportSizeClass == @viewportClassMediumXSmall ? @fontSize2XSmall : @fontSizeSmall}"
},
{
"type": "Text",
"text": "Sporting FC 2006 vs Red Bulls FC 2006",
"textAlign": "center",
"paddingTop": "${viewportSizeClass == @viewportClassMediumLarge ? @spacingLarge : @spacingSmall}",
"fontSize": "${viewportSizeClass == @viewportClassMediumXSmall ? @fontSize2XSmall : @fontSizeSmall}"
},
{
"type": "Text",
"text": " ",
"textAlign": "center",
"paddingTop": "${viewportSizeClass == @viewportClassMediumLarge ? @spacingLarge : @spacingSmall}",
"fontSize": "@fontSize2XSmall"
},
{
"type": "Text",
"text": "Scheels Soccer Park",
"textAlign": "center",
"fontStyle": "italic",
"fontSize": "${viewportSizeClass == @viewportClassMediumXSmall ? @fontSize2XSmall : @fontSizeXSmall}"
},
{
"type": "Text",
"text": "@ 6:30 p.m. (Field 6)",
"textAlign": "center",
"fontStyle": "normal",
"fontSize": "${viewportSizeClass == @viewportClassMediumXSmall ? @fontSize2XSmall : @fontSizeXSmall}"
}
]
}
]
}
}