How to implement the 'Previous' and 'Next' in a series of steps?

Hello Bubblers!
I am trying to implement a series of steps (treat each step as one Group that contains some text, an image or two and a popup and so on!).
Each time a user clicks on Next (or, right arrow), the next step (Group) will show. Similarly, when the user clicks on the Previous (or, left arrow), the previous step (Group) will show.

Here are a couple of screenshots for reference:

I tried implementing this functionality using custom states. But, I am unable to get the functionality of the Previous/Next buttons working!
I am familiar with Hopscotch Step-by-Step one. But, that is not the one I am looking for.
Please help!!

Custom states are the way to go. I’d use a number, then set conditions on each of your elements/groups.

for the group
If custom_state == 1 show this group otherwise it’s not visible
for the progress bar
If custom_state >= 2 show this image fully otherwise default to grey
arrow buttons add or subtract the number from the custom state.

I’ve done this on lots of tour type things. Works fine.

Thank you so much @grottofilms . I will give it a try.

@grottofilms Can you explain this a little further?
I tried doing it using custom states (number instead of text). But, couldn’t succeed!

Here’s a sample app for you to see how it would work.

Demo:


Editor:

The custom state is set on the Page, called step.
The arrow workflows add or subtract from that custom state. They become unclickable once the state reaches a certain number, preventing it from going too far.
The groups are only visible when the state is a certain number.
The circles change color when the state is over a certain number.

1 Like

Thank you once again @grottofilms. Really appreciate :slight_smile:

@grottofilms Thanks a ton! You rock!!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.