A PowerApps Pattern for Displaying Related Data

Introduction

There are times when you need to add extra dimension s to your data. Typically, this is addressed using the highly versatile and useful Gallery control. Here we’ll cover an alternative to using a Gallery within a Gallery for displaying dynamic data sets.

If you’d rather just try it yourself, download our sample PowerApp

Use Case

If you are working with parent child relationships in your data and would like to display these types of data sets in a singular User Experience, this design pattern might be a viable option for you.

Nested Gallery Challenges

The Gallery control will address many UI scenarios. Sometimes your requirements may lead you into scenarios where you may consider nesting a gallery within a gallery so that you can demonstrate a parent child type of scenario.

The Gallery control is extremely useful and offers a ton of versatility, but nesting Galleries can create extra work, especially with varying / dynamic data sets.

Why This can be Problematic

If you’ve nested a gallery within a gallery before, you might have dealt with issues around:

  • Gallery Sizing

  • Extra Scroll Bars

  • White Space

InceptionGallery.gif

PowerApps: A Gallery within a Gallery

Even if you use the Flexible height gallery, it may not respond so that the sizing is dynamic, leaving you with extra white space or scroll bars.

There are some tricks for working around the extra scroll bars etc. You can dynamically set the height of a gallery by counting rows in your data source etc.

We wanted to share a fairly simple and effective alternative to this that uses stock PowerApps features.

This is simply another way of addressing the same problem that may get you the results you are looking for.

The Flexible Height Gallery + HTML Option

The steps documented below use a Flexible Height Gallery and an HTML Text control to provide you with a UI that is:

  • Smooth rendering

  • Dynamically sizing

  • Capable of displaying related data

Solution Build

Here are the steps we followed to build this solution:

Now that we have the HTML Text Control on the screen. You can use the Concat PowerApps Function to dynamically generate HTML content from your datasource. Here’s a walkthrough of the details.

The Dataset

We are working with 2 Collections. On your App’s OnStart Event or on a Button Click Event, use ClearCollect to load the collections.

Country Data

collCountryData - this is a Collection of Countries and Continents. This Collection is set into the Flexible Height Gallery’s Items property

ClearCollect(collCountryData, {country:"Japan", continent:"Asia"},

{country:"China", continent:"Asia"},

{country:"Indonesia", continent:"Asia"},

{country:"India", continent:"Asia"}…)

(not a complete dataset)

City Data

collCityData - this is a Collection of Cities Population Data grouped by Contry. This Collection is used in the HTML Text control.

ClearCollect(collCityData, {cityrank:1,cityname:"Tokyo",population:"38140000",Country:"Japan"},

{cityrank:2,cityname:"Shanghai",population:"34000000",Country:"China"},

{cityrank:3,cityname:"Jakarta",population:"31500000",Country:"Indonesia"}…)

(not a complete dataset)

If you are new to PowerApps Collections, here is a run through.

Add a Flexible Height Gallery

Let’s add a Gallery to the canvas to display parent data.

Flexible Height Gallery.png

Add a Blank Flexible Height Gallery to your Canvas

Set the Items property of the Gallery to your Parent dataset

Use the Flexible Height Gallery is used to present data from the collCountryData Collection.

  • Set the Items property to collCountryData

Add a Label to the Gallery

Add a label to the Gallery and set its Text Property to ThisItem.country & " - " & ThisItem.continent

PArentLabel.png

Add a Label to the Gallery

Display data from your Parent. In this case we are displaying Country and Continent.

Add an HTML Text control to the Gallery

  • Add an HTML Text control to the gallery

  • Make sure to set the Auto Height property to On / True

HTML Text.png

Add an HTML Text Control to the Gallery

This is where things get interesting.

Set the HTML Text Control’s HTMLText Property

We are using the Concat function to parse through the data in our collCityData

  • Set the HTMLText property of the Collection to:

    • Concat(Filter(collCityData, Country=ThisItem.country), "<span><b>" & cityrank & " - " & cityname & "</b> (" & population & ")</span>", "<br>")

Using the Concat Function

The Concat function creates HTML for each row in the collCityData collection that matches the Filter we have applied.

The Concat Function requires 3 parameters: Concat(table, expression, separator)

  1. Table - this is the dataset that will be processed by the Concat function

  2. Expression - this is the expression that will be applied to each row in the dataset

  3. Separator - this identifies what will be used to separate each row.

Parameter 1: Table (Filter the Data)

Concat(Filter(collCityData, Country=ThisItem.country), "<span><b>" & cityrank & " - " & cityname & "</b> (" & population & ")</span>", "<br>")

  • We are Filtering the collCityData collection so that only city data is returned for city’s belonging to the parent country.

  • The Concat function will only receive city data that is matches the parent gallery item’s country (see ThisItem.country)

Parameter 2: Expression (Build the HTML for Each Row of Data)

Concat(Filter(collCityData, Country=ThisItem.country), "<span><b>" & cityrank & " - " & cityname & "</b> (" & population & ")</span>", "<br>")

  • We are generating HTML for each row of data that is returned

  • You can see that we are using the cityrank, cityname and population from the collCityData Collection to display our data.

Parameter 3: Separator (Create Rows / Lines of Data)

Concat(Filter(collCityData, Country=ThisItem.country), "<span><b>" & cityrank & " - " & cityname & "</b> (" & population & ")</span>", "<br>")

  • We need to separate each row of data with something. We’ll use the a line break in HTML for this.

 Gallery + HTML Text Control

Gallery + HTML Text Control

Feel free to download an Export of our sample here