Skip to main content

Notifications

Progress Indicator Component

mdevaney Profile Picture Posted 17 Dec 2021 by mdevaney 30,012

powerapps-progress-indicator.PNG

This component is used to show what progress has been made in a process.  The most common use-case is for approvals.  However, the icons & images in this component are completely customizable so it can be adapted to any business process.

 

 

Give a Thumbs Up if you like the component to make it easier for others to find in the gallery

Follow me on Twitter for PowerApps tips and blog articles https://twitter.com/mattbdevaney 

Send me a message if you find any bugs and I will try to fix them as quickly as possible

 

How To Use

 

Example #1

 

powerapps-progress-indicator-1.PNG

Items Property

 

 

Table(
 {Title: "Erik Erickson", Subtitle: "Initial Requester", Icon: Icon.Person, Image: Blank(), Status: "Success"},
 {Title: "Sally Summers", Subtitle: "Supervisor", Icon: Icon.Person, Image: Blank(), Status: "Success"},
 {Title: "Matthew Devaney", Subtitle: "Manager", Icon: Icon.Person, Image: Blank(), IsCurrent: true},
 {Title: "Executive Team", Subtitle: "", Icon: Icon.People, Image: Blank()}
)

 

 

IsSquareShape Property

 

 

false

 

 

 

Example #2

powerapps-progress-indicator-2.PNG

Items Property

 

 

Table(
 {Title: "Erik Erickson", Subtitle: "Initial Requester", Icon: Icon.Person, Image: Blank(), Status: "Success"},
 {Title: "Sally Summers", Subtitle: "Supervisor", Icon: Icon.Person, Image: Blank(), Status: "Success"},
 {Title: "Matthew Devaney", Subtitle: "Manager", Image: 'business-cat', Status: "Fail"},
 {Title: "Executive Team", Subtitle: "", Icon: Icon.People, Image: Blank()}
)

 

 

IsSquareShape Property

 

 

true

 

 

 

Example #3

 

powerapps-progress-indicator-3.PNG

 

Items Property

 

 

Table(
 {Title: "Create Document", Subtitle: "", Icon: Icon.Document, Image: Blank(), Status: "Success"},
 {Title: "Send Message", Subtitle: "", Icon: Icon.Mail, Image: Blank(), Status: "Success"},
 {Title: "Manager Review", Subtitle: "", Icon: Icon.Person, Image: Blank(), Status: "Success"},
 {Title: "File Document", Subtitle: "", Icon: Icon.Folder, Image: Blank(), IsCurrent: true}
)

 

 

IsSquareShape Property

 

 

false

 

 

IsStatusVisible Property

 

 

false

 

 

IconColor Property

 

 

White

 

 

ShapeFill Property

 

 

MediumPurple

 

 

ShapeBorderColorCurrent Property

 

 

BlueViolet

 

 

 

 

Categories:

Comments

  • R3dKap Profile Picture R3dKap 1,594
    Posted 13 Feb 2024 at 10:17:41
    Progress Indicator Component

    Hi @mdevaney,

    Nice component which I just imported into my project.

    Here are a few improvement suggestions for the horizontal version (haven't checked if it would be interesting to adapt these to the vertical version of the component) :

    // Better size and positioning of the status icon
    ico_StatusIcon_H.Width = If(cmp_ProgressIndicator_H.IsSquareShape; ico_StatusSquare_H.Width; ico_StatusCircle_H.Width)
    ico_StatusIcon_H.Height = If(cmp_ProgressIndicator_H.IsSquareShape; ico_StatusSquare_H.Height; ico_StatusCircle_H.Height)
    ico_StatusIcon_H.PaddingTop,Right,Bottom,Left = 5
    ico_StatusSquare_H.X = ico_Square_H.X + ico_Square_H.Width - Self.Width / 2
    ico_StatusSquare_H.Y = ico_Square_H.Y + ico_Square_H.Height - Self.Height / 2
    ico_StatusCircle_H.X = ico_Circle_H.X + ico_Circle_H.Width - Self.Width / 2
    ico_StatusCircle_H.Y = ico_Circle_H.Y + ico_Circle_H.Height - Self.Height / 2
    // Adapt template size to component size and items count
    gal_ProgessIndicator_H.TemplateSize = Self.Width / Self.AllItemsCount
    // Fix the visibility of the bar if Title is empty
    ico_LineBottom_H.Visible = !(ThisItem.Title=Last(cmp_ProgressIndicator_H.Items).Title) || !(ThisItem.Subtitle=Last(cmp_ProgressIndicator_H.Items).Subtitle)
    ico_LineTop_H.Visible = !(ThisItem.Title=First(cmp_ProgressIndicator_H.Items).Title) || !(ThisItem.Subtitle=First(cmp_ProgressIndicator_H.Items).Subtitle)

    Tell us if and when you've implemented them... 😉

    See you around!

  • zuurg Profile Picture zuurg 520
    Posted 26 Oct 2022 at 21:08:22
    Progress Indicator Component

    Hi @mdevaney ,

     

    I'm trying to add your component file to my app (both with the sample IT Request app where you show it in use and in a brand new canvas app).  Every time I try to import the component, I get this error message with no additional explanation:

     

    zuurg_0-1666818463526.png

     

    Any idea what the issue might be?

     

    Edit: false alarm, just redownloaded it and re-added and it worked this time.

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 27 Jun 2022 at 17:22:20
    Progress Indicator Component

    @mdevaney 

    Really it's good and very helpful. 

    I am trying out the same but I am not able to pass the dynamic value in the table. 

    I had attached the screenshot below, Could you guide me where I missed out

     

     

  • bunny001 Profile Picture bunny001
    Posted 27 Nov 2020 at 20:11:06
    Progress Indicator Component

    Hi Matt, great component. Quick question, i wanted to add an additional status to the 2 in the component i.e. Success, Fail, InProgress as the new one. I changed the switch function in the colour control of the status field to include an additional switch option, however it doesnt seem to propogate to the component within the app.

     

    I've add the component onto the canvas again and even exported the component and reimported but no luck! 'm new to components so not sure if i am missing something? Would appreciate your thoughts.

     

    Thanks in advance.

     

    Jonathan

  • Digital Profile Picture Digital 1,199
    Posted 24 Nov 2020 at 23:42:19
    Progress Indicator Component

    Nice component but I'm having difficulty with the layout of the horizontal variant, specifically the label in the first step. It looks like the sub-heading is obscuring my title. Not sure if anyone else is getting this problem. I've had a play with the label positioning formula and turned off wrap and auto height but still get the same issue. It is only ever on the first item and doesn't happen with the vertical version.

     

    Screen Shot 2020-11-25 at 12.39.38.png

  • mdevaney Profile Picture mdevaney 30,012
    Posted 19 Nov 2020 at 18:48:17
    Progress Indicator Component

    I've written a tutorial on how to do an approvals process using this component + SharePoint.  The final section of this tutorial shows how status can be changed based on SharePoint list values.  Values from SP are displayed on a form then the component uses those to detect the state (success/fail/not completed).  Let me know if you have any questions.

    Link to article
    https://matthewdevaney.com/make-a-power-apps-approvals-form/

  • mohankvs Profile Picture mohankvs 6
    Posted 19 Nov 2020 at 11:11:06
    Progress Indicator Component

    Hi @mdevaney , Can you let me know how do we update the status of a particular step as success based on particular value in SharePoint list? Thanks.