Login to follow
List Pagination Example

List Pagination Example (ODC)

Stable version 0.1.0 (Compatible with ODC)
Uploaded on 17 October 2023 by OutSystems Labs
List Pagination Example

List Pagination Example (ODC)

Documentation
0.1.0

GetDataFromAPI Data Action:

  1. Change the incoming Web Service API to your own List source!
  2. Return the API Result to the screen
  3. Create Local Variable on the Screen to hold the List of Records to display (i.e. CurrentPageTodosList) based on StartIndex and MaxRecords, and bind it to the Table widget's Source parameter
  4. Create [StartIndex] with Default Value 0 and [MaxRecords] with Default Value 10 (for 10 rows per page) as Integer Local Variables on the Screen
  5. Place the Pagination block on the screen and set the [StartIndex] and [MaxRecords] parameters to the Local Variables
  6. Set the TotalCount parameter on the Pagination block to be the Length of the REST API return (i.e. GetDataFromAPI.Todos.Length)
  7. Create a New Client Action for the OnNavigate Event Handler on the Pagination block (i.e. OnPaginationNavigate) 
  8. Create a New Client Action for the OnAfterFetch Event Handler on this Data Action for the REST API (i.e. GetTodosOnAfterFetch)

GetTodosOnAfterFetch Client Action:

 

9. Store MaxRecords starting with StartIndex from GetData action response into local variable for display (i.e. CurrentPageTodosList) when Fetch Complete 


OnPaginationNavigate Client Action:


10. Change OnPaginationNavigate to update Local List (CurrentPageTodosList) with new StartIndex


RefreshDataOnClick Client Action:


OPTIONAL: If want to refresh with latest API data, clear the local List, OPTIONALLY reset the StartIndex to 0, and re-invoke GetData action to call the REST API again