Progress Indicator Component 06-01-2020 19:44 PM - last edited 12-16-2021 18:40 PM

[mdevaney]

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

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

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

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

[mohankvs]

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.

[mdevaney]

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/

[Digital]

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.

[bunny001]

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