SharePoint Forms Wizard Next/Back Button Locations

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 :+1:

1 Like