Hi,
Is it possible to relocate (or replicate) the next/back buttons on a wizard control to just below the step numbering? I've been able to style the buttons, but can't seem to get them to move.
Thanks!
Hi,
Is it possible to relocate (or replicate) the next/back buttons on a wizard control to just below the step numbering? I've been able to style the buttons, but can't seem to get them to move.
Thanks!
Hi @stevea,
You could remove the default buttons with CSS:
.wizard-card-footer__button {
display: none !important;
}
Then add custom ones that would change the wizard's step using the following code:
let currentStepIndex = fd.container('Container1').widget.activeTabIndex;
fd.container('Container1').widget.navigateToTab(currentStepIndex + 1); // for next step
let currentStepIndex = fd.container('Container1').widget.activeTabIndex;
fd.container('Container1').widget.navigateToTab(currentStepIndex - 1); // for previous step
You'd also need to make all steps of the wizard available. For that, paste this code into the JavaScript editor:
fd.spRendered(() => {
fd.container('Wizard').widget.activateAll();
}};
Let me know if this helps.
@IliaLazarevskii Brilliant, thank you! This is exactly what I was after and is working perfectly