Displaying data with galleries
1. Displaying data with galleries
Your data is in place, so now it's time to show it to people. That's what galleries do, and this video teaches the gallery patterns you'll use in every chapter from here. Along the way we'll look at SharePoint, the kind of shared data source a team often uses, while you keep building against the Excel data from the last lesson.2. Connect to SharePoint data
Connecting to a shared data source follows the same shape every time. In the Data panel you click + Add data, the connector picker opens, and you choose your source. In a real organisation that's often SharePoint: you would pick your site, then the list you want, and Power Apps adds it as a data source. In these exercises you'll use the Excel data from the last lesson, which connects in exactly the same way. Either way, from your app's point of view it's simply a data source the gallery can read from.3. Flexible-height galleries
Modern Power Apps galleries default to flexible height, every row grows to fit its contents instead of being clipped to a fixed pixel height. That matters when your titles are different lengths, when a row sometimes has an extra status pill, or when you add a description later. We'll use flexible-height galleries throughout the course. If you ever inherit an older app where rows are clipping content, look for a fixed-height gallery, switching to flexible is usually the right move.4. Customizing the template
You customize a gallery by editing its template row, the top card. Click any control inside that template and look at the formula bar, and it shows something like ThisItem.Title. ThisItem is Power Apps' way of saying "the row I'm currently rendering." Edit the template once and every row in the gallery picks up the change.5. Conditional formatting
Conditional formatting means a control's appearance depends on the row it's rendering. It uses the same If you already know: a condition, a value when it's true, and a value when it's false. For Lumen's priority pill, you set its Fill with a nested If so that High shows red, Medium shows orange, and anything else shows gray, the way the slide shows. The same idea works for icons, labels, and borders, anywhere Fill or Color would normally take a static value.6. DueDate highlights
The same If pattern works for dates. You set the DueDate label's Color so that anything due before today shows red and everything else stays black, as the slide shows, using the Today function for the current date. Now any overdue task in Lumen's list jumps out in red. Overdue colors are a low-cost UX win that any real app benefits from.7. Empty states
A real-world detail every app needs is an empty state. When a filter returns zero matches, your gallery shouldn't show a blank, confusing void. Drop a Label that says "No matching tasks" onto the screen with its Visible property set to IsEmpty(Gallery1.AllItems). The Label only appears when the gallery has zero rows, whether the data source is empty or a filter returned no results. It's a small flourish that turns a learner-grade app into something you'd actually demo.8. Excel now, SharePoint at work
A quick note on data sources. In these exercises you'll work with the Excel data from the previous lesson. At your organisation, you'd often keep this kind of data in a SharePoint list instead, so the whole team can share and update it. The good news is that everything in this video, flexible height, ThisItem, conditional formatting, and empty states, works the same way whichever one you use. Learn it once here, and it carries straight over.9. Let's practice!
Time to bind Lumen's marketing tasks to a polished, flexible gallery.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.