Multiple toolbars in Wizard mode

[IainClucas]

We would like to have two toolbars in our forms which are a set of panels that are managed in Wizard mode.

We would like the Next, Save and Submit buttons on a bottom toolbar and a back button on a top toolbar that appears before the current form panel. 

Whilst we are in Wizard mode, so we could have the prev/next buttons, we actually hide the Wizard navigation through CSS.

So has anyone got any suggestions to have back button toolbar in addition to the other bottom toolbar?

[Pulkit_Jain_]

@IainClucas 

Wizard layout for Panels comes with OOTB guided navigation so wondering why there is a need for an additional toolbar with similar icons.

Is it the use case where you only want the next button on the bottom toolbar? For additional icons, you can customize the existing panel layouts and add css/js[0].

If validation is a concern, you can ensure an additional check is in place by validating the panel navigation OOTB.

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

[0] - https://experienceleague.adobe.com/docs/experience-manager-64/forms/customize-aem-forms/custom-layou... 

[IainClucas]

The client has a tight set of patterns for all their forms (thousands of them) They state that there should only be on screen the items that are needed (no guided navigation, breadcrumbs, pagination etc) The back button (if on "page 2+" must be the first thing the user can interact with. The form item(s) must come next, followed by the Interaction controls. (Next, Save, Submit etc)

The forms typically adhere to the single form component per "page"/panel approach.

So we are currently using the wizard approach for the flow but hiding it using CSS. It seems to work going forward but the back button as the 1st element is proving more troubling.

[Pulkit_Jain_]

@IainClucas 

Thanks for explaining this further!

I think @Mayank_Gandhi provided a nice workaround so you can implement the same.

[Mayank_Gandhi · Accepted solution]

@IainClucas You can actually do it using panels, try this design 

[IainClucas]

Thanks - I will try to give this a go when I am next in the office. I assume the Wizard panel can go inbetween the other two panels (top and bottom). In this case are you not using a toolbar at all?

[Mayank_Gandhi]

@IainClucas bingo! That's the design I wanted you to try.

[IainClucas]

I managed to complete the solution as you suggested on the train home. It performs as expected. Now to create a template to base all the forms on!

For reference if anyone is also interested here is a package of the form:

https://drive.google.com/file/d/1A82GHp3yNoKv8IfxiosJCwH8K-pJ-fXK/view?usp=sharing

[Mayank_Gandhi]

@IainClucas good to know it worked! and thanks for sharing the sample on forums.