Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Progress Indicator Component

    Progress Indicator Component

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

    Super User mdevaney
    Super User
    15837 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    mdevaney
    Super User mdevaney
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Progress Indicator Component

    ‎06-01-2020 07:44 PM

    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

     

     

     

     

    ProgressIndicatorComponent_20201013.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 7
    15,837 Views
    40 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    mohankvs
    mohankvs
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-19-2020 03:11 AM

    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.

    Message 2 of 7
    13,551 Views
    0 Kudos
    Reply
    mdevaney
    Super User mdevaney
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-19-2020 10:48 AM

    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/

    Message 3 of 7
    13,541 Views
    0 Kudos
    Reply
    Digital
    Super User Digital
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-24-2020 03:42 PM

    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

    Message 4 of 7
    13,440 Views
    0 Kudos
    Reply
    bunny001
    bunny001
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-27-2020 12:11 PM

    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

    Message 5 of 7
    13,329 Views
    0 Kudos
    Reply
    Soumiya15
    Soumiya15 Helper III
    Helper III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-27-2022 10:22 AM

    @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

     

     

    23 KB
    Message 6 of 7
    4,219 Views
    1 Kudo
    Reply
    zuurg
    zuurg Resolver III
    Resolver III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎10-26-2022 02:08 PM

    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.

    Message 7 of 7
    1,866 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices