Table Sorting, Filtering, and Server-Side Pagination in OutSystems

Open a screen in the Screen Editor (Interface tab → UI Flows → MainFlow → double-click your screen). If you do not already have a table, drag your Entity from the Data tab onto the screen canvas — OutSystems auto-generates a Table widget with a GetEntities Aggregate and a List widget. For a clean starting point: 1. Double-click the screen's Aggregate (right-click the table on canvas → 'Go to Aggregate', or find GetTasks in the screen's data panel) 2. In the Aggregate editor, open the **Sources** tab — verify your Entity is listed 3. Add all columns you want to display: check that the columns exist in the Output Attributes section 4. Set **Max Records**: In the Aggregate properties (Properties panel with Aggregate selected) → Max Records: `20` Max Records limits the database query to 20 rows per request. This is the core of server-side pagination — only 20 records are fetched per page, not the entire table. Note the Max Records property location: With the Aggregate selected in the action flow (or as a screen aggregate), look for Max Records in the Properties panel. Default is empty (fetches all rows — avoid this for large tables).

Server-side pagination loads one page at a time. The Aggregate's **Start Index** property tells it which row to start from (0-based). **Add local variables to the screen:** 1. Right-click the screen (Interface tab) → Add Local Variable → Name: `CurrentPage`, Type: Integer, Default: `1` 2. Right-click screen → Add Local Variable → Name: `StartIndex`, Type: Integer, Default: `0` **Bind Start Index on the Aggregate:** With the GetTasks Aggregate selected → Properties panel → **Start Index** → set to: `StartIndex` **Add pagination UI elements below the table:** 1. Drag a Container → Style Classes: `"row justify-content-between align-items-center margin-top-s"` 2. Inside the container: - Drag a Button → Label: `"Previous"` → OnClick → New Client Action: `PreviousPage` - Drag a Text widget → Text expression: `"Page " + IntegerToText(CurrentPage)` - Drag a Button → Label: `"Next"` → OnClick → New Client Action: `NextPage` **PreviousPage Client Action:** Start → If(StartIndex > 0) → [True] Assign: StartIndex = StartIndex - 20, CurrentPage = CurrentPage - 1 → Refresh Data: GetTasks → [False] End **NextPage Client Action:** Start → If(GetTasks.List.Length = 20) → [True] Assign: StartIndex = StartIndex + 20, CurrentPage = CurrentPage + 1 → Refresh Data: GetTasks → [False] End The If(GetTasks.List.Length = 20) check determines whether there are more pages: if the last page returned fewer than 20 records, we are on the last page.

1/* PreviousPage Client Action:
2   Start
3   → If(StartIndex > 0)
4     [True]
5     → Assign
6         StartIndex = StartIndex - 20
7         CurrentPage = CurrentPage - 1
8     → Refresh Data: GetTasks
9     → End
10     [False]
11     → End
12
13   NextPage Client Action:
14   Start
15   → If(GetTasks.List.Length = 20)
16     [True]
17     → Assign
18         StartIndex = StartIndex + 20
19         CurrentPage = CurrentPage + 1
20     → Refresh Data: GetTasks
21     → End
22     [False]
23     → End
24*/

Column sorting changes the Aggregate's Sort order when users click a column header. **Add local variables:** 1. Right-click screen → Add Local Variable → Name: `SortColumn`, Type: Text, Default: `"Task.Title"` 2. Right-click screen → Add Local Variable → Name: `SortAscending`, Type: Boolean, Default: `True` **Configure Aggregate sorting:** Open the GetTasks Aggregate → **Sorts** tab → Add Sort. However, instead of a static sort, leave the Sorts tab empty and use the **dynamic sort** approach via the `GetTasks.SortColumnList`. Alternatively (simpler for basic sorting), add a Sort in the Sorts tab and set its attribute to a Calculated Attribute or an expression. **Simpler pattern — Refresh with sort variables:** Create a `SortByColumn` Client Action: - Input Parameter: ColumnName (Text) - Flow: - Start - → Assign: SortAscending = If(SortColumn = ColumnName, not SortAscending, True) - → Assign: SortColumn = ColumnName, StartIndex = 0, CurrentPage = 1 - → Refresh Data: GetTasks - → End **In the Aggregate Sorts tab:** - Add Sort: Sort Attribute → Calculated Attribute expression: `If(SortColumn = "Task.Title", Task.Title, Task.DueDate)` with direction based on SortAscending **Wire up column headers:** In the Table widget, select each column header Text widget → Events → OnClick → SortByColumn with the column identifier as input.

1/* SortByColumn Client Action:
2   Input: ColumnName (Text)
3
4   Start
5   → Assign
6       SortAscending = If(SortColumn = ColumnName,
7                          not SortAscending,
8                          True)
9       SortColumn = ColumnName
10       StartIndex = 0
11       CurrentPage = 1
12   → Refresh Data: GetTasks
13   → End
14
15   Sort indicator expression for column header:
16   If(SortColumn = "Task.Title",
17      If(SortAscending, " ↑", " ↓"),
18      "")
19*/

A search input filters the Aggregate's results dynamically. **Add local variable:** Right-click screen → Add Local Variable → Name: `SearchText`, Type: Text, Default: `""` **Add search Input to the screen:** 1. Drag an Input widget above the table 2. Properties → Variable: `SearchText` 3. Properties → InputType: Text 4. Properties → Placeholder: `"Search tasks..."` 5. Events → OnChange → New Client Action: `OnSearchChange` **OnSearchChange Client Action:** Start → Assign: StartIndex = 0, CurrentPage = 1 → Refresh Data: GetTasks → End (Reset to page 1 when search changes, then refresh) **Add filter to the Aggregate:** Open the GetTasks Aggregate → **Filters** tab → Add Condition: `SearchText = "" or Task.Title like "%" + SearchText + "%"` The `SearchText = ""` part means no filter is applied when the search box is empty (showing all records). When SearchText has a value, only records with matching titles are returned. **Case-insensitive search:** OutSystems' `like` operator is case-sensitive on most databases by default. For case-insensitive search: `SearchText = "" or ToLower(Task.Title) like "%" + ToLower(SearchText) + "%"`

1/* Aggregate Filter condition:
2   SearchText = "" or ToLower(Task.Title) like "%" + ToLower(SearchText) + "%"
3
4   OnSearchChange Client Action:
5   Start
6   → Assign
7       StartIndex = 0
8       CurrentPage = 1
9   → Refresh Data: GetTasks
10   → End
11
12   Combined filter with date range example:
13   (SearchText = "" or ToLower(Task.Title) like "%" + ToLower(SearchText) + "%")
14   and
15   (FilterStatus = 0 or Task.StatusId = FilterStatus)
16*/

When sorting, filtering, and pagination all work together, a key rule applies: **any change to sort or filter must reset StartIndex to 0**. If a user is on page 3 and applies a filter that only returns 10 records (less than one page), staying at StartIndex=40 would show an empty table. **Complete state reset pattern:** Create a `ResetTableState` Client Action: Start → Assign: StartIndex = 0, CurrentPage = 1 → End Call `ResetTableState` at the beginning of: - SortByColumn (before refreshing) - OnSearchChange (before refreshing) - Any status filter change **The OutSystems UI Pagination block (alternative to manual buttons):** If OutSystems UI is referenced in your module, there is a built-in **Pagination** block in the Toolbox: 1. Drag the Pagination block onto the screen below the table 2. Properties: - **TotalCount** → expression: `GetTasksCount.Count` (a separate Aggregate that counts without Max Records) - **PageSize** → `20` - **StartIndex** → `StartIndex` 3. Events → **OnNavigate** → Client Action that updates StartIndex and refreshes GetTasks The Pagination block automatically shows the correct page number, total pages, and handles edge cases.

1/* Total count aggregate for Pagination block:
2   Aggregate: GetTasksCount
3   - Same sources as GetTasks
4   - Same filters as GetTasks (SearchText filter)
5   - Max Records: empty (count all)
6   - Output: use Count(Task.Id) as aggregate function
7
8   OnNavigate Client Action (for Pagination block):
9   Input: NewStartIndex (Integer)
10   Start
11   → Assign: StartIndex = NewStartIndex
12   → Refresh Data: GetTasks
13   → End
14
15   TotalCount expression on Pagination block:
16   GetTasksCount.List.Current.Count
17*/