Answered

add a progress bar

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hello All,

I would like to add a progress bar to an app with a list from SharePoint. When an item is 'closed' the bar will progress further and the total number of items is 100%. I got the idea from the 'onboarding tasks' template, but I've not been able to reverse engineer how it's done.

Does anyone have an idea of how I can do this?

Paul

Categories:

Building Power Apps

All responses (5)

Answers (1)

Sort by

Liam_Chapman 187 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Anonymous ,

I'm not too sure about the specific template you mention, but I would suggest that you would just set the width of a rectangle/filled label, based on the percentage in SharePoint.

If multiple SharePoint Items make up the progress and you want to show a percentage of complete vs non complete, the width could be based on the CountRows of each.

Hope that at least points you in the right direction.

Thanks,
Liam.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hello Liam,

Thanks for your reply.

The second point you made sounds like it is towards a solution and I'll have a look at countrows function. How could I distinguish between complete, non-complete, and total number of rows? I have a column to show if an item is 'closed' (true/false), can I use this in some way?

I've then got to work out how I can set up the width of a rectangle to adjust based on this percentage.
Verified answer

Liam_Chapman 187 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Anonymous ,

'OnVisible' of the screen where you want to display the progress bar, create two variables, one for the number of completed items and one for the total number of items:

UpdateContext({CompletedCount:CountRows(Filter(Your_Data_Source, Name_of_Your_Closed_Column = true))});
UpdateContext({TotalCount:CountRows(Your_Data_Source)});

Then in the 'Width' property of the bar:
(CompletedCount/TotalCount)*100

The amount you multiply with may need tweaking for your needs.

Hope this helps.
Liam.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks for your further help on this. I get the concept of your solution, I think it's my application which is the problem!

I've tried changing the properties of 'onvisible' as suggested and get a delegation warning.

My data source is 'support issues' and the column to show completed is 'closed'. The rectange doesn't have any width also.

Delegation error (my datasource doesn't have too many rows). Does this mean I can't use lists as a connector?:

Any ideas what to try next?

Thanks again for all your help.
Liam_Chapman 187 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Anonymous ,

The delegation is warning, meaning over 500 rows in the list and it won't pull everything back.

You could try this instead:
UpdateContext({AllRows:'Support issues'});
UpdateContext({CompletedCount:CountRows(Filter(AllRows, Closed= true))});
UpdateContext({TotalCount:CountRows(AllRows)});

Then for the progress bar, add rectangle with a fixed width (the outline of your bar) and add another one to act as the percentage fill. Set the second bars width to:
(CompletedCount/TotalCount)* NameOfYourOutlineRectangle.Width

Should give you something like:

Note that the variables are defined OnVisible, so you need to flick between screens for them to get set.

Thanks,
Liam.