Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Mobile Apps and Reactive Web Apps

 

 

OutSystems

Pagination

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Pagination UI pattern to help users find a specific item on long listings. This pattern is typically used on listings, such as e-commerce category pages, search engines, and article archives.

    How to use the Pagination UI Pattern

    1. In Service Studio, in the Toolbox, search for Pagination.

      The Pagination widget is displayed.

    2. From the Toolbox, drag the Pagination widget into the Main Content area of your application's screen.

      In this example, we drag the Pagination widget below a table of Application data.

      By default, the Pagination widget contains Previous and Next placeholders with icons.

    3. On the Properties tab, set the (mandatory) StartIndex, MaxRecords, and TotalCount and Handler properties.

    After following these steps and publishing the module, you can test the pattern in your app.

    Properties

    Pagination

    Property Description
    StartIndex (Integer) : Mandatory Sets the initial index to start pagination.
    MaxRecords (Integer) : Mandatory Number of records to display per page.
    TotalCount (Integer) : Mandatory Total number of records in the list.
    ShowGoToPage (Boolean) : Optional If True, there's an input box that allows the user to enter and jump to a specific page. If False, there is no functionality to jump to a specific page. This is the default.
    ExtendedClass (Text): Optional Add custom style classes to the Pagination UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • ''myclass'' - Adds the myclass style to the Pagination UI styles being applied.
    • ''myclass1'' ''myclass2'' - Adds the myclass1 and myclass2 styles to the Pagination UI styles being applied.
    • Was this article helpful?