APL TouchWrapper

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.

A known issue occurs with TouchWrapper on Fire TV devices:

  • If a TouchWrapper is selected using the remote while outputSpeech is playing, the outputSpeech continues playing even after a new response appears. Any outputSpeech associated with the new response is played after the previous response's outputSpeech is finished.

 

Properties

Property Type Required Styled Description
disabled Boolean No No If true, this does not response to touch or focus.
item Component No No Child item to display
onPress Command No No Command to fire when this component is pressed. All commands are allowed inside an onPress handler.

Sample TouchWrapper for individual image

In this example, a single image is wrapped with a TouchWrapper. When pressed, a SendEvent command is sent. The skill service code should set up an appropriate response to this SendEvent command.

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

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

disabled

The disabled property sets the disabled state of the TouchWrapper. The disabled state of a TouchWrapper can be inherited by its children by setting inheritParentState property to true on the children. The children, such as Text or Container, can then respond to the disabled state by applying a different style.

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 execute when the component is touched. When a command is used, the skill that sent out the APL document receives an a skill request of type Alexa.Presentation.APL.UserEvent with the arguments supplied in that command. The arguments also support data binding. See