Include a Cancel Button along with the Back/Next Button so I can Exit the Process

[priyankabachu]

I want to call a function on cancel button of each step. Can this be possible?

[newbreedofgeek]

@priyankabachu there is no Cancel button by default. Do you mean Back button?

Back: You can hook into the onStepChange callback, which should fire each time a step changes (back or next) and do any work you may need but this may not suit your need.

Next: The isValidated() method can prevent moving front until certain conditions are met. Step Validation

Pls provide more details on what you are trying to do..

[priyankabachu]

@newbreedofgeek thanks for explaining much clearly :) I don't want to navigate through the steps which i am able to do successfully by using back/Next buttons but in my requirement i need one more button cancel. When the user clicks on the cancel button i want to Perform an action like Calling an Api . So I wanted one more button under each step of wizard.

[newbreedofgeek]

@priyankabachu OK, I see what you mean now. Unfortunately with StepZilla you are only given 2 buttons at the moment. This may change in the future but we have no plans to change this behaviour at this stage. I'll keep this ticket open as "UpVotes Needed" so people can upvote if they like this.

One way you can do this is to put a "Cancel" button in each <Step> and use CSS to position it in the "Footer" next to Back/Next - This is not ideal but it's how I would do it. Remember you control the full CSS of StepZilla so you can do anything with positioning.

Good luck.

[priyankabachu]

@newbreedofgeek ok Thankyou! I will give a try !

[willk-hcss]

I'd like to see this as well, or maybe even a way of overriding/injecting custom buttons into the step navigation.

[keplerk]

The only way i found to do this, its inserting a button by myself on useEffect event

const parent = document.querySelector("div.multi-step div.footer-buttons");
const button = document.createElement("button");
button.classList.add(...["button", "is-danger", "pull-left"]);
button.innerHTML = "Cancelar";
button.id = "btnCancel";
parent.prepend(button);

It's a very dirty way to handle it, but i need a cancel button.

Edit: on onClick event you have to handle the redirection by yourself.