question

Ben avatar image
Ben asked ·

TouchWrapper Button Issues

Hi,

I have made use of TouchWrappers in a sequence of buttons to present a number of actions to the user, when the user presses a button, it sends an event to the server and acts as if the user had said the action.

I have three issues with this current implementation:

1. Currently, there is no indication on the device that the user has pressed the button, is there a way to provide a frontend response showing to the user the button has been pressed and their action is being handled?

2. The lack of responsiveness from the buttons leads to users repeatedly pressing the buttons which results in numerous events being sent to the Lambda function. These numerous events mean more than one response being sent to the user. Is there a way to limit the amount of events which can be sent from a wrapper? (i.e. don't send anymore events after it has been pressed once)

3. Finally, I have noticed differences between the simulator and device in the arguments sent in the APL User Event Request, specifically the data (the selected list item) sent by the simulator is an object, where as the device sends a Stringified object.

Cheers,

Ben

alexa skills kitalexaaplalexa presentation language
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Pan@Amazon avatar image
Pan@Amazon answered ·

Hey Ben, Great question. I'll be looking into it and get back to you soon.

10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Pan@Amazon avatar image
Pan@Amazon answered ·

Hi Ben, I did some research and have answers to your questions.

To build a responsive button with a TouchWrapper, you can do the following steps

Setting Commands

  1. Set the onPress command to execute a parallel command

    {
    "type": "TouchWrapper",
    "item": {
      "type": "Text",
      "text": "Button",
    },
    "onPress": {
      "type": "Parallel",
      "commands": [
          // Additional commands go here
      ]
    }
    }
    
  2. Add SetState and SendEvent execute commands to the commands array

    a) Set SetState command to update disabled to true

    {
      "type": "TouchWrapper",
      "item": {
        "type": "Text",
        "text": "Button",
      },
      "onPress": {
        "type": "Parallel",
        "commands": [
          {
            "type": "SetState",
            "state": "disabled",
            "value": true
          }
        ]
      }
    }
    

    b) Set SendEvent command to send data to the server (you will need to setup a handler for it)

    {
      "type": "TouchWrapper",
      "item": {
        "type": "Text",
        "text": "Button",
      },
      "onPress": {
        "type": "Parallel",
        "commands": [
          {
            "type": "SetState",
            "state": "disabled",
            "value": true
          },
          {
            "type": "SendEvent",
            "arguments": [
              "sendevent tw1"
            ]
          }
        ]
      }
    }
    

Setting Styles

At the top level of the APL document

  1. Import alexa-styles to the import array:

    "import": [
      {
        "name": "alexa-styles",
        "version": "1.0.0"
      }
    ]
    
  2. Add an evaluated style to styles. Here we add two styles that we could use to toggle the color of the text depending on whether it is clicked or not. To toggle the styles we use the when clause to check the boolean value of ${state.disabled} . When the value is true the style will apply.

    "styles": {
        "textStylePressable": {
          "values": [
          {
            "color": "yellow"
          },
          {
            "when": "${state.disabled}",
            "color": "grey"
          }
        ]
      }
    }
    
  3. Set the style attribute for the Text component nested under TouchWrapper to textStylePressable that we just defined.

    {
      "type": "TouchWrapper",
      "item": {
        "type": "Text",
        "text": "Button",
        "style": "textStylePressable" //set the style attribute
      },
      "onPress": {
        ... // onPress code
      }
    }
    
  4. Set the inheritParentState attribute to true on the TouchWrapper and Text component for the styles to apply.

    {
      "type": "TouchWrapper",
      "inheritParentState": true, //set inheritParentState to true
      "item": {
        "type": "Text",
        "inheritParentState": true, //set inheritParentState to true
        "text": "Button",
        "style": "textStylePressable"
      },
      "onPress": {
        ... // onPress code
      }
    }
    

These are the steps to create an interactive component using APL, but you could customize it further based on the style of your skill.

In regards to the JSON discrepancy being sent between the simulator and device, I implemented a Sequence with a TouchWrappers that used a SendEvent command and did not see the discrepancy. Would you mind sharing your APL document?

Let me know if you have any questions about this.

References:

10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

newuser-1febf36d-5c0b-46f9-9b07-9ae1820f2839 avatar image
newuser-1febf36d-5c0b-46f9-9b07-9ae1820f2839 answered ·

To get this to work I had to not "inheritParentState" on the TouchWrapper. That makes more sense to me since the parent of the TouchWrapper is not disabled. Although maybe I'm misinterpreting something in the example, it's hard to tell without a full example.

1 comment
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Talha Syed avatar image
Talha Syed answered ·

Awesome answer @Pan@Amazon Could you also help for the use case when someone might want to set the state of some other component on the document as well in addition to the component itself that was clicked.

1 comment
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

As this is a slightly older thread, I would suggest posting a new thread with more information specific to your query.

0 Likes 0 ·