Skip to main content

PowerApps Pro Tips | Animated Progress Bar

By November 2, 2017May 21st, 2018PowerApps, Pro Tips

Do you have a screen where several processes have to occur? Perhaps some are hidden from the user, and you want to allow the user to see the progress of those processes? Let them know that something is actually happening, and how much longer they have to wait?

Placing a progress bar on the initial launch screen is a simple feature that minimizes user frustration. The first step is to identify the processes you have in place and implement a way to identify when each one is completed. My example is based on an initial loading screen where I place data from 6 tables into 6 collections. I identify when each collection is loaded by using the “Row Count” function:

If(RowCount(Collection1) > 0, 1, 0)

I sum each of these results, and divide the total by the number of collections I am capturing. I place this formula as the “Text” component of a label to show percentage of completion.

(If(RowCount(Collection1) > 0, 1, 0) + If(RowCount(Collection2) > 0, 1, 0) + If(RowCount(Collection3) > 0, 1, 0) + If(RowCount(Collection4) > 0, 1, 0) + If(RowCount(Collection5) > 0, 1, 0) + If(RowCount(Collection6) > 0, 1, 0) ) / 6

This provides a numeric indicator of completion, but I want to show a progress bar. For my example, I made the progress bar consist of 4 equally sized square icons lined up next to each other. I set the “Fill” property of each square based on the results.

Square 1:

If(If(RowCount(Collection1) > 0, 1, 0) + If(RowCount(Collection2) > 0, 1, 0) + If(RowCount(Collection3) > 0, 1, 0) + If(RowCount(Collection4) > 0, 1, 0) + If(RowCount(Collection5) > 0, 1, 0) + If(RowCount(Collection6) > 0, 1, 0) ) > 1, Green, Gray)

Square 2:

If(If(RowCount(Collection1) > 0, 1, 0) + If(RowCount(Collection2) > 0, 1, 0) + If(RowCount(Collection3) > 0, 1, 0) + If(RowCount(Collection4) > 0, 1, 0) + If(RowCount(Collection5) > 0, 1, 0) + If(RowCount(Collection6) > 0, 1, 0) ) > 2, Green, Gray)

And so on…

As each collection loads, the total increases, regardless of the order in which they load. As the total increases, the boxes change from gray to green from left to right, with the last one turning green at 100%.

[image_with_animation image_url=”318″ alignment=”center” animation=”Fade In” box_shadow=”none” max_width=”100%”]