Steppedcontainer click event

Hi all,

I'm looking for a way to have a click on a step in a stepped container, navigate the user to the step view for the clicked step.

There is a click event, but it seems there is no index past to it. Is this possible?

3 Likes

@Maartenvdv Do you see this switch for the step component?
Screen Shot 2022-09-28 at 7.09.17 AM

@ScottR yes, this is already created. The steps are connected to the container. That is not the issue. There are previous and next buttons that work well.

What I'm looking to achieve is that when someone clicks on a specific step in the Steps component, that the container switches to that step. Currently I can only navigate the steps using the previous and next buttons. The individual step icons + value don't seem to have click events that I can catch?

@Maartenvdv Yep I can see that - it's actually the reverse - when clicking on a view in the tabbedContainer (if they are connected) the step moves to the same view... I think what you might have to do is use links or text components instead of the step component as there isn't any click function in it...as far as I can tell...

Hey @Maartenvdv!

Yeah the stepped container's navigation won't jump to the specific step upon clicking currently, I've added this to the feature request. In the meantime, we can manually handle the navigation with buttons running setCurrentViewIndex for the container.

-Justin

Up on this topic ; clickable steps would be super useful for pretty much every usage of this component (at least, it's a feature request from our users on every page that uses it).

Thank's,
Laurin

Would be amazing to have any updates on this topic !

Thank you very much :wink:

Hey folks - Just checked in, we don't have a set timeline on this with our app-building team heavily focusing on the new implementation of the table at the moment. We can always reevaluate as that calms down in the future :grinning:

Has anyone figured out or created a workaround for this? The UI of the steps looks quite nice but as others have stated, reliance on the Previous/Next buttons makes it highly unusable in terms of UX.

I'd also love to hear if there are any updates on this.

Unfortunately this still isn't a feature we're prioritizing with other projects in the works, but will check back in with the team and loop back if that status changes!

Hi Justin! Can you please give an example implementation for your workaround? I haven't figured out where I can set setCurrentViewIndex?

Hey @FinaSS - That's a method available on the tabbed container component, where you can pass in the index of the tab you want to jump to. Can also use setCurrentView() if you'd rather go by the view name.

This can also be set with any event handler in an app

1 Like

Thanks so much for your help! It seems like that would work if I wanted separate buttons for jumping from one view to the other, that's helpful! Is there any way to set that as a type of onClick event for the steps??

No problem, and not yet! That's what the feature request referenced in this thread covers, the team just hasn't been able to prioritize this over other projects in the works.