Gallery control can show multiple records from a data source, and each record can contain multiple types of data.

In a Contacts data source, a Gallery control can be used to display your data, with each item in your data using other PowerApps controls like Label, HTMLText, TextInput and more to show contact information such as name, address, and phone number for each contact.

In PowerApps, the first thing that you need to consider in displaying your data is how you want your data presented on your screen. The Gallery Control provides different configurations, orientations and templates which will allow you flexibility of the look and feel of your application.

In most cases, Gallery is a very quick and easy way to display your data. But there are cases when your application may require a more complex way of presenting a data source to a user.

A few scenarios where data presentation in your application will become complicated is when a you have a huge data source that requires sorting, filtering, and order.

Of course, there are tons of ways that you can solve these problems by using Expressions or Functions such as Filter, Sort, SortByColumns, and many more which will help you be more precise with the data that you want to present to your user. But, one problem that this article will try to solve is how you can group your data.

Normally, a Gallery can only display a single source of truth, or one specific dataset. For you to show multiple variations or presentations, your application would require you to have multiple Galleries in place on your screen and you would have to switch the visibility between those galleries depending on your user’s interaction with the application.

This setup will not only make a huge negative impact to the application’s performance, but it would require you and your team to maintain double or triple the number of duplicate controls in your application.

In this article, we will only be using Flexible Height Gallery to hold our sections and a normal Vertical Gallery to display items under each group in your PowerApps application.

One cool thing in PowerApps is the flexibility of how you can use controls throughout your application. In this article, we will be exploring the capability of Gallery to contain another Gallery or a nested Gallery.

In displaying your data, the first thing that you must consider is how big your data can be visually. By understanding the values that are available to your data source, you can select the correct Gallery template to use for your case.

The Gallery control in PowerApps has a property called Template Size. Template Size is the height of each item in a gallery in vertical orientation or the width of each item in a gallery in a horizontal orientation. Template Size allows you to define the specific width or height of each item in your gallery. This is useful for keeping the consistency of your user interface and you would most likely use this on data source with consistent or maximum length of values.

However, on dataset where it may contain inconsistent length of values like paragraphs, it would require you to use Flexible Height Galleries. Flexible height galleries allow each item to have its own height depending on the controls that are available inside the gallery.

For our example, we need Flexible Height Galleries because, as we section or group our dataset, we won’t be able to identify the exact number of group our dataset will have as well as the exact number of items that are going to be available for each group.

In this example, you’ll create a Contacts list that is grouped by the first letter of each Contact’s first name. We will be using an Excel file that contains a table with a list of contacts which can be downloaded here: ___

Open PowerApps Studio, and start creating a blank app.

Step 1: Connecting to a data source

In the left navigation pane, select Data Sources, then select Connectors.

PowerApps Training

Select Show all connectors, then select Import from Excel.

PowerApps Training Philippines

Browse and locate Contacts.xlsx and select it.

Under Choose a table, click or tap Contacts and select Connect.

Step 2: Adding Section Gallery (Main Gallery)

On the Insert tab, select Gallery.

In the Gallery dropdown, select Blank Flexible Height.

Step 3: Grouping your dataset

Select your MainGallery to make it an active control.

In the formula bar, select Items in the Properties dropdown.

In the Items property value,

GroupBy(AddColumns(SortByColumns(Contacts,”FirstName”,Ascending),”Section”,Left(FirstName,1)),”Section”,”Items”)

To explain what’s happening in the code, we can break it down by function:

  • SortByColumns sorts our dataset using the values from our FirstName column in ascending order. This will maintain our dataset in alphabetical order
  • AddColumns is what we will be using to get the first letter of the First Name of each of our contacts which what we will be using to group our data
  • GroupBy allows our dataset to be grouped using our Section column

At this point, feel free to insert a label inside your MainGallery to see if you were able to group your data accordingly,

Use ThisItem.Section as the text value of your label.

Step 4: Displaying items on each group

Insert a Blank Vertical Gallery inside your MainGallery.

Use Items as Items value of your NestedGallery.

You should start inserting controls to your nested gallery that will hold the information for each item.

Feel free to change the look and feel of your application.

At this point, your application will look messy as items then to overlap one another as there is a static height that is set in the nested gallery. To fix this, we need to identify the number of items under each section and use it to calculate the height of the nester gallery per section.

Step 5: Fix Displaying Items in Nested Gallery by Calculating Gallery Height

Select your nested gallery as the active control.

Set a specific height for your gallery items by setting a static value under Template Size property.

Under Height property, use

CountRows(ThisItem.Items)*NestedGallery.TemplateHeight

To explain what is happening in this code, CountRows can be used to count the number of items of a specific source. We then multiply the number of items to the template size so we can get the total height we need for our nested gallery.

Now you can change the look and feel of your application.

That’s it! Now you can now create a sectioned gallery items while maintaining the simplicity of your PowerApps application.

Leave a Comment

© 2019 ClinkIT Solutions. All rights reserved.

Leave a Comment