Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities - Lets Get Started!
May 14th | Power Platform Community AMA: Power Apps Edition
News and Announcements icon
Community site session details

Community site session details

Session Id : mcTafhZ/ayvUNGFyqY026y
Power Platform Community / Gallery / Power Apps - Canvas Apps Components Samples / Circle Progress Bar

Circle Progress Bar

15972 Views
R3dKap Profile Picture Posted 03 May 2022 by R3dKap 1,594

03-may-2022 update: fixed division-by-zero error message showing up from time to times (thanks @cparedes for reporting this)

 

Hi all,

Based on @davidni's blog article (available here) I created a configurable Circular Progress Bar component.

Here is how it looks:

Image 2.png

Parameters

Here are the properties you can set on the component:

INPUT

  • Max (number) = maximum value (default is 100)
  • Value (number) = actual progress value (default is 50)
  • ShowLabel (boolean) = shows/hides the label in the center (default is True)
  • LabelSize (number) = font size for the label in the center (default is 20)
  • LabelColor (color) = color for the label in the center (default is Black)
  • BarBgR, BarBgG, BarBgB (numbers) = red, green and blue components for the color of the background progress circle (default is the grey color on the capture above)
  • BarR, BarG, BarB (numbers) = red, green and blue components for the color of the actual progress circle (default is the cyan color on the capture above)
  • BarBgWidth (number) = width for the background progress circle
  • BarWidth (number) = width for the actual progress circle
  • LineCapRound (boolean) = if True draws the circle lines with a round line cap, otherwise line cap will be square (default is True)
  • ValueMode (text) = how to display the value within the circle: X/Y or as a percentage value (use the ValueModeEnum output property as an enumeration to set the value)
  • PercentageDecimals (number) = determines how many decimals are shown for the percentage value (only applicable if ValueMode is set to ValueModeEnum.Percentage)

OUTPUT

  • ValueModeEnum (record) = use this enumeration to set the value of the ValueMode property (MaxValue shows the value as X/Y; Percentage shows the value as a percentage value, using the PercentageDecimals property to set how many decimals should be displayed)

Feel free to use it... If you have any comments or suggestions, please do not hesitate...

You will find the component right here:

https://github.com/e-gallis/PowerApps

Emmanuel

CircleProgressBar...

Categories:

Comments

  • R3dKap Profile Picture R3dKap 1,594
    Posted 06 Apr 2022 at 08:47:25
    Circle Progress Bar

    Glad it works now... I'll update the component shortly... 😉

  • CP-23070223-0 Profile Picture CP-23070223-0 18
    Posted 05 Apr 2022 at 17:02:06
    Circle Progress Bar

    Hi @R3dKap 

     

    Thanks for your quickly response.
    Your code Works perfectly!!!

     

    I had already tried to add exactly that part of the code but I needed to validate "IsBlank" because it caused me the same error.

    With the validation "IsBlank" the problem has been solved. Only additional I add in the "If" an "else" to set the value of my variable.

     

    1)

    1.jpg

    2)

    2.jpg

     

    3.jpg

     

    Thanks RedKap!!

     

     

  • R3dKap Profile Picture R3dKap 1,594
    Posted 05 Apr 2022 at 10:58:30
    Circle Progress Bar

    Hi @cparedes,

    Mmmm...  I have recently seen this error in other cases as well... It looks like some control property values are populated AFTER the execution of the formulas...

    Since it's a bit hard to reproduce this error on my side, can you edit the component in your app and change these red portions of code:

    R3dKap_2-1649156077688.png

     

    to this:

    R3dKap_1-1649155967047.png

     

    And also change this:

    R3dKap_3-1649156184334.png

     

    to this:

    R3dKap_4-1649156269638.png

     

    If this fixes the issue I will update the component with the fix.

     

    Waiting for your feedback...

  • CP-23070223-0 Profile Picture CP-23070223-0 18
    Posted 04 Apr 2022 at 20:13:06
    Circle Progress Bar

    I think that the last update of power apps cause the component display and error when the component is load

     

    Invalid operation: division by zero.

  • schuess3 Profile Picture schuess3 353
    Posted 15 May 2020 at 15:41:12
    Circle Progress Bar

    @R3dKap 

    You Rock! Between this one and the fabric UI icons... Thank you!

     

    Btw... any thoughts of changing your fabric UI component into a fluent UI component?

  • R3dKap Profile Picture R3dKap 1,594
    Posted 11 May 2020 at 14:29:00
    Circle Progress Bar

    Hi all,

    Just updated the component to allow two types of display for the value in the center:

    • X/Y (as before)
    • percentage value

    So a new property called ValueMode will allow you to choose between those two modes. To set its value, use the enumeration property called ValueModeEnum like this:

    ValueMode = MyCircleProgressBar.ValueModeEnum.Progress
-or-
ValueMode = MyCircleProgressBar.ValueModeEnum.MaxValue

    If you choose the ValueModeEnum.Progress value for ValueMode, just know that the calculation of the current progress value will be automatic based on both the Max and the Value property values.

    Also, using the PercentageDecimals property, you will be able to decide how many decimals should be displayed in case the value is shown as a percentage.