Skip to main content

Implementing Pagination in Microsoft Power Apps

 

Imagine loading all the listings under a category on your e-com platform on a single page. That feels like flooding the page, causing great inconvenience to your users. Also, the page will take more time to load, adding to your reader’s frustration. You need to organize content on your app to make it easy for your audience to access information. Pagination is one of the widely used ways to organize content for better usability and performance. In this article, we will discuss how to implement Pagination when building your app on Microsoft Power Apps.

Need for content organization

User experience is the X-factor for driving user adoption. Your app should be fluid, reducing cognitive load on your users. Let’s go back to the e-com example. You scroll through a thousand products on a single page to find the one you need. Could you locate it easily when you revisit the same page? Not unless you mark it as a favorite or added to cart. This would be a great inconvenience, wouldn’t it? If the listings are organized in different pages, you can locate it by the page number easily.

Well-organized content makes your app usable; usability improves user engagement and retention rate. Proper content organization reduces cognitive load on your users and improves their experience. This is where Pagination comes as an effective way to organize your content.

What is Pagination?

Pagination is a pattern that structures data into pages with numbering. Pagination reduces page load time and delivers a consistent user experience. Your users can easily navigate through your app or content. They can jump directly to the page they are looking for rather than scrolling through the entire content. Such a breezy experience helps you keep them engaged.

With Pagination, your app fetches only the required information at once. Thus, Pagination helps you save resources and network bandwidth, significantly improving the application performance.

Implementing Pagination in Power Apps

If you are building your application on Microsoft Power Apps, you can implement Pagination on your application with these simple steps.

Step 1: Open Power Apps Studio

  • To open Power Apps Studio from the Power Apps portal, go to https://powerapps.microsoft.com/ and sign in with your Microsoft account.

Step 2: Create a new Canvas App or edit an existing Canvas App

  • If you are creating a new Canvas app, click on the Create button and select Canvas app. Then, give your app a name and select a layout.
  • If you are editing an existing Canvas app, open the app in Power Apps Studio.

Step 3: Add a new screen to your Canvas App

  • To add a new screen to your Canvas app, click on the “+” button in the left-hand menu and select Screen.

Step 4: Use the following formula in the “OnVisible” property of the screen control:

  • Select the screen control for which you want to set the context variable.
  • In the right-hand properties pane, locate the “OnVisible” property.
  • Enter the following formula:  UpdateContext({varPageNumber:1});
Pagination-Step-4

Step 5: Add Gallery Control

  • Add a Gallery control to the screen.
  • Set the gallery’s items property to a data source.
  • In our scenario, we have used the table called “Projects” as our data source.
  • Rename the gallery as “galProjects”.
Pagination-Step-5

Step 6: Add Dropdown Control

  • The dropdown control serves as a user interface element that allows users to choose the number of rows, they want to display in the gallery control simultaneously.
  • Add the dropdown control and rename it as “drpPageSize”. You can move and resize it as per your design requirements.
  • Go to the “items” property. Define the number of rows you want to display, and the Gallery control will display the records accordingly. For example, [“5″,”10″,”15″,”20″,”25”].
Pagination-Step-6.1
  • Navigate to the “onChange” property and add the below mention code –

UpdateContext({varPageNumber:1});

Pagination-Step-6.2

Step 7: Add (Previous) Icon/Button Control

  • Add a button or icon and rename it as “Previous_Icon”.
  • Use the given formula below in the “OnSelect” property of the previous icon. This will be used to decrease the current page number.

UpdateContext({varPageNumber: varPageNumber – 1})

Pagination-Step-7.1
  • Use the given formula below in the “displayMode” property on the previous icon. This will be used to disable the icon if the current page number is 1.

If(varPageNumber = 1, DisplayMode.Disabled, DisplayMode.Edit)

Pagination-Step-7.2

Step 8: Add (Next) Icon/Button Control

  • Add a button or icon and rename it as “Next_Icon”.
  • Use the given formula below in the “OnSelect” property of the next icon to increment the current page number.

UpdateContext({varPageNumber: varPageNumber + 1})

Pagination-Step-8.1
  • Use the given formula below in the “displayMode” property on the previous icon. This will be used to disable the icon if the current page is the last page.

If(drpPageSize.Selected.Value * varPageNumber < CountRows(Projects), DisplayMode.Edit, DisplayMode.Disabled)

Pagination-Step-8.2

Step 9: Add a Label Control

  • Utilize the label control to showcase the current page number and total number of records/rows.
  • Add a new label control and rename it as “Sequence_Label” and use the below given formula in the “Text” Property of the label.

“Page : ” & If(RoundUp(CountRows(Projects)/ drpPageSize.Selected.Value,0)=0,0,varPageNumber)  & ” of ” & RoundUp(CountRows(Projects) / drpPageSize.Selected.Value,0)

Pagination-Step-9

Step 10: Filtering the Gallery Control

  • Filter the gallery component to display rows/records based on the pagination logic.
  • Use the below given formula in the “items” property of the gallery component.
Pagination-Step-10

Step 11: Save and publish the app to verify the changes

  • Save & publish the canvas app.
  • Play the app and check the new pagination system.

These simple steps will help you add Pagination to your application.

As a company, we are convinced that applications designed with a specific purpose can have a more significant and meaningful impact, surpassing the benefits of merely prioritizing the latest functionalities. Our approach involves meticulous crafting of applications on Power Platform, taking into account factors such as needs, adoption, return on investment (ROI), and user intuitiveness.

Saxon’s Power Platform experts are delivering meaningful outcomes in driving organization’s digital transformation journey. We help our customers build the most reliable and efficient solutions on Power Apps, improving their processes and productivity. From consulting to app development, we’ve got you covered. Get in touch with us now.

About the author

Palak Intodia

Senior Software Engineer at Saxon AI
Palak is a certified Power Apps developer with a passion for creating efficient and user-friendly cloud-based applications.

Follow us on LinkedIn and Medium to never miss an update.

Labels:

Comments

Post a Comment

Popular posts from this blog

Can Agentic AI Make Customer Service Truly Real-Time?

  For years, enterprises have tried to make customer service faster — automating workflows, tightening SLAs, launching 24/7 chatbots. Yet customers still wait — not only for responses, but for reassurance that someone understands. Speed alone doesn’t feel like care anymore. Because real-time isn’t defined by seconds — it’s defined by intelligence that understands intent and acts with empathy. That’s the new frontier of customer experience emerging through Agentic   AI for customer service  — a system of intelligent agents that doesn’t just respond instantly but reasons, learns, and collaborates with humans to make service truly real-time. Are We Solving Problems or Just Replying Faster? Most customer service journeys still begin the same way they did a decade ago — a ticket raised, a call logged, an email sent. Every step that follows is a reaction. Agentic AI for customer service redefines that flow. Instead of waiting for a customer to report an issue, intelligent agent...
Post a Comment
Read more

Harnessing the power of Generative AI in Customer Service

  If you asked any customer service professional to sum up their experience of the last couple of years, they would likely respond that it was intense! The budgets have been fluctuating, customer expectations are skyrocketing, and service teams are locked in a perpetual quest: How to achieve more with limited resources? Implementing   Artificial Intelligence in customer service  is the right thing to do. With the buzz around   generative AI models   built on pre-trained, large language models that generate human-like, unique content based on prompts, it is no wonder that this technology will be game-changing in customer service.  Meeting the soaring customer expectations   The landscape of customer service has gone through a seismic shift since the onset of the pandemic. Customers’ expectations have soared to unprecedented heights;  72% of customers  choose businesses offering swift customer service. However, customer service agents are constantly swamped with w...
Post a Comment
Read more

Advanced AI Capabilities in Azure AI Services – 14 questions every CIO should ask

  Recently, Microsoft announced new features in Azure AI Services at the   Ignite 2023   event. As a Microsoft partner, we are following these updates closely and exploring how the new features will unlock more value for enterprises.  The slew of updates is more focused on empowering businesses with enterprise-grade generative AI applications – from leveraging cutting-edge foundation models to building AI applications to enhancing user experiences on those AI applications.   Developing generative AI applications that work exclusively on your enterprise data, for your enterprise is a complex process. You need powerful GPUs to finetune large language models (LLMs). Making this process easier for enterprises, Microsoft launched  Model as a Service  (MaaS) in the Azure AI model catalog. Using MaaS, you can finetune LLMs and build generative AI applications using inference APIs. You will be charged for the number of tokens used as part of the pay-as-yo...
Post a Comment
Read more