Wizard run script on "next"

Queries and Resources
1

Hi all. I want to run specific scripts every time a user press the wizard button to go to my wizard's next step. I tried using the "on step change" query feature, but the problem with this is that it is not linked to a specific step, but to all of them. I tried using one script only and checking for the current step, but here the problem was that I always get the step to which it changed to, not the previous one where the button was clicked. Any workaround for this?

Thank you.

2

Hi @igoraguiar!

Is the issue that if you have a query trigger when the user clicks from Step1->Step2, it will also trigger when the user goes from Step3->back to Step2?

3

This is one example, yes

4

Hey @igoraguiar — would using the stepHistory work for your use case here? It looks like this is populated by a list of navigation steps so to get the previous step you could use something like this:

{{wizard.stepHistory._tail.array[wizard.stepHistory._tail.array.length - 1]}}

This will return the previous step id. Hope this helps, let me know if you have any questions! :)

5

Hi Chris, thank for your answer. Before posting the question I've considered your suggestion but in a quick observation of the stepHistory object it seemed to be behaving erratically. But I haven't actually tested it. I will test with your suggestion. Also, this history is temporary/session based, right? Thanks again!

6

It is temporary and session-based, it also seems to get reset when you click the reset button on the wizard (which you could disable). If you are looking for this to persist you could store these actions in a table in your db, do you think that could work for your use case here?

7

I've been playing with stepHistory, returning "previously visited" step ID via:
{{ wizard.stepHistory._tail.array.at(-1) }}
– a little bit easier to visually parse.

I believe it can also be Lodashed:
{{ _.last(wizard.stepHistory._tail.array) }}

8

I think I just implemented exactly this – triggering an action (in this case, automatically opening a modal) only when progressing from one of two specific steps to another specific step. It's a little clunky in that it has to attempt this with every step change, but it works.

let history = roundBuilderWizard.stepHistory._tail.array

if ( wizard.currentStep === "wHDygbIWr" && (_.last(history) === "C2t7TXppZ" || _.last(history) === "8j0jRuTsO") ) {
  modal.open()
}

I suppressed all success/failure messages on the query after confirmed it was working.

It would be cool if there was a way to trigger a query upon loading a specific step (i.e. this kind of thing wouldn't have to run with every step change, and only when landing on the step that I'm interested in)

9

if you use the built in "previous" button for the wizard it doesn't look like stepHistory array is reliable. I'm guessing it's being popped from the history array

10

Hi Tess. Is there a way hide the Previous button? I have a createDocument query that is generated Step1->Step2 and I don't want duplicates created if the user clicks Step2->Step1.

11

Hey @jsmid! Stepping in for Tess here.

This isn't currently possible in the Wizard component, but it's possible in the stepped container actually :slight_smile:

You can conditionally disable the previous and next buttons. In my example, I'm disabling the previous button for the first and second steps.

You can also even conditionally hide the button (you'd put the same code in the hidden field at the bottom of the right panel).

If you'd like to continue to use the Wizard component, I think Custom CSS might be your best bet there.

http://community.retool.com/t/how-to-use-custom-css-in-retool-apps/17300

Let me know if you have any questions at all!