Widget APL Touch Component Advice

27 Views Asked by At

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}"
          }
        ]
      }
    ]
  }
}
0

There are 0 best solutions below