A deep dive into PowerApps galleries

You may know galleries as objects similar to tables and use them to display your data as a list, but galleries can be much more than this. In this article I will explain lesser known uses of galleries aush as progress indicators, filter control, navigation panels and skeleton screens !

Galleries are very powerful objects which essentially allow you to bind the properties of elements inside the gallery to the dataset used as the Items property of the gallery. This corresponds, in Javascript to the Array.map(()=>{}) method to generate HTML DOM nodes from array elements.

In their most simple form, galleries are very similar to tables can be used to display items vertically, with a control allowing to “enter” or drill through to the item content to Edit/View more details.

In the next section, we will have a look at a few interesting uses of vertical and horizontal galleries to improve navigation and performance

A simple use of gallery : minimal formatting & drill through control

How many galleries can you see?

In the following sections, we will analyse various elements of a standard, simple app that I created for the occasion : A diary app to log my thoughts, and (document the uncontrolled growth of my beard !) during the Covid 19 lockdown ! – and to begin, I would like you to try and count how many galleries are used in the following picture – this is of course a trick question !

The App Home Page

There are in fact 4 galleries used on this screen, but one of them is not visible !

  • The main gallery showing the list of articles that I wrote, with controls allowing to go in and edit the article – this is the most common way galleries are used, but note here how the underlying data table can be used to determine the format & color of the gallery elements, such as the published / draft flag, to improve the readability of the content
  • A gallery serving as navigation panel to navigate to the login screen or to a different part of the app
  • A gallery serving as filter panel, to filter on draft or published items only, or to show all items both draft and published
  • ..And finally, a gallery appearing only during the refresh process to provide a greyscale skeleton screen and provide an element of animation while the asynchronous process is going on.
3 visible galleries
.. and a fourth, visible during refresh

Navigation Panel : inputs and outputs

The navigation panel uses a very simple data set that is defined when the application first starts : a 3 row table, indicating the 3 destination screens the navigation panel will taker the users to. This table is used in the Items property of the gallery

Defining the navigation gallery dataset

When the use clicks the gallery, a variable is used to store the selection and adjust the formatting of the gallery to show which item has been selected, so the OnSelect property of the gallery should be set to :

OnSelect property of the gallery

Finally, the formatting of the gallery elements should also depend on the selected destination in order to show which part of the app the user is currently viewing in a different way from the parts the user is not viewing : in other words, the current place should be showing as active & unselectable while the other places should be showing as selectable. In my Apps I usually show the active tab with a white background and colored font, and the inactive tabs with a gray background. So the button inside the gallery will have a “Fill” property set to

If(selNavId = ThisItem.NavId,White,RGBA(230,230,230,1))

Finally, I will let you to set the other properties of the gallery (Transition) and buttons (HoverFill, HoverColor) to provide a nice experience to the users, as shown below

Filter Panel

The filter panel uses very similar technique to the navigation panel in that it consumes a very short table set on App start, sets a variable to the selected filter option and consumes this variable to adjust the appearance of the button in it to indicate the currently selected filter.

One obvious difference is that it is .. an horizontal gallery rather than a vertical one !

Inside the gallery, is indeed also a single button with a slighly excessive radius rounding value to provide this strange shape which looks like a rectangle, with semi circles attached to its right and left hand sides

A close up of the Filter gallery

As a precision, the items property of the gallery is set to :

Table(
    {filterValue:"Draft",filterId:1},
    {filterValue:"Published",filterId:2},
    {filterValue:"Removed",filterId:3},
    {filterValue:"All",filterId:4}
)

Then, the button’s OnSelect proprty is set to Select(Parent) so that we can define the OnSelect property of the gallery to the following, which looks at which filter is applied, and generates the table used in the main gallery’s Item property.

Set(selectedFilterId,ThisItem.filterId);

Switch(
    selectedFilterId,
    1,ClearCollect(myFilteredPostItems,Filter(myFullPostItems,postPublishedStatus.Value = "draft" && isDeleted = 0)),
    2,ClearCollect(myFilteredPostItems,Filter(myFullPostItems,postPublishedStatus.Value = "published" && isDeleted = 0)),
    3,ClearCollect(myFilteredPostItems,Filter(myFullPostItems,isDeleted = 1)),
    4,ClearCollect(myFilteredPostItems,Filter(myFullPostItems,isDeleted = 0))
)

Grayscale Skeleton Animation

Skeleton screens are now a very common feature of many apps and websites and basically consist of a temporary screen shown usually during the app load, representing the different sections of the actual screen (for example : video thumbnail, text description) as gray rectangles, before the data is actually loaded in the place of these gray placeholders. From a cognitive perspective the brain is tricked into believing that content is already there as it sees some structure and by the time it understand the trickery, data is there, ready to rock & roll.

So, how to do this in PowerApps ? Well all we need is three rows of data, some rectangles, trigonometry and a timer !

The skeleton’s .. bones ?

The items property of the gallery can be set to an extremely minimal data table such as [1,2,3] – as all we really need here is .. 3 rows of data !

Then, you will need to define shapes which roughly match the layout of your actual gallery’s contents, so in our case : the picture on the left, a button to show the article published status on the far right hand side, then a few other boxes standing in for the article description, tite and date modified.

You can already use this as is – by setting the Fill property of these rectangles to shades of gray however what you really want is the fill to oscillate between shades of gray in a cyclical way – isn’t it ?

The way to achieve cyclicality is by using a timer that will fire automatically and restart on end – so this will give you an dimension to walk along, and against which to define a periodic function. Now, which functions nicely oscillate periodically ? Yes : trigonometric functions !!

So here is the way I have found to make this work : by setting the fill property of the rectangle as follows :

1000 shades of gray !

The important thing here is to give the RGBA function equal values for each color component in order for it to return a shade of gray. What we want here is for our fill to go like this :

  1. T1 : RGBA(245,245,245,1) – Lightest shade
  2. T2 : RGBA(244,244,244,1) – Darker
  3. T3: RGBA(243,243,243,1) – Even Darker
  4. ..
  5. RGBA(243,243,243,1) – Becoming ligher
  6. RGBA(244,244,244,1) – Becoming ligher still
  7. RGBA(245,245,245,1) – Lightest shade
  8. RGBA(244,244,244,1) – Aaaand darker we go again ..

In our case, the timer has got a value of 6000 (milliseconds), so by feeding the timer value divided by 1000, adding the max function around it and most of all by varying the threshold passed to max and the divider value across the different gray boxes of our skeleton gallery, we obtain a nicely oscillating effect, not perfect, but somehow entertaining enough to capture our user’s attention for the few seconds that the refresh lasts.. and of course to be perfected !

Progress Bar

Finally, I woud like to address a final use of galleries to improve user experience : the creation of a progress bar.

Let’s assume your app is performing an operation in 4 steps and you want to keep the user informed of which step is currently happening.

For this, we need to create a horizontal gallery off of a 4 row dataset which we will define as follows :

Defining the dataset for the progress bar gallery

As you may have guessed, the dataset essentially stores the name of the steps, and whether they have been completed or not. We can then add rectangles to the gallery (indicating the steps) set their fill to the following to show them as green when completed

If(
     ThisItem.Done,
     RGBA(0,255,0,1),
     RGBA(245,245,245,1)
 )

Then, all we need to do is to update the Completed status of each task once they have been completed, like so :

Which will give the following result :

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.