Hi SharePoint guys,

Today, I am going to show and share how we can build a reusable and flexible wizard component we will be able to use in our SPFx solutions ! Actually, it is a component that can be used in any React application but I’ll show it using a SPFx solution since all the boilerplate is already in there (moreover my intent was to use it in SPFx solution so… :D)

The purpose

As in many applications, we might need to guide our users through steps in order to fill in information in a consistent way, the solution I am going to demonstrate here is a way to have a generic component that will take care of the Wizard behavior instead of rewriting it each time we need something similar.

In this blog post, I am going to share the whole code and demonstrate the logic and how to use it.

The implementation

The component is implemented in a reeeally simple way with only a few “navigation” buttons, and a Office UI Fabric Pivot component. And, IMHO, it looks quite good and integrates smoothly with Microsoft UI trends. So we need the following:

  • A Pivot component that will render the pages (steps) of our wizard
  • A “Previous” button if there is an available previous step
  • A “Next” button if there is an available next step
  • A “Cancel” button always visible
  • A “Finish” button if we are at the last step of the wizard.

Enum flags

We need to provide a list of individual steps and identify them uniquely.
In order to simplify the logic and try to make it as generic as it can be, I’ll use a TypeScript enum flags, it is a concept I used a lot in C#, and when suitable, I use it in TypeScript as well, we declare an enum and set the numeric value of each enum member as a binary single bit mask value

enum_flags

We could have written in the following form to emphasize the used binary bitsenum_flags_binary

 

 

 

 

Notice the “None” value set to 0, that value will never be used, and a Wizard step cannot be identified by 0, because the bitwise operators (bit shifts) won’t work with all 0s ๐Ÿ™‚

Show me the code !

In order to have a component easy to reuse and have intellisense in VS Code, I chose to write an abstract component with a generic parameter that will hold the type our steps enum. You can take the code of this abstract component as is and put it somewhere in your solution, unless you need to improve it or adapt it, you would probably not need to change this code.

However, feel free to take a look at the code to see how the bitwise operators are helping here ๐Ÿ™‚

For instance, you can put the following code in a components/ย folder under your SPFx src/ folder in a file Wizard.tsx

See the code on Github Gist

Along that TSX file, you will probably need a bit of css to make it look a bit (just a bit) nicer. Add thatย Wizard.module.scss file

See code on Github Gist

With these pieces of code in your solution, you are ready now to use your own Wizard ! in your SPFx React component, you need to do the following, declare the steps with one shifted bit for each step, and then declare a new React component extending the BaseWizard with your own enum

In the render method of your host React component you can then write the following, building all your step within a WizardStep element with the step property set to its step identifier, if the step is not specified, an error will be raised while rendering…

You’ll probably have noticed the onValidateStep callback property that can either return the validation result directly or a promise resolving the validation result, it will allow to handle async calls during validation.

See the below animation to have an idea of what that component will allow you to do.

demo01

Hopefully, you’ll find this little reusable component useful !

You can find the whole solution on the Github repo here.
At the moment, it is not shipped it as a ready to use component, but feel free to do so ๐Ÿ™‚ Also, if you have any idea of improvement or notice some issue, please, notify me on the Github repo !

Cheers !
Yannick