Everything You Need To Know About Creating A Gallery In Power Apps

Everything You Need To Know About Creating A Gallery In Power Apps

A gallery in Power Apps is a flexible control that displays records from data sources like SharePoint or Dataverse.

It offers customisation options, allowing you to choose which data points to show and how they are arranged.

In this blog, we’ll guide you through creating a gallery, from connecting your data source to adding interactive features, helping you make the most of this powerful control in your apps.

What is a gallery?

A gallery is a very flexible control used to display a set of records from a data source, whether that’s defined in app using collections, or from connected data sources such as SharePoint & Dataverse.

Galleries are exclusive to canvas apps and come with the benefit of total customisation capabilities. You can choose which data points from a record to display and how those are arranged – with the caveat that each record in a specific gallery will follow the same design.

To highlight the variety, both the summary & recent transactions below could both be galleries. Summary would be a horizontal gallery and Recent requests a vertical gallery.

Variations

Galleries come in three forms. Vertical, Horizontal, and Flexible, though at the time of writing the flexible galleries are a little temperamental so most of your work will be with vertical or horizontal galleries.

The difference between vertical and horizontal is simply the direction that records stack. For vertical, they will be top to bottom. For horizontal, left to right.

First gallery pre-requisites

You will need a data source to connect to

In this example, I will be using SharePoint with some sample data, but you can use any that you have.

If you wish to follow this example

download the pet_data.xlsx (opens in a new tab) csv file

In your SharePoint site select New > List (Fig 1)

Select “from CSV” (Fig 2)

On the import screen select “Title” for the pet’s name and click next (Fig 3)

Click create on the confirmation popup

This will then import the list and make it available to you https://.sharepoint.com/sites//Lists/pet_data/

Making galleries interactive

With the above example, although this is a functional gallery, an extra tip is to include buttons.

Select the template, hit insert, and insert a button

On the button, remove the Text from the Text property

resize the button to fill the entire template

set the fill property to RGBA(0,0,0,0)

Set the HoverFill property to RGBA(244,244,244,0.5) – the important number is the last (0.5) as it denotes the opacity of the colour, the first three could be whatever you want.

Set the OnSelect to Navigate(DetailScreen1, ScreenTransition.None)

Now the gallery will react to the cursor, indicating that the item is clickable. Not only does it light up grey, but the cursor will also change to indicate that it can be selected.

Next Steps

You have now successfully created a gallery from a template, added additional fields and added some custom UI functionality to enhance the experience. To continue your journey, try out the following:

Add in different field types, choices, people, etc.

Play with the UI

Practice setting variables using the OnSelect function

Practice changing the UI based on whether the item is selected or not

Pair the gallery with other controls such as a form – when an item is selected, show it in the form for example.

Try out the Filter() and Sort() functions

Trusted by Leading Brands

“We work with organisations across many sectors of different shapes and sizes from 10 to 100,000 employees.”

Contact Form

Contact our team today!