Merci de votre visite. Cette page est disponible en anglais uniquement.

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.1.0. AlexaPageCounter was introduced in version 1.1.0.

AlexaPageCounter parameters

All parameters except type are optional.

Name Type Default Description Version added

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

currentPage

String

1

The number of the page currently displayed.

1.1.0

theme

String

dark

Colors will be switched depending on the specified theme (light/dark). Default to dark theme

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.value + 1}. The event generated from onPageChanged provides the index of the current page in event.source.value. Since the index value is zero-based, increment it by 1 to represent the correct page number.

For example, note this AlexaPageCounter:

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

In the Pager, the SetValue command looks like this:

{
  "type": "Pager",
  "id": "myPager",
  "onPageChanged": [
    {
      "type": "SetValue",
      "componentId": "myIDForTheCurrentPage",
      "property": "text",
      "value": "${event.source.value + 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.