Filter, sort and page records with Data View
Show active products in price order, one product per page.
Show active products in price order, one product per page.
Before you begin
Section titled “Before you begin”- An App Connect page with Data Traversal included. The in-app tour opens the prepared three-product example.
Bind the three sample records
Section titled “Bind the three sample records”Add Data View named productView and set Data Source to products.value. The prepared array contains Notebook at 8, Pencil at 2 and inactive Folder at 5. This walkthrough operates entirely on records already in the browser.
Configure filter, sort and page size
Section titled “Configure filter, sort and page size”Set Filter to active == true, Sort On to price, Sort Direction to Ascending and Page Size to 1. Repeat productView.data and bind name and price inside the repeat. The first row should be Pencil at 2. productView.items is 2 and productView.pages is 2.
Move to the next page
Section titled “Move to the next page”Add a button Click event using productView → Next Page. Bind Disabled to !productView.has.next. Add a First Page button to return to the start. In Preview, click Next page.
Verify filtering happened before paging
Section titled “Verify filtering happened before paging”The current row should now be Notebook at 8 on page 2. The inactive Folder is absent from both pages. The source still has all three records; Data View has only changed what this repeat displays.
Use server filtering for records not loaded
Section titled “Use server filtering for records not loaded”A Data View over one page from the server filters only that page, not the entire database. Put the filter, sort and paging into the server query when you need the full collection. Use productView.items == 0 for a no-results message; pages remains at least 1.
Check your result
Section titled “Check your result”The view shows two active products sorted by numeric price, one per page.