Dynamic loading bar in Powerapps

[Push]

I have a powerapp where I am trying to have a dynamic loading bar in my code.

What i hope to achieve is to have this element dynamically show how much data is loaded into my gallery.

For this purpose i have made a component that i have called Comp_ProgBar
this component has 2 values that i am setting dynamically. one is a Name, this is a text property where I can set the name of the bar.

The other is called ProgressValue. This is a number.
The component has a HTML_Text inside it with some code. code is here:

"<font size=""4""><b>"&Comp_ProgBar.ProgressBarName&"</font></b><progress value="&Comp_ProgBar.ProgressValue&" max=""100"" style=""width:100%;height:60px""></progress>"

Now on my StartScreen I have a gallery that has a very complex filter on it. What I want to do is show my users how many elements have been loaded into the gallery while the code is executing.

Gallery only gets populated after some code that runs on my Screen OnVisible is done running.

I have a spinner running while the code is executing. What i would also like to have in the app is this progress bar to be filled out.

Is there a way for me to do this?

[SunilPashikanti]

Hi @Push,

I can't give exactly what solution you are expecting for your custom progress bar, but I can provide a general custom progress bar that can be useful. Please find details below:

A custom progress bar is a visual component that you can create in Power Apps to show the progress of a task or process. You can customize the appearance and behavior of the progress bar to suit your needs. For example, you can change the color, shape, thickness, and animation of the progress bar.

To create a custom progress bar in Power Apps, you can use the following steps:

• Add a rectangle control to your app and set its Fill property to the color that you want for the progress bar.
• Add a label control to your app and set its Text property to the percentage that you want to show for the progress bar.
• Add a timer control to your app and set its Duration property to the time that you want for the progress bar.
• Set the Width property of the rectangle control to Timer.Value / Timer.Duration * Rectangle.Width to make the rectangle grow or shrink according to the timer value.
• Set the X property of the label control toRectangle.X + Rectangle.Width / 2 - Label.Width / 2to make the label stay in the center of the rectangle.
• Set the OnTimerEnd property of the timer control to the action that you want to perform when the progress bar is complete.

You can find more details and examples of how to create a custom progress bar in these web sources.

Progress bar modern control in Power Apps

Power Apps Progress Bar – Modern Controls

Progress bar modern control in Power Apps (DYNAMIC Loading)

Power Apps Modern Progress Bar [Detailed Guide]

Best Regards,

@SunilPashikanti 

[Push]

Thank you so much on these guides on how to build a progressbar.

I however have already made the progressbar. It is also showing together with my custom loading spinner.

I guess what I was asking about was was how I can fill out the properties of my bar now?

I need the bar to calculate the total number of items in my SharePoint list, filter this to the current users permissions and then keep dynamically updating values while the app is loading data into my gallery.

so far I haven't found any solution or suggestion that can help with this.

I have found solutions that change the progressbar "Width" property based on how many fields are filled out in a form. I have also found solutions where the bar changes based on mouse clicks...
This is not what i need though.

Dont know if it would help if i added my code in here or if that is just a waste of time.

[SunilPashikanti]

Hi @Push,

Please find the below article that describes how to increase the progress bar value in action. This might give you some background on how to set the maximum records and value properties of Progress Bar control.

https://sunilpashikanti.blogspot.com/2023/12/power-apps-progress-bar-example-using.html

https://youtube.com/shorts/lVTTAxIrpyM?feature=share

Regards,

@SunilPashikanti 

[Push]

That looks good that but i still don't get how i can use this in my solution.

i have a spinner on my screen that starts running as soon as i land on a Screen.

Then I have a lot of code run on that screen. the code is basically a very complæex filter of a SharePoint list I have where I also build some Hierarchy on top of my SP list so I have Projects, tasks and subtasks showing in a gallery.
after all this is done my spinner disappears and my gallery is visible with all the filtering options I have set.

So what i would need is for the progressbar to somehow count how many items it has loaded into the memory or some such. and then update it all on the fly while my code that is running on the screen is executing.

I cant just arbitrary set a random amount of time. code sometimes runs faster, sometimes slower. It all depends on the filtering options for a specific user. I have measured that the code runs anywhere between 15 to 35 seconds before the gallery becomes visible.