Page Counter

The Alexa page counter responsive component (AlexaPageCounter) displays a current page number and total number of pages, such as "1 | 5" for page one out of five. You can use this to number pages in a Pager.

Compatibility

AlexaPageCounter 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 AlexaPageCounter on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaPageCounter, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaPageCounter was introduced in version 1.1.0.

AlexaPageCounter parameters

All parameters except type are optional.

Name Type Default Description Widget support Version added

accessibilityLabel

String

A string describing the page counter. Voice over reads this string when the user selects this component.

Not supported

1.7.0

currentPage

String

1

The number of the page currently displayed.

Not supported

1.1.0

currentPageComponentId

String

pageCounterCurrentPage

The id of the current page text component. Use this in the Pager's onPageChanged handler to update the current page with the SetValue command.

Not supported

1.1.0

entities

Array

—

Array of entity data to bind to this component.

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

totalPages

String

1

The total number of pages

Not supported

1.1.0

type

String

—

Always set to AlexaPageCounter

Not supported

1.1.0

AlexaPageCounter example

The AlexaPageCounter is intended to display the number of the currently-displayed page. You normally want this to update automatically as the user changes pages. To do this, use the SetValue command in the onPageChanged event for the Pager to set the text property on AlexaPageCounter:

  • Set the currentPageComponentId parameter on AlexaPageCounter to a unique ID. This becomes the ID of the component within AlexaPageCounter that displays the current page number.
  • For the onPageChanged handler, call the SetValue command like this:
    • Set componentId to the same ID.
    • Set property to text.
    • Set the value to ${event.source.page + 1}. The event generated from onPageChanged provides the index of the current page in event.source.page. Since the index value is zero-based, increment it by 1 to represent the correct page number.

For example, note the following AlexaPageCounter.

{
  "currentPageComponentId": "myIDForTheCurrentPage",
  "totalPages": "5",
  "type": "AlexaPageCounter"
}

The following example shows the corresponding SetValue command in the onPageChanged handler for the Pager.

{
  "type": "Pager",
  "id": "myPager",
  "onPageChanged": [
    {
      "type": "SetValue",
      "componentId": "myIDForTheCurrentPage",
      "property": "text",
      "value": "${event.source.page + 1}"
    }
  ],
  "width": "100%",
  "height": "100%",
  "data": [],
  "item": []
}

When the page changes, SetValue updates the text property of the component with the ID myIDForTheCurrentPage to the currently displayed page.

The example uses the onMount component property to start the AutoPage command. The pager advances through each page. Refresh the document to reset the example to the first page. You can also click and drag with your mouse to swipe through the pages.

Was this page helpful?

Last updated: Nov 28, 2023