When anyone browses the web, they're accustomed to certain design features that make their experience smooth and intuitive. One such feature is pagination, the ability to "flip pages" between more extensive sets of items. Think of flipping through pages on a clothing website. According to Jakob's Law of Internet User Experience, "users spend most of their time on other websites." This means that ss a good dashboard developer, you should make your Sigma dashboards incorporate design elements that users already know and expect.
Using pagination in Sigma, you can break down large data sets into more manageable chunks, making it easier for your users to find and analyze the information they need.
In this post, we'll walk you through how to implement pagination in Sigma. By aligning your design with standard web practices, you'll provide your users a more intuitive and satisfying experience. Let's get started!
Step 1: Group your data
Create a grouped table at the level you want to paginate items. For example, if you're going to flip between Customers, you'd create a grouping at the Customer level.
If you'd like your pages to be based on a measure, like ranking top or bottom, be sure to include that measure at the grouped level.
Step 2: Enumerate the Rows
Next, we need to count how many items are in our data. A common scenario for pagination is showing items ranked (i.e., 1-5, then 6-10). For this example, I've used RankDense on Sales to provide unique ranks for customers.
If you don't have a measure by which to rank, you can use rownumber() to enumerate the rows.
Step 3: (Optional) Create a Page Size Control Element
After years of dashboard development, I've learned to design with flexibility in mind. A page size control element allows you or the end user to decide how many rows are on each page. If you never need to change the number of items, you can hard code the number in the next step.
Add a Number Page Control (can be a text input or slider) and change the name to Page-Size.
Step 4: Identify which page each item is on
Now that we know how many items we want on each page, we can tell Sigma to divide our item rank or row number by the page size.
Add a Page Identifier Calculation at your grouped level.
RoundDown([Your Row Number Field] / [Page-Size-Control-Element]) +1
Step 5: Identify the last page
To make the pagination stop on the last page, we need to know which page is last. Create a Table Summary to find the max page identified.
Step 6: Create a Current Page Control Element
Next, we'll create a parameter to identify the current page displayed. I recommend using the Text Control Element because it'll be easier to configure the actions later. Make sure to use a number control type and enter 1 for the first page.
Step 7: Create a Child Table Element
With pagination, we aim to filter to a smaller number of items but we also need to know which items would be on the previous and next pages. To do this in Sigma, we need to keep all the data in our original or parent element and create a child element that uses those page identifier results (as opposed to calculating them in the element).
I would advise using a child table element for this step. You could do this in a child visualization, but some steps will be more manageable in a table. Plus, because of Sigma's cloud architecture and backend optimizations, adding an additional child table does not result in a performance trade-off.
Note: I've renamed the original table to "Parent List" to help identify which table is which.
Step 8: Calculate the Previous Page and Next Page
Earlier, we hard-coded the current page to be 1, or the first page. Now, we will calculate the previous and next pages based on the current page so our workbook actions know if the end-user wants to go forward or backward in the list. We will also bookend the pages with the minimum and maximum number of pages. For example, there is no -3 page.
In the Child Table, create a Previous Page table summary using the formula below. Be sure to use the Page Identifier field within the Child List, not the Parent List. The easiest way to ensure this is to type out the formula and click on the Page Identifier column in the child element. Another easy option is to rename the Page Identifier column in either or both tables.
Again, create a table summary for the Next Page calculation. I recommend using the Max Page Identifier column in the child table versus using a lookup to reference the column. If you don't see the max column, add it as a source column (second image below).
Previous Page
Greatest([Page Identifier] - 1, 1)Next Page
Least([Page Identifier] + 1, [Max of Page Identifier])How do these calculations work?
Note: Both calculations should return "multiple values," which is ok!
Step 9: Filter to the Current Page
Next, we want to filter the child table to only show items on the current page. In the child table, create a calculation where the current page control element equals the page identifier. Then, keep only the True values.
Now, you should only see a single number in the Previous and Next Page table summaries.
Page Filter
[Current-Page] = [Page Identifier]
Step 10: Create the buttons and current page label
Now that the backend is built, we can start to build the interactive buttons. We need three items: a current page label, a forward button, and a backward button.
I'll use the Sigma UI Buttons for these instructions, but you can also use images for a cleaner design. I like to find UI icons and images at Flaticon.com.
Add your Previous Page button, Current Page button, and a dynamic text element equal to the current page control element as a label.
Step 11: Previous and Next Page Workbook Actions
Next, we'll add a workbook action for each button to overwrite the current page control element with either the previous page or the following page table summary values.
And that's it! Test out your buttons to make sure they are targeting and working correctly. They should function like the video below.
But don't stop here! Now that you've got the pagination framework in place, think about adding an extra layer of visual flair. Customize the look with different button options and visualizations, such as bar charts and a supporting pivot table.
How to Paginate Conclusion
Adding pagination to your Sigma workbooks is a straightforward way to make them more user-friendly. By following Jakob's Law, you're tapping into design patterns users already know and love, making your data easier to navigate.
Pagination breaks down large data sets into manageable chunks, helping users find what they need without feeling overwhelmed. This simple feature can significantly enhance user interaction with your dashboards, improving satisfaction and productivity.
FAQs
How would I add a first and last page button option?
Sometimes, if your dataset is large, adding a first and last page option in addition to the previous and next page might be convenient. To do this, add two additional buttons (you'll have four total). Add an action to the first page that will set the current page to "1". Then add an action for the last page that will set the current page to the Max Page available calculation.
What if I want to paginate multiple items?