PF4 Wizard custom buttons

[lucasgarfield]

I would like to be able to pass a footer prop to the PF4 Wizard component to control the buttons myself, as is possible in the original PF4 Wizard component:

https://www.patternfly.org/v4/components/wizard
(scroll to the <Wizard> component's props, you will see it accepts a footer prop)

On the DDF PF4 Wizard Mapper's docs page, a table of props is given (footer is not in the table), and there is the following sentence:

Also accepts these props from the original component: titleId, descriptionId, hideClose, hasNoBodyPadding, navAriaLabel and closeButtonAriaLabel.

Since footer is not in the list, I assume that means it is not currently possible to customize the buttons in the DDF PF4 Wizard. Am I correct? (I would love to be wrong!)

DDF PF4 Wizard docs:
https://data-driven-forms.org/provided-mappers/wizard?mapper=pf4

(Perhaps I should add, my goal is to add a third button on the final step in-between the 'Submit' and 'Back' buttons.)

[rvsia]

@lucasgarfield Hello,

you can put your own component as Buttons props: https://data-driven-forms.org/provided-mappers/wizard?mapper=pf4#buttons

[lucasgarfield]

Oof, can't believe I missed that! Thank you @rvsia !!!

[lucasgarfield]

I had a chance to look at this today, and I am still a bit confused about how to best implement my feature. Is there an easy way to pass in handlers for custom buttons' onClick attributes? The default props include handleNext and handlePrev, but I am not sure how I would pass in the handler for the cancel or submit buttons or a custom handler for my custom button. The custom handler needs access to the form's state values, just like how in the 'vanilla' Wizard the state is passed to onSubmit and onCancel.

[lucasgarfield]

Hi @rvsia, I ran into another roadblock (see comment above ^^^)... would love to hear your thoughts!

[rvsia]

@lucasgarfield Oh sorry, I have just started in a new job, and I have a lot of it so far so I missed this one.

You can get formOptions from WizardContext (here) that includes updated handleSubmit function (uses only visited values), onCancel, etc.

Currently, you cannot get current wizard values (only all form values), but this is something we could and should implement to the context, if you open an issue, we can take a look on it.

And I recommend to check the wizard implementation, it is rather simple and it can tell you all the details.