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.

Import the alexa-layouts package

To use AlexaPageCounter, import the alexa-layouts package.

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

AlexaPageCounter parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

currentPage

String

1

The number of the page currently displayed.

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.

1.1.0

entities

Array

[]

Array of entity data to bind to this component.

1.2.0

theme

String

dark

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

1.1.0

totalPages

String

1

The total number of pages

1.1.0

type

String

None

Always set to AlexaPageCounter

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.