for a long time I used to create a pagination pager for every repeating group… it was time consuming and annoying
when bubble upgraded their reuseable elements to allow parameters to be passed into the reuseable I discovered a way to build a reuseable pager element - here’s how it works:
- create reuseable for the pager with input parameters for current page, total items, items per page
- add a state to the reuseable for “selected page”
- add a workflow for previous, next or page selection (can show page numbers in dropdown or repeating group) - on page select run workflow to update the page selected state
- reset the state using a scheduled workflow half a second after it has been set (this gives enough time for it to be registered and acted upon)
- add the reuseable pager for each repeating group
- map the parameters (note I do the # pages calculation in the pager using total items/items per page)
- add a workflow for “when condition is true” set it to when pagers “selected page” is not empty
- then use go to page in repeating group to change the page based on the selection
- the scheduled workflow clears the selected page after half a second allowing the “when condition is true” to retrigger
the pager element is quite simple design it has:
- previous and next buttons
- either a “1 of 20” text, or a dropdown, or a repeating group to represent the pages
now I can add a pager to any repeating group in a few seconds - just map 3 inputs and add a when condition is true event.
and since each pager is unique the condition is true event runs per pager which allows you to have as many pagers on the same page as you need - they will all function separately
having a reuseable element for the pager also makes it very easy to update all pagination elements in the app. for instance you might start with a simple “1 of 20” for the “current page 1 of total 20 pages” then later on decide you want to change it to a dropdown or input so the user can jump to pages - with a reuseable making that change is then reflected in all places it is used in the app.