Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • 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
    • 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
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • 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 using a "Business Process Flow"...

    Progress indicator using a "Business Process Flow" style

    02-17-2021 08:29 AM - last edited 02-17-2021 09:37 AM

    Rick72
    Impactful Individual
    2158 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    Rick72
    Rick72 Impactful Individual
    Impactful Individual
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Progress indicator using a "Business Process Flow" style

    ‎02-17-2021 08:29 AM

     

    Progress Indicator - Business Process Flow.png

     

     

    Give a Thumbs up if you like this component. This makes it easier for others to find in the gallery.

     

    My Twitter handle is: formsandflows. Send me a DM if you find any bugs and I will try to fix them as quickly as possible.

     

    *** How to use it ***
    This component has 6 input properties. They are described below.

     

    ColorActive
    The color used for the current or a previous stage.

    Type: Color

     

    ColorInactive
    The color used for a next stage.

    Type: Color

     

    CurrentStage
    The number of the current stage. Numbering starts at 1.

    Type: Number

     

    Items
    The items. The number of items can be dynamic. You do need to take care yourself that the this component is wide enough to show all text.

    Type: Table

     

    Example used in screen above:

     

     

     

     

    Table({ID:1,Title:"Reviewed"},{ID:2,Title:"Quarter 1"},{ID:3,Title:"Quarter 2"},{ID:4,Title:"Quarter 3"},{ID:5,Title:"Quarter 4"},{ID:6,Title:"Completed"})

     

     

     

     

     

    TextColor
    The color of the text.

    Type: Color

     

    TextFont
    The font of the text.

    Type: Text

     

    *** How it works ***

    • The stages are shown using a gallery.
    • The gallery has a padding of 0.
    • The width of a gallery item is calculated by dividing the width of the gallery by the number of items.
    • 3 circle shapes are used to show the "icons".
    • 2 rectangle shapes are used to connect the "icons".
    • The circles need to be higher in the hierarchy than the rectangles.

     

    A big thanks to @mdevaney for his component "Progress Indicator Component" which was used as an inspiration for this component.

    Progress Indicator - Business Process Flow_2021-02-17.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 1
    2,158 Views
    6 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic

    Power Platform

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

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

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

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks