Metro Vertical Progress Bar 06-09-2020 13:21 PM

[R3dKap]

With this component, create a metro stations-like progress bar to use in your applications.

The component is fully customizable:

• list of items
• colors (background bar, step circles and labels at their various states (ToDo, Active, Done), ...)
• bar width
• bar inner margin
• bar auto height
• step circles padding
• step circles border (thickness and color)
• font size
• labels left padding
• active step
• allow step selection

As an output you will get:

• an OnSelect boolean to help you "trigger" an event when a step circle is clicked
• the selected step
• an automatically calculated height for your component if you want it to fit your progress bar height

All detail are available right here: https://github.com/e-gallis/PowerApps/blob/master/Components/MetroVerticalProgressBar/readme.md

Enjoy !

[vffdd]

thanks for this.  Do you by any chance have a video on how to use this?   I've looked at your link on the details behind it but I can't figure out how to actually use it based on what my users are doing in the app?

[R3dKap]

Hi @vffdd,

Just add the component to your screen (let's say you name it myMetroBar) and then:

• use the Items property to set the different steps for the progress bar; the structure is like this:
  
• use the ActiveStep property to set the current step in the progress bar (the value should be one of the Id value from the Items property)
• if you want to allow the user to click on the steps and select them, set the component's AllowStepSelection to true

If you set AllowStepSelection to true:

• add a hidden toggle on your screen and:
  • set its Default value to myMetroBar.OnSelect
  • in the OnCheck property of the toggle add the code that's supposed to execute when the user clicks on a step

Hope this helps...

[vffdd]

Thanks for that @R3dKap  but the bit I'm struggling with it, is marking the step as complete once the action is done? How  do I do that?  Say for example step 1 is to update a field on a form, do I put an action on the submit or on success of the form to tell the component this is now done?  In terms of allowing them to select steps I'm going to leave that as false as I just want it to be a progress visibility at the moment.

Many thanks

[R3dKap]

In fact, you don't mark a step as completed. You just tell the component which is the ActiveStep and steps prior to that one will be automatically considered as completed. This is because it is a PROGRESS bar so the component assumes that you go through the steps in order, not randomly.

So, for instance, if you have 6 steps and set ActiveStep to 3, then steps 1, 2 AND 3 will appear as completed.

See what I mean?

So if you want your progress bar to show that step 1 is done because you updated a field on a form, just set a variable gloCurrentStep to 2 and set your progress bar's ActiveStep to gloCurrentStep.

Setting gloCurrentStep to 2 should be done whenever you consider step 1 is over. Like you said, that could be:

• once the field has changed (on the OnChange event of the field control: text edit, combo box, toggle, ...)
• once the form has been submitted (then, in the OnSuccess event of your form)
• ...

Does that help you in any way?

[vffdd]

Ah ok, perfect that explains it thanks 😀👍

[R3dKap]

Glad I could help... 😊