Mastering Power Apps Galleries: A UX-Focused Implementation Guide

A gallery in Power Apps is often the centerpiece of a canvas app. It is where users browse records, trigger actions, and navigate into details. However, a poorly designed gallery can quickly undermine confidence in the entire application. This guide walks through the concrete design decisions and Power Fx code patterns that turn a basic gallery into a polished, professional user experience.

Take a real-world scenario: a Store Support Ticket System for a regional retail chain. Store managers submit tickets for broken equipment, inventory discrepancies, or staffing issues. The central support team needs to quickly find, sort, and act on these records.

Your source data could be a SharePoint list or a Dataverse table named SupportTickets with these columns:

• Title
• StoreNumber
• Category (Facilities, IT, Inventory, Staffing)
• Priority (High, Medium, Low)
• Status (Open, In Progress, Resolved)
• AssignedTo
• Notes
• DueDate

1. Start with Flexible Height Galleries

The foundation of a responsive gallery is enabling the Flexible height property. This forces the gallery to resize each row based on its content instead of forcing a uniform height.

Why this matters: your Notes field might have ten characters in one ticket and five hundred in another. A fixed-height gallery either clips long notes or wastes space on short ones. Flexible height guarantees every row fits its content perfectly.

Here is a simple Items property to get you started:

SortByColumns(
  Filter(
      SupportTickets,
      Status <> "Resolved"
  ),
  "DueDate",
  SortOrder.Ascending
)

2. Design for Inevitable Emptiness

An empty gallery that shows a blank white rectangle is confusing and unhelpful. Always build an empty state that answers two questions:

1. Why is the gallery empty?
2. What should the user do next?

Add a label or a container above your gallery and set its Visible property to evaluate whether your filtered dataset has any records.

CountRows(varFilteredTickets) = 0

Here is a quick reference for messaging:

3. Reset Scroll Position on Screen Re-Entry

Users often drill into a record and then navigate back. If you do not reset the scroll position, they land halfway down the list. This is disorienting and makes it look like the app is buggy.

The fix is simple. In the OnHidden property of the screen, call the Reset function on your gallery control.

Reset(gallery_SupportTickets)

4. Refresh Data Without Confusing the User

Canvas apps do not always pull the freshest data when you navigate to a screen. This is especially true if someone edited a ticket on a different screen or if another user updated the record concurrently.

• Automatic refresh: When you use the same data source on the same app session, CRUD operations via Patch() or SubmitForm() usually keep the gallery in sync.
• Manual refresh on screen load: In the OnVisible property of the screen, call the Refresh function.

Refresh(SupportTickets)

Adding a manual refresh button gives users confidence:

Refresh(SupportTickets);
Set(varFilteredTickets, Filter(SupportTickets, Status <> "Resolved"))

5. Master the Search & Filter Pattern

This is where most apps run into performance trouble. The golden rule: do not search while the user types. Every keystroke triggers a new query to the cloud data source and causes unnecessary render cycles. Instead, wait for a button press.

Set your controls up:

• txt_SearchTerm (Text input)
• btn_Search (Button)
• drp_Category (Dropdown)
• drp_Priority (Dropdown)

On the button's OnSelect property, store the search term in a global variable and apply all filters in one pass:

Set(varSearchTerm, txt_SearchTerm.Text);
Set(varFilteredTickets,
  If(
      IsBlank(varSearchTerm),
      Filter(
          SupportTickets,
          (IsBlank(drp_Category.Selected.Value) Or Category = drp_Category.Selected.Value),
          (IsBlank(drp_Priority.Selected.Value) Or Priority = drp_Priority.Selected.Value)
      ),
      Filter(
          SupportTickets,
          (IsBlank(drp_Category.Selected.Value) Or Category = drp_Category.Selected.Value),
          (IsBlank(drp_Priority.Selected.Value) Or Priority = drp_Priority.Selected.Value),
          (Find(varSearchTerm, Title) > 0 Or Find(varSearchTerm, StoreNumber) > 0)
      )
  )
)

Your gallery's Items property should simply point to varFilteredTickets. The empty state label then checks CountRows(varFilteredTickets) = 0.

6. Explicitly Define the Sort Order

Never rely on the default database order. Use SortByColumns to make the behavior predictable. A good default is sorting by DueDate ascending (most urgent first).

Give your users a dropdown to choose the column and a toggle to switch between ascending and descending.

Set(varSortBy, drp_SortBy.Selected.Value);
Set(varAscending, tog_SortAscending.Value);
Set(varFilteredTickets,
  SortByColumns(
      Filter(
          SupportTickets,
          (IsBlank(drp_Category.Selected.Value) Or Category = drp_Category.Selected.Value),
          (IsBlank(drp_Priority.Selected.Value) Or Priority = drp_Priority.Selected.Value)
      ),
      varSortBy,
      If(varAscending, SortOrder.Ascending, SortOrder.Descending)
  )
)

7. Avoid Nested Galleries (Performance)

Nesting a gallery inside another gallery is one of the most common performance killers in Power Apps. It renders rows and sub-rows simultaneously, causing high memory usage and sluggish load times.

The better alternative: load your data into a local collection, then group it.

ClearCollect(col_LocalData, SupportTickets);
ClearCollect(col_Grouped, GroupBy(col_LocalData, "Category", "GroupItems"))

Now use a flat gallery bound to col_Grouped and a child gallery bound to ThisItem.GroupItems. This moves the grouping logic out of the cloud data source and gives you much faster rendering.

Common Mistakes & Troubleshooting

Here are other frequent pitfalls to watch for:

• Stale data when navigating. Always use Refresh() on OnVisible or provide a manual refresh button. Power Apps does not poll for changes automatically.
• Forgetting to reset scroll. Without Reset() on OnHidden, users land back in the middle of the list and miss the newest records.
• Missing empty states. A blank gallery looks broken. A helpful message is a sign of a mature app.
• Variable scope issues. Initialize your global variables – such as varSearchTerm and varFilteredTickets – in App.OnStart to avoid blanks on first load.

Final Recommendation

A well-designed gallery goes beyond just showing data. It respects the user's time, anticipates their needs, and performs reliably.

1. Always start with a flexible height gallery.
2. Always build a meaningful empty state.
3. Always require a button press for cloud search queries.
4. Always explicitly reset the scroll position on OnHidden.
5. Never use nested galleries directly on cloud data; use grouped collections instead.

By applying these patterns, your galleries will feel responsive and professional, regardless of the underlying data source.

References

• Original source: Power Apps Gallery Design & UX Guidelines by Matthew Devaney
• Microsoft Learn: Flexible-height galleries
• Microsoft Learn: Refresh function
• Microsoft Learn: SortByColumns function
• Microsoft Learn: Filter and Search delegation