Navigation issue on single page app

Need help Database
1

I have a single page app and I am setting a state on each group called selectedGroup.

I have a floating group navigation with a text link called ‘Next’ which is displayed on all pages. I want to use custom states so that the ‘Next’ link goes to the correct group.

Here’s the issue;

When you are on group1 and click ‘Next’, it will take you to group2, but then immediately go to group3 and then group4 (without stopping).

I’ve tried making use of a previousGroup state but it makes no difference. I wonder if anyone can suggest a way to ensure the workflow stops on the next group before continuing on to the next?

Here’s a very simplified mock-up of the navigation;

2

Hi there, @darren.james7518… the reason it’s not stopping is because you are setting the state to three different values within the same workflow. So, try this… make two copies of the When Text Next> is clicked workflow event. Then, add Only when conditions on each event. On the first one, add the condition only when index's selectedGroup's value is group1, and have one workflow action within the event that sets the custom state to group2. Do a similar thing on the other two events to set the state to group3 or group4 based upon the state currently being group2 or group3, respectively.

If your editor was open, I could have set it up for you in the time it took me to write this response. So, if what I have written isn’t clear, open your editor and I will configure what I have described.

Best…
Mike

3

Hi Mike,

Thank you for your detailed reply … I tried to do it but didn’t quite get it working. If you have time I have made the editor open.

Note: I have put it all back to how it was but instead of showing a group with custom state ‘selectedGroup’, I’ve added URL parameters to show a group when ‘tab’ is ‘group’s name’.

4

A simple working version.

1 Like
6

@koechamos51 It works perfectly but could you make the editor viewable because I can’t see how you achieved it?

7

They set it up on a separate page in your app, and it simply increments a custom state’s number by 1 with each click… definitely does the trick.

8

Thanks for pointing that out.

This does work and is very clean in the workflow but it means I can’t name the pages which I kind of wanted to do whilst making use of the URL parameters. I should have said that where I names a group ‘group2’ for example, that may be named ‘my-customers’ or something. I only used the ‘group1, 2, 3’ for simplicity for this post.

9

I can reproduce it using the selectedGroup custom state but not if I want to use the Get from URL state.

This works:

1

This doesn’t work:

2
2638×508 16.6 KB

10

You made use of the ‘selectedGroup +1’ function but do you know if it’s possible to do this using page URL parameters? Each of my groups are shown using page URL parameters so I wanted to avoid using the selectedGroup custom state.

I have an idea, the URL could be a page name but I could have an additional custom state of ‘group number’ and maybe let the navigation reference that.
No this doesn’t work.

11

Here is an example using a URL parameter.

12

That’s brilliant, thank you! I think I have plenty to work with now :slight_smile:

Thanks @koechamos51 and @mikeloc for helping out!

2 Likes