Building Pagination Navigation
Last updated
Last updated
The plugin was designed to allow complete freedom in designing the navigation menu. You can tailor it exactly to your needs. We will continue building out our tutorial as an example.
Every pagination needs previous and next buttons to navigate through the available pages. Any Button, Group, Text icon etc that can have a workflow attached to it can be used as our button. To keep this tutorial simple we are just going to use a simple text.
To start with we are going to drop a group with its container layout as 'Row' onto our page and add our previous and next text.
We now need to define what these buttons do in our workflow. So lets add a workflow for each of them. The example below shows us setting up the previous button. We will do the same again for the next button.
That's it done! Our previous and next buttons are configured.
The page numbers to use have been automatically generated by the plugin and saved to the elements state 'Page Numbers'.
The easiest way to display our page numbers is by using a Repeating Group so we will drop a repeating group between our previous and next buttons set its type of content to 'Number' and its Data Source as the Ultimate Paginations 'Page Numbers' State.
We only need 1 row so can check the 'Set fixed number of rows' and set it to 1. We set up in our element to display 5 numbers so we will set the fixed number of columns to 5.
We are going to add a bit of styling to our page numbers so we will create a group inside our repeating group with a fixed width and height of 25px and a roundness of 15 so we have a nice circle container. And add a 5px margin to the left and right.
Dont forget to set the group we aded inside of the repeating groups type of content and data source. In this case we set it to 'Number' and the data source as 'current cells number'.
Now we just need to drop a text element inside of our group and set its dynamic value to be 'Parent groups number'. Now when we preview the app we should have something that looks like this
The last thing we need to do is set what happens when a user clicks on one of the numbers. We have a workflow for that! Just as we did for our previous and next button you will find the 'Page Number Clicked action. Then we just pass in the current page number using 'current cells number'
That's everything done. All we need to do now is attach it to our repeating group.
