Swipe to Action
The Alexa swipe to action responsive component (AlexaSwipeToAction
) displays an item the user can swipe to perform an action. You can use this component in lists such as AlexaTextList to provide swipe actions on the list items. You can control the look of the item and the commands to run when the user swipes the item.
AlexaSwipeToAction
requires APL 1.4 or later. Provide an alternate experience for devices running older versions of APL.The AlexaSwipeToAction
uses the SwipeAway
gesture.
Compatibility
AlexaSwipeToAction
is designed to work with all standard viewport profiles in the alexa-viewport-profiles
package:
- All hub round profiles
- All hub landscape profiles
- All hub portrait profiles
- All mobile profiles
- All TV profiles
If you use AlexaSwipeToAction
on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.
Import the alexa-layouts package
To use AlexaSwipeToAction
, import the alexa-layouts package.
The latest version of the alexa-layouts
package is 1.7.0. AlexaSwipeToAction
was introduced in version 1.2.0.
AlexaSwipeToAction Parameters
All parameters except type
are optional.
Name | Type | Default | Description | Widget support | Version added |
---|---|---|---|---|---|
|
String |
— |
The source for a custom icon to show during the swipe. When |
Not supported |
1.2.0 |
|
— |
Color to use for the background color displayed behind the action icon when the user swipes the item. |
Not supported |
1.2.0 | |
|
— |
Color to use for the action icon shown when the user swipes the item. |
Not supported |
1.2.0 | |
|
String |
— |
The type of graphic to use for the custom |
Not supported |
1.2.0 |
|
Any |
— |
Command to bind to the first button in the options list. Used only for TV devices. |
Not supported |
1.2.0 |
|
String |
— |
Text for the first button in the options list. Used only for TV devices. |
Not supported |
1.2.0 |
|
Any |
— |
Command to bind to the second button in the options list. Used only for TV devices. |
Not supported |
1.2.0 |
|
String |
— |
Text for the second button in the options list. Used only for TV devices. |
Not supported |
1.2.0 |
|
Dimension |
|
Right position of options component. Used only for TV devices. |
Not supported |
1.2.0 |
|
Dimension |
Aligned with the ordinal |
Top position of options component. Used only for TV devices. |
Not supported |
1.2.0 |
|
Component |
— |
An interactive responsive component to display at the end of the list item. Preferred options are |
Not supported |
1.7.0 |
|
Any |
— |
The name of a custom layout to use for the item. When not set, the component uses the |
Not supported |
1.2.0 |
|
String |
|
The direction of the swipe gesture. Set to |
Not supported | |
|
Any |
|
The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when |
Not supported |
1.2.0 |
|
Array |
— |
Array of entity data to bind to this component. |
Not supported |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'full' rating slot (such as a full star). Used when |
Not supported |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'half' rating slot (such as a half star). Used when |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
String |
|
Determines how to position the image within the bounding box. Used when the image is smaller than the bounding box. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. This property works the same as the |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
String |
|
Determines how to scale the image to fit within the bounding box. Options are none, fill, best-fit, best-fill, best-fit-down. This property works the same as the |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.3.0 |
|
String |
— |
URI for an image to display next to the item as a thumbnail. |
Not supported |
1.2.0 |
|
String |
|
The language for the text displayed in the swipe-to-action component. This language determines the default font used for the text. For example, when set to |
Not supported |
1.4.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
Not supported |
1.4.0 |
|
Any |
— |
Command to run when the options list is hidden. Used only for TV devices. |
Not supported |
1.2.0 |
|
Any |
— |
Command to run when the options list is shown. Used only for TV devices. |
Not supported |
1.2.0 |
|
Any |
— |
Command to run when the user completes the swipe action. |
Not supported |
1.2.0 |
|
Any |
— |
Command to run while the user swipes the item. |
Not supported |
1.2.0 |
|
— |
The action to trigger when the user selects the item. Ignored when |
Not supported |
1.2.0 | |
|
String |
— |
Primary text to display for the item. |
Not supported |
1.2.0 |
|
String |
|
The type of graphic to use for the rating. Set to |
Not supported |
1.2.0 |
|
String |
— |
Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to |
Not supported |
1.2.0 |
|
String |
— |
Text to display next to the rating. Ignored when |
Not supported |
1.2.0 |
|
String |
— |
Secondary text to display for the item. |
Not supported |
1.2.0 |
|
String |
|
The position to display the |
Not supported |
1.2.0 |
|
Any |
— |
The graphic to display to represent the rating. Used when |
Not supported |
1.2.0 |
|
— |
The width of the bounding box for the single graphic that represents the rating. Used when |
Not supported |
1.2.0 | |
|
String |
— |
Tertiary text to display for the item. |
Not supported |
1.2.0 |
|
String |
|
The position to display the |
Not supported |
1.2.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
String |
— |
Always set to |
Not supported |
1.2.0 |
AlexaSwipeToAction within an AlexaTextList
You can use AlexaSwipeToAction
within an AlexaTextList
to display a scrolling list of items that the user can swipe. Within the text list, set defaults for the AlexaSwipeToAction
items with the following AlexaTextList
properties that correspond to AlexaSwipeToAction
properties:
swipeDirection
swipeActionIcon
swipeActionIconType
swipeActionIconForeground
swipeActionIconBackground
onSwipeMove
onSwipeDone
optionsButton1Text
optionsButton1Command
optionsButton2Text
optionsButton2Command
To enable swiping in the AlexaTextList
, set swipeDirection
to left
or right
.
For example, the following APL document and data source shows an AlexaTextList
that allows the user to swipe items. The onSwipeDone
property is defined at the list-level rather than at the individual item level. When the user completes a swipe, the device sends the skill a UserEvent
request with information about the list item that the user swiped.
AlexaSwipeToAction examples
The following example shows some variations of AlexaSwipeToAction
placed within a Container
. The AlexaSwipeToAction
items also set the text and actions for buttons to give TV users an alternative to swiping that they can navigate with a TV remote.
On a hub device, when you begin swiping an item, the header updates to show the swipe progress. When you complete the swipe, the header updates to show that the swipe is finished.
On a TV device, when you highlight an item with the remote, the item displays the two options buttons. When you select one of the buttons, the header updates to show that the selection is finished.
Related topics
Last updated: Nov 28, 2023