Displaying data with galleries

1. Displaying data with galleries

Your data is in place, so now it's time to show it off. That's what galleries do, and this video teaches the gallery patterns you'll use in every chapter from here. We'll look at SharePoint, the kind of shared data source a team often uses, while you keep building against the Tasks collection from the last lesson.

2. Adding a data source with SharePoint

Connecting to a shared data source follows the same shape every time. In the Data panel you click + Add data and choose your source. In a real organisation that's often SharePoint: you pick your site, then the list you want, and Power Apps adds it as a data source. In the exercises you'll keep building against the Tasks collection instead, which keeps everything self-contained and repeatable. A gallery reads a collection exactly the way it reads a connected list, so what you learn here carries straight over.

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, or when a row sometimes has an extra status pill. We'll use flexible-height galleries throughout the course.

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. Reading a value with Text()

One habit worth building early, is to type a dot after an object and Power Apps lists what's available, so ThisItem plus a dot shows every column in your row. Each value has a type: text, number, a true-or-false Boolean, date and time, a record, or a whole table. DueDate is a date, and a raw date reads badly on a card, so you wrap it in Text. Text takes the value and a pattern: the bracketed code sets the pattern's language, and mmm d means short month then day, giving you Jun 15.

6. 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 label, you set its Color with an If so that High shows red and everything else shows gray, the way the slide shows. The same idea works for icons, borders, and backgrounds, anywhere Color or Fill would normally take a static value.

7. 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, using the Today function for the current date. Now any overdue task in Lumen's list jumps out in red.

8. Empty states

Every app needs 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.

9. A collection now, a connector at work

A quick note on data sources. Everything in this video, flexible height, ThisItem, conditional formatting, and empty states, works the same whether your rows live in a collection or in a SharePoint list that your team might share at work. The gallery doesn't care where the table came from. Learn it once here, the principals carry straight over.

10. Let's practice!

Time to bind Lumen's marketing tasks to a polished, flexible gallery.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.