Wizard Navigation | Repeater Based

advanced-prototyping

#1

Hey all,
I’m currently working building out a repeater-based wizard navigation for larger screen sizes. I’ve hit a roadblock with the functionality and after a couple hours of trial and error I thought it best to reach out the the community.

The desired behaviour I’m looking for is to have only one step active at a time. I’ve managed to get this working when directly selecting a step name (numbered 1-5 in the prototype). When using the advance, step back arrows, however, I cannot seem to get the correct step to be selected. I’m not sure this is even possible. Please see the attached file which will hopefully make more sense.

To ensure the variables are working properly I’ve added a visual readout.

Thanks in advance for any assistance/insight!

BrenwizardNav_r1.rp (63.9 KB)


#2

I think this solves your problems. If I missed a part let me know and I can take a look.

I had the buttons increment and decrement a variable and then move the wizard step in the repeater. and when it is moved the step will set selected the step that matches the variable. Hopefully looking at it will make it more clear.

I luckily just figured this solution out the other day for something I was working on.

wizardNav_r1.rp (70.2 KB)


#3

First and foremost apologies for delay in response.

Thanks! This works well when the step names are numbered and using the next/previous push buttons.

We typically use non-numerical high-level names for wizard steps such as Contact Information, Address Information, Billing Information, etc. Adding the names in is easy as I can just hide the widget that has the number pumped into it by the repeater table and add a text widget that speaks to another column in the repeater, where it obviously breaks (the design functionality and my brain) is when the next/previous buttons are used I cannot push the current selected step title to a text widget outside of the repeater (see screenshots)

image


#4

How about this one. Is this what you wanted?
Just reference the title column onClick or onMove of the repeater item.


wizardNav_r1.rp (71.4 KB)