APL TouchWrapper (APL 1.3 and earlier)

A TouchWrapper wraps a single child component and responds to touch events. TouchWrappers are commonly used in lists where each list item can be individually pressed, as shown in the samples below.

Properties

The TouchWrapper component has the following properties in addition to the base component properties. See the meaning of the columns.

Property Type Default Styled Dynamic Description
item Component [ ] No No Child item to display
onPress Array of commands [ ] No No Command to fire when this component is pressed. You can use any commands in the onPress handler.

When the TouchWrapper component is the target of an event, event.target reports the following values:

"event": {
  "target": {
    "disabled": Boolean, // True if the component is disabled
    "id": ID,            // ID of the component
    "uid": UID,          // Runtime-generated unique ID of the component
    "height": Number,    // Height of the component, in dp (includes the padding)
    "opacity": Number,   // Opacity of the component [0-1]
    "width": Number      // Width of the component, in dp (includes the padding)
  }
}

Sample TouchWrapper for individual image

In this example, the TouchWrapper wraps a Text component. When the user presses the text, the component runs a SendEvent command. The SendEvent command sends an Alexa.Presentation.APL.UserEvent request to the skill service. The skill service should include a handler to process UserEvent requests.

{
    "type": "TouchWrapper",
    "item": {
        "type": "Text",
        "text": "There are 5 peas in the pod",
        "color": "#66DFFF",
        "fontSize": 30
    },
    "onPress": {
        "type": "SendEvent",
        "arguments": [
            "peasinapod"
        ]
    }
}

For an example of a UserEvent handler, see Handle a UserEvent request.

Sample TouchWrapper with Sequence

In this example, a TouchWrapper is used in conjunction with a Sequence to manage list data. Each list item can be individually pressed.

{
  "type": "Sequence",
  "data": "${payload.listdata}",
  "scrollDirection": "vertical",
  "numbered": true,
  "grow": 1,
  "shrink": 1,
  "item": {
    "type": "TouchWrapper",
    "onPress": {
      "type": "SendEvent",
      "arguments": [
        "ItemSelected",
        "${ordinal}",
        "${data.item}"
      ]
    },
    "item": {
      "type": "Container",
      "direction": "row",
      "spacing": 0,
      "height": 120,
      "alignItems": "center",
      "items": [{
          "type": "Text",
          "number": "${ordinal}"
        },
        {
          "type": "Text",
          "text": "${data.item}",
          "style": "textStylePrimary2",
          "grow": 1,
          "shrink": 1,
          "spacing": 24
        }
      ]
    }
  }
}

Property descriptions

item(s)

The child component or layout. If multiple items are provided, a single child is chosen using the logic described in Conditional component inflation.

onPress

Command(s) to run when the component is touched. The event.source.value is set to the checked state of the TouchWrapper.

The event generated has the form::

"event": {
  "source": {
    "type": "TouchWrapper",
    "handler": "Press",
    "id": ID,          // ID of the touch wrapper component
    "uid": UID,        // Runtime-generated unique ID of the component
    "value": Boolean   // The checked state of the touch wrapper
  }
}

Use the SendEvent command to send your skill an Alexa.Presentation.APL.UserEvent request when the user selects the component.

Was this page helpful?

Last updated: Nov 28, 2023