UI5ers Buzz #15: Check Out the Magic of a Wizard

We already wrote about the new look and feel of the Shopping Cart demo app in UI5ers Buzz #01 earlier this year.

But not only the navigation through the product catalog evolved, the entire check-out process was improved, too! Maybe you already noticed it in our latest nightly build of OpenUI5?

You can now see the powerful Wizard control that guides a customer safely through the several steps when ordering products. And you will discover some examples how to validate inputs.

Now the shopping experience is more realistic as a demo app. The combination of Wizard and validation, implemented according to UI5 best practices, offer a good example for similar development projects.

Just start the demo app, drop some products into your shopping cart, and click on Proceed. This will take you to the first step of the wizard in the new check-out process.

Visit the Wizard

The Wizard control guides the user through predefined steps of a process. It allows you to branch to different paths or skip entire steps. And you can make sure that the user can only proceed to the next step, if all input fields of the current step are validated correctly.

In our check-out process the Wizard works like this:

Take a closer look at the following specifics:

In step 2, the user chooses a payment type. Based on this choice, the wizard automatically branches to one of the three different variants of step 3.

In step 4, the wizard asks for the invoice address and whether there is a different delivery address. Based on the user’s choice, the wizard either displays or skips step 5.

The Magic of Input Validation

A very interesting feature in the check-out process is the use of Input Validation. For example, if the user accidentally enters the ZIP Code (numbers only) in the Country field (letter only) and vice versa, the fields are marked red, indicating an error. Detailed information on these errors can be accessed via the message popover at the bottom of the screen.

As long as the errors remain, the wizard won’t let the user proceed to the next step. Only after resolving all errors the wizard displays the Step 5 button.

Discover the magic behind the wizard and input validation by downloading the code of the Shopping Cart demo app from our Demo Kit page. Just click the Download button and select “Shopping Cart”.

The next post in our UI5ers Buzz blog series will cover how to extend the SAP Fiori launchpad with templates available in SAP Web IDE.

Previous post: UI5ers Buzz #14

Next post: UI5ers Buzz #16

Have a great day,

Arnd

Arnd is an Expert Developer at SAP. He discovered the art of programming on pocket calculators, legacy home computers and game consoles. Today his focus is mainly on Web development technologies and UI5.