A wizard is a sequence of pages inside one client-side human service (CSHS), so the data stays in the same variable set and nothing is submitted to the server until the last page. Two ways that work well with the OOB UI Toolkit:
A. One coach, several panels, a step indicator (recommended, no round trip between steps)
- Put the pages into a Vertical Layout per step and bind the visibility of each layout to a variable tw.local.step with a visibility rule (Visible when step == 1).
- Use the UI Toolkit Tab Section in "hidden tabs" mode or simply Next / Back buttons that change tw.local.step in a client-side script block.
- Validate the current step in the button handler before moving on; the Status Box / Alert controls show the messages.
// Next button, "on click" of a UI Toolkit Button: validate then move
var me = this, page = this.context; // 'page' when used inside the coach's script
if (page.ui.get("Email").getData() === "") { page.ui.get("Email").setValid(false, "Enter the e-mail address"); return; }
page.ui.get("Email").setValid(true);
${step}.setData( ${step}.getData() + 1 ); // Text control bound to tw.local.step, or use the binding directlyB. One coach per step connected in the CSHS diagram with boundary events (Next / Back). The flow is visible in the diagram, data is kept in tw.local, and you can put a service between two steps (for example a lookup). The Stay on page option of a boundary event lets a button call a service without leaving the coach.
Tips: keep all step data in one business object (tw.local.form) so that Back never loses input; show the progress with the UI Toolkit Progress Bar or a small custom "breadcrumb" (see question 3119); disable Next while a service call is running (${Next}.setEnabled(false)).
References