Multi-step interfaces are quite a common user experience, for example the checkout process we go through when buying things online. Since this is such a common pattern our Redwood design team created a dedicated page template for such processes that you can leverage to quick implement this pattern in your application.
The patterns starts with a process overview view where the user sees the steps involved. When they start the process an animated transition takes them to the first step of the process, and the right side of the page displays their position among the steps. Continue and cancel buttons help them transition through the steps. A built in validation group makes sure the content of input components pass client validation before continuing to the next step. At the last step, or even before that, the customer will see an action button that allows them to complete the process. Optionally you can add a save button allowing the user to leave the process and come back later to specific locations.
Using the Pattern
Once you create a Redwood based application, you'll find the guided process template as one of the options when creating a new page in Visual Builder. The steps and variables used in the patterns are described in the component documentation you can read when looking at the component in the component exchange. There is a lot of functionality that this template provides, below is a demo of the basic functionality you are likely to implement. We define multiple steps, hook up the primary action we'll execute at the end of the process, and the cancel button action. In addition we make sure to indicate steps that were finished successfully.
Beyond defining the title, subtitle, and primary actions of the template, the main additional thing you need is a set of steps. The pattern defines a page level data type for a step, which makes it easy to create an array of objects from this type. Then you can initialize it with a set of steps for your page. Having the steps defined in an array helps you modify and update steps as you progress through the process.
For example if you want to indicate that a step is complete, you need to set it's status attribute to success – which in our demo we do with a little JS function that accepts the array of steps and the current step and modify that row. We call this function as part of the spBeforeStepNavigate event – where you can do additional checks and modification as needed before proceeding with your flow.
The code we are using is:
completestep(steps, currentstep) {
steps.filter(x => { return x.id === currentstep; })[0].status = "success";
return steps;
}
Another attributes of a step is display, you can set it to on, off, or disabled – if you set a step's display to on – the user will be able to click on it on the right side navigation and navigate to that step directly. You can set the attribute value dynamically to control if users will be able to navigate to a specific step. For example you can set display="on" for a step when the step is completed – which will allow the user to navigate back to this step using the right side menu.
We hook up the primary action event to submit the new employee information using the action chain created by the "Create Form" quick start. And we also modify the cancel event to navigate back to our home page.
There is More
You can add a "save" option to the process to allow people to save their current state and come back to the process later on.
You can also indicate that specific steps can be skipped, as well as specify that the primary action can be done from other steps (and not only the last one).
Learn more by exploring the component's documentation in the component exchange, and pattern info on the redwood.oracle.com site.