How to show Progress bar control in Power Apps canvas apps

Hello everyone and welcome to my blog. In today’s blog I will show you how to build a progress indicator in Canvas apps using Power Platform Creator kit.

In this blog I am going to use the Power Platform Creator kit progress indicator control. If you are not aware of Power Platform Creator Kit and how to use them in your canvas app, I recommend to follow my blog where I discussed this in detail regarding the installation procedure and how to add it to your app.

Ok, so let’s get started. Once you have installed the Power Platform Creator kit, the next step is to add the Fluent Progress Indicator code component to your app.

If you just want to show a loading spinner and not a progress control, you can follow my blog here.

Once done, the next step is to add the control to a screen where you need to show the Progress indicator.

Below illustration show the control properties.

Most of the properties are self-explanatory. Two important properties to note here are ‘Percent Complete‘ & ‘Type of Indicator‘.

Using ‘Percent Complete’ property you can control the progress. You need to ensure that Type of Indicator is set to Default if you want to show gradual progress of your operations.

To test this, in the Click of a button, I used the below formula.

UpdateContext({var_isProgressVisible: true, var_completionPerc:0, var_msg:"Starting fetch"});
Office365Users.SearchUser({top:1000});
UpdateContext({var_completionPerc: 40, var_msg: "First fetch completed"});
Office365Users.SearchUser({top:1000});
UpdateContext({var_completionPerc: 70, var_msg: "Second fetch completed"});
Office365Users.SearchUser({top:1000});
UpdateContext({var_isProgressVisible: false});

I am performing the same fetch from Office365Users connector again and again. You can replace this with your desired operations. But the important point to note here is the usage of the variables to show/ hide progress bar, indicate the completion percentage and set appropriate message before each fetch.

I set the properties of the progress bar accordingly to reflect the variable values.

Now it’s time to test. Below is the video illustration of the progress bar control in action.

I hope this helped. If you have liked the post and if this post has helped you, please subscribe to my blog.

Debajit Dutta