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.

The AlexaSwipeToAction uses the SwipeAway gesture.

Import the alexa-layouts package

To use AlexaSwipeToAction, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.2.0. AlexaSwipeToAction was introduced in version 1.2.0.

AlexaSwipeToAction Parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

actionIcon

string

The source for a custom icon to show during the swipe. When actionIconType is AVG, set this property to the name of the graphic as defined in the graphics property or in an imported package. When actionIconType is image, provide the URL of the image to display.

1.2.0

actionIconBackground

Color

Color to use for the background color displayed behind the action icon when the user swipes the item.

1.2.0

actionIconForeground

Color

Color to use for the action icon shown when the user swipes the item.

1.2.0

actionIconType

string

The type of graphic to use for the custom actionIcon. Set to AVG or image. When set to image, provide a URL for the image in actionIcon. When set to AVG, define an AVG in the graphics property of your document or use graphics defined in an imported package, and then set actionIcon to the name of the graphic.

1.2.0

button1Command

any

Command to bind to the first button in the options list. Used only for TV devices.

1.2.0

button1Text

string

Text for the first button in the options list. Used only for TV devices.

1.2.0

button2Command

any

Command to bind to the second button in the options list. Used only for TV devices.

1.2.0

button2Text

string

Text for the second button in the options list. Used only for TV devices.

1.2.0

buttonsSpacingRight

dimension

@marginHorizontal

Right position of options component. Used only for TV devices.

1.2.0

buttonsSpacingTop

dimension

Aligned with the ordinal

Top position of options component. Used only for TV devices.

1.2.0

customLayoutName

any

The name of a custom layout to use for the item. When not set, the component uses the AlexaTextListItem responsive component determine how to display the item.

1.2.0

direction

string

left

The direction of the swipe gesture. Set to left or right.

emptyRatingGraphic

any

empty

The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

entities

Array

[]

Array of entity data to bind to this component.

1.2.0

fullRatingGraphic

any

full

The graphic to display to represent a 'full' rating slot (such as a full star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

halfRatingGraphic

any

half

The graphic to display to represent a 'half' rating slot (such as a half star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

hideDivider

Boolean

false

When true, hide the horizontal divider displayed below the item.

1.2.0

hideHorizontalMargin

Boolean

false

When true, hide the default left and right padding.

1.2.0

hideOrdinal

Boolean

false

When true, don't display a number next to the item.

1.2.0

imageAlignment

String

center

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 imageAlignment property for the AlexaImage responsive component.

1.2.0

imageBlurredBackground

Boolean

false

When true, display a blurred version of the image behind the image. Ignored when imageScale is set to fill or best-fill. This property works the same as the imageBlurredBackground property for the AlexaImage responsive component.

1.2.0

imageScale

String

best-fit

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 imageScale property for the AlexaImage responsive component.

1.2.0

imageThumbnailSource

String

None

URI for an image to display next to the item as a thumbnail.

1.2.0

onButtonsHidden

any

Command to run when the options list is hidden. Used only for TV devices.

1.2.0

onButtonsShown

any

Command to run when the options list is shown. Used only for TV devices.

1.2.0

onSwipeDone

any

Command to run when the user completes the swipe action.

1.2.0

onSwipeMove

any

Command to run while the user swipes the item.

1.2.0

primaryAction

Command

None

The action to trigger when the user selects the item. Ignored when customLayoutName has a value.

1.2.0

primaryText

String

None

Primary text to display for the item.

1.2.0

ratingGraphicType

String

AVG

The type of graphic to use for the rating. Set to AVG or image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingNumber

Number

-1

A numeric rating between 0 and 5. When set to a positive number, displays the number as a star rating. Set to a negative number or omit to leave off the rating.

1.2.0

ratingSlotMode

String

None

Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to single, provide a single graphical asset in the singleRatingGraphic property. When multiple, provide the numeric rating in ratingNumber.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingText

String

None

Text to display next to the rating. Ignored when ratingNumber is a negative number or omitted.

1.2.0

secondaryText

String

None

Secondary text to display for the item.

1.2.0

secondaryTextPosition

String

bottom

The position to display the secondaryText. Set to top or bottom. The secondaryText is always left-aligned with the primaryText.

1.2.0

singleRatingGraphic

any

None

The graphic to display to represent the rating. Used when ratingSlotMode is single. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

singleRatingGraphicWidth

Dimension

None

The width of the bounding box for the single graphic that represents the rating. Used when ratingSlotMode is single.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

tertiaryText

String

None

Tertiary text to display for the item.

1.2.0

tertiaryTextPosition

String

right

The position to display the tertiaryText. Set to bottom or right. When set to right, the tertiaryText displays above and to the right of the primaryText. When set to bottom, the tertiaryText displays below the primaryText and is left-aligned with the primaryText.

1.2.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

1.2.0

touchForward

Boolean

false

When true, assume the user is close enough to touch the screen (3-foot viewing distance) and format the item with a smaller font size. When false, assume the user isn't close enough to touch the screen ("voice-forward") and use a larger font size.

1.2.0

type

String

None

Always set to AlexaSwitch

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.

An AlexaTextList that uses swipe actions for the list items. The second item is partially swiped.
An AlexaTextList that uses swipe actions for the list items. The second item is partially 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.

AlexaSwipeToAction items
AlexaSwipeToAction items
Swipe in progress for an AlexaSwipeToAction item
Swipe in progress for an AlexaSwipeToAction item
SwipeToAction on a TV instead of a hub
SwipeToAction on a TV instead of a hub