The Wizard component lets you create a UI to guide users through multi-step workflows. You can customize each screen of your workflow like you would any Retool app. Transitions between Wizard “steps” are determined based on user input (users select which step to go to) or based on programmatic conditions (using “virtual steps”).
Let’s say we want to build a workflow to allow a customer support rep at our company to deactivate a user. Before we deactivate a user, we want to make sure that the user has paid all their outstanding invoices. We also want the customer support rep to input a reason for the deactivation before the task is completed.
First, let’s drag a Wizard component onto the Retool canvas.
We can add a basic UI to the first step of the Wizard. In this case, we display the recent invoices for the user we want to deactivate (John Smith) so that our customer support rep can confirm that everything is in order.
Next, we want to route the customer support rep to different steps depending on if they approve of the user’s invoice status. In the Wizard’s inspector panel, press
In the workflow builder, let’s start by renaming our first step (“Review unpaid invoices”) and by adding two new steps (“Collect payments” and “Provide additional info”). We can connect the first step to the two possible next steps by holding shift and click-and-dragging between them. Our workflow now looks like this:
If we go back to our app, we’ll see that our customer support rep can now press one of two buttons at the bottom of the Wizard. Let’s give these buttons more descriptive names. For example, click on the transition from “Review unpaid invoices” to “Provide additional info” and change the Navigation button text to “Confirm no unpaid invoices”.
Once our customer support rep has confirmed that the user has no unpaid invoices, we’ll want to collect some additional information on why we are performing the deactivation.
However, we’ll want to route the customer support rep to a different Wizard step depending on what they select as the “Reason for deactivation”. That’s where virtual steps come in to play!
First, let's add the following steps in the workflow editor. We can change a step into a virtual step by toggling “Virtual step”.
For the edge from “Virtual step” to “Company shut down”, you can provide a condition to trigger the transition. In this case, we’ll trigger the transition if the user selects “Company shut down” in the “Reason for deactivation” dropdown.
That’s it! When our customer support rep presses “Next” with “Company shut down” selected, they will automatically be routed to the “Company shut down” step.
Updated about 1 year ago