Metro Vertical Progress Bar

Glad I could help... 😊

Ah ok, perfect that explains it thanks 😀👍

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?

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

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...

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?