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.

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

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.

Not supported

1.2.0

actionIconBackground

Color

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

Not supported

1.2.0

actionIconForeground

Color

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

Not supported

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.

Not supported

1.2.0

button1Command

Any

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

Not supported

1.2.0

button1Text

String

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

Not supported

1.2.0

button2Command

Any

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

Not supported

1.2.0

button2Text

String

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

Not supported

1.2.0

buttonsSpacingRight

Dimension

@marginHorizontal

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

Not supported

1.2.0

buttonsSpacingTop

Dimension

Aligned with the ordinal

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

Not supported

1.2.0

componentSlot

Component

An interactive responsive component to display at the end of the list item. Preferred options are AlexaButton, AlexaRadioButton, AlexaSwitch, or AlexaCheckbox.

Not supported

1.7.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.

Not supported

1.2.0

direction

String

backward

The direction of the swipe gesture. Set to backward or forward. For backward compatibility, you can also set this property to left or right.

Not supported

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.

Not supported

1.2.0

entities

Array

Array of entity data to bind to this component.

Not supported

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.

Not supported

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.

Not supported

1.2.0

hideDivider

Boolean

false

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

Not supported

1.2.0

hideHorizontalMargin

Boolean

false

When true, hide the default left and right padding.

Not supported

1.2.0

hideOrdinal

Boolean

false

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

Not supported

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.

Not supported

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.

Not supported

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.

Not supported

1.2.0

imageThumbnailShadow

Boolean

true

When true, display a drop shadow behind the image thumbnail.

Not supported

1.3.0

imageThumbnailSource

String

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

Not supported

1.2.0

lang

String

${environment.lang}

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 ar-SA, the component uses Arabic fonts when available on the device. Set to a BCP-47 string.

For more details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.

Not supported

1.4.0

layoutDirection

String

${environment.layoutDirection}

Specifies the layout direction for the content. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed.

For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

Not supported

1.4.0

onButtonsHidden

Any

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

Not supported

1.2.0

onButtonsShown

Any

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

Not supported

1.2.0

onSwipeDone

Any

Command to run when the user completes the swipe action.

Not supported

1.2.0

onSwipeMove

Any

Command to run while the user swipes the item.

Not supported

1.2.0

primaryAction

Command

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

Not supported

1.2.0

primaryText

String

Primary text to display for the item.

Not supported

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.

Not supported

1.2.0

ratingSlotMode

String

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.

Not supported

1.2.0

ratingText

String

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

Not supported

1.2.0

secondaryText

String

Secondary text to display for the item.

Not supported

1.2.0

secondaryTextPosition

String

bottom

The position to display the secondaryText. Set to top or bottom. The secondaryText aligns to the start of the primaryText.

Not supported

1.2.0

singleRatingGraphic

Any

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.

Not supported

1.2.0

singleRatingGraphicWidth

Dimension

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.

Not supported

1.2.0

tertiaryText

String

Tertiary text to display for the item.

Not supported

1.2.0

tertiaryTextPosition

String

end

The position to display the tertiaryText. Set to bottom or end. When set to end, the tertiaryText displays above and after the primaryText. When set to bottom, the tertiaryText displays below the primaryText and is aligned with the start of the primaryText. When componentSlot is set, the component slot overrides tertiary text at end position.

Not supported

1.2.0

theme

String

dark

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

Not supported

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.

Not supported

1.2.0

type

String

Always set to AlexaSwipeToAction

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.

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

Was this page helpful?

Last updated: Nov 28, 2023