Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
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.

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    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 Adds custom style classes to the 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 UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?