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. Add 2 local variables - one to store the starting index value and the other to store the maximum number of records per page. In this example, we add the StartIndex and MaxRecords variables. Both are of type integer and we set the default value of the MaxRecords to 50. This means there are 50 records shown per page.

    4. Select the Pagination widget, and on the Properties tab, set the StartIndex and MaxRecords properties to the respective local variables we just created.

    5. Staying on the Properties tab, set the TotalCount to the number of records fetched in the aggregate that is the source of the table. in this example, we set it to GetApplications.Count.

    6. To define what happens when the end user changes from one page to another, from the Handler dropdown, select New Client Action. By default the New Client Action contains a NewStartIndex input.

    7. To set the start index of the pagination, drag the StartIndex onto the client action and set its value to NewStartIndex. When a user changes page, the start index will change accordingly.

    8. Refresh the data by re-executing the aggregate so the data for the new page appears in the table.

      In this example, when the user changes page, and the refresh action runs, it will take into account the current StartIndex and the MaxRecords to determine the NewStartIndex (in this case 50 for the new page.)

    9. So that we only fetch the data we need for each page, select the aggregate and set the Start Index and Max. Records properties to the the variables we created earlier, StartIndex and MaxRecords.

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

    Properties

    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?