cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Frequent Visitor

Need help with COMPONENT - Metro-like vertical progress bar

I know there is a simple answer to this but I need some direction.  I am new to components and trying to understand some of the concepts used in the component created by @R3dKap built.

 

I am unsure of what to use for the toggle properties: Default and OnChange, within the PowerApp where I am using the component.  At this time I am using the exact perimeters setup with the initial component, and have not made any changes.  When I try to play the app with the component I am unable to click through the steps even with AllowStepSelection set to True.

 

Any help would be greatly appreciated! Thank you!

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Resident Rockstar
Resident Rockstar

Re: Need help with COMPONENT - Metro-like vertical progress bar

Hi @rs_it,

In fact, if you activate the AllowStepSelection property, when you click on a step it just sets the output property SelectedStep to the step id you just clicked. If you want to see this in action, just place a label right next to the component on your screen and set its Text property to this:

 

<yourMetroComponent>.SelectedStep

 

Now, the only property that can change visually the current step in the progress bar is the ActiveStep property. So, if you want the active step to be the one that is clicked by the user, just set your component's ActiveStep property to this:

 

<yourMetroComponent>.SelectedStep

 

NOTE - Don't forget that it's a progress bar, meaning: if Step2 is active and you click on Step4 (jumping over Step3), well Step3 will be considered as "done" and will show with the StateDone color. Now that I think about it, the component should probably allow you to select only the very next step to the current step (or one of the previous steps that have already been done).

I'll let you try this and wait for your feedback...

Finally, if you want to do some stuff when a user clicks and selects a step (assuming you enabled the AllowStepSelection property), you need to place a hidden toggle control on your screen and set its Default property to:

 

<yourMetroComponent>.OnSelect

 

Then inside the toggle's OnCheck property, proceed like this:

 

Switch(
    <yourMetroComponent>.SelectedStep,
    1,
    <your code if step 1 is clicked>,
    2,
    <your code if step 2 is selected>,
    ...
)

 

This technique is how we propagate events coming from inside a component (since events cannot be defined as properties for now).

Waiting to hear from you...

R3dKap

View solution in original post

3 REPLIES 3
Highlighted
Resident Rockstar
Resident Rockstar

Re: Need help with COMPONENT - Metro-like vertical progress bar

Hi @rs_it,

In fact, if you activate the AllowStepSelection property, when you click on a step it just sets the output property SelectedStep to the step id you just clicked. If you want to see this in action, just place a label right next to the component on your screen and set its Text property to this:

 

<yourMetroComponent>.SelectedStep

 

Now, the only property that can change visually the current step in the progress bar is the ActiveStep property. So, if you want the active step to be the one that is clicked by the user, just set your component's ActiveStep property to this:

 

<yourMetroComponent>.SelectedStep

 

NOTE - Don't forget that it's a progress bar, meaning: if Step2 is active and you click on Step4 (jumping over Step3), well Step3 will be considered as "done" and will show with the StateDone color. Now that I think about it, the component should probably allow you to select only the very next step to the current step (or one of the previous steps that have already been done).

I'll let you try this and wait for your feedback...

Finally, if you want to do some stuff when a user clicks and selects a step (assuming you enabled the AllowStepSelection property), you need to place a hidden toggle control on your screen and set its Default property to:

 

<yourMetroComponent>.OnSelect

 

Then inside the toggle's OnCheck property, proceed like this:

 

Switch(
    <yourMetroComponent>.SelectedStep,
    1,
    <your code if step 1 is clicked>,
    2,
    <your code if step 2 is selected>,
    ...
)

 

This technique is how we propagate events coming from inside a component (since events cannot be defined as properties for now).

Waiting to hear from you...

R3dKap

View solution in original post

Highlighted
Frequent Visitor

Re: Need help with COMPONENT - Metro-like vertical progress bar

Thank you for your help @R3dKap! The information you provided was super helpful and helped understand the concept better.  I was able to get the component working in my environment.  

 

One thing that I was thinking about in addition to this, would you be able to utilize this component in a PowerApp where a "Next" and "Back" button were able to advance the component through the steps, or back to a previous step?  In theory provided 2 options for how to advance to the next step, or to go back to the previous step.

 

Thank you for all your help!

 

Highlighted
Resident Rockstar
Resident Rockstar

Re: Need help with COMPONENT - Metro-like vertical progress bar

Glad I could help...

Yes, of course you can do this. Just increase of decrease a variable with the step number and put that variable in the ActiveStep property of the component, and there you go...

Helpful resources

Announcements
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (9,168)