Motion Pager (Widget)

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

The Alexa motion pager responsive component AlexaMotionPager displays content in a series of pages with a widget-specific animation for changing pages. You use Alexa Presentation Language (APL) components and responsive components or templates to define the pages to show.

Compatibility

AlexaMotionPager is designed to work with the following widget viewport profiles in the alexa-viewport-profiles package:

Widget Medium (@hubWidgetMedium)

If you use AlexaMotionPager on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaMotionPager, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaMotionPager was introduced in version 1.5.0.

AlexaMotionPager parameters

The following table shows the AlexaMotionPager properties that work with the widget viewport profiles. Not all parameters apply to all viewport profiles. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.

All parameters except type are optional.

Name	Type	Default	Description	Widget support	Version added
`data`	Array	—	Data to bind into the `AlexaMotionPager`. When provided, `AlexaMotionPager` uses the data array inflation method. This means that the components in `items` are inflated one time for each value in `data`.	Medium	1.5.0
`initialPage`	Integer	0	The zero-based index of the starting page to display.	Medium	1.5.0
`items`	Any	—	An array of components or a single component to display.	Medium	1.5.0
`navigation`	String	`wrap`	Specifies the allowed navigation direction. Possible values are `normal`, `none`, `wrap`, `forward-only`. These options work the same as a standard `Pager` component. For details about pager navigation options, see the `navigation` property for the `Pager` component.	Medium	1.5.0
`onPageChanged`	Array	—	Commands to run when the page changes. These commands run after the pager has fully switched to the new page.	Medium	1.5.0
`pagerId`	String	—	An identifier to use for the underlying `Pager` component within the `AlexaMotionPager` layout. Set this property to an ID if you want to target the `AlexaMotionPager` with commands, such as `AutoPage` and `SetPage`.	Medium	1.5.0

Define the pages to display

Provide the pages to display in AlexaMotionPager in the items property.

AlexaMotionPager is a multi-child component. Therefore, how the items array works to define pages depends on whether you also set the data property:

When data contains an array of values, AlexaMotionPager uses the data array inflation method. This means that the components in items are inflated one time for each value in data.
When data isn't set, AlexaMotionPager uses the simple array of child components inflation method. This means that each item in the items array is inflated as a separate page.

Note: The data property doesn't have a default. If you aren't using the data property in the MotionPager, assign data to an empty array ([])

The AlexaMotionPager component doesn't display any content on its own. You must provide the components or layouts to display in the items property.

Widget-specific animation when changing pages

AlexaMotionPager uses a custom "swipe away" page change animation:

When the pager advances to the next page, the current page slides out of view and reveals the next page underneath.
When the pager moves back to the previous page, the new page slides into view and covers the current page.

The following example shows this widget-specific animation. The AlexaMotionPager uses the AlexaTextWrapping responsive template to display text over a background. The AlexaFooterActionButton on the template runs a command to page through all the pages in the pager. After the AutoPage command finishes, the SetPage command resets the widget to the first page.

For a widget pager with an alternative "zoom" page transition, see Motion Scale.

AlexaMotionPager examples

The following example shows an AlexaMotionPager that uses the simple array of child components inflation method to display three pages. The pager displays each component in items as a separate page.

Was this page helpful?

Provide feedback

Last updated: Dec 12, 2023