Wizard Templates

"Wizard Templates" are a special type of template specially designed for those screens in which you need to guide the user through the execution of steps, in order to execute the desired process.

WorkWithPlus provides the possibility to generate Wizard Web Panels in a very simple way, managing automatically the state of the different steps so at any time of the wizard execution you will be able to access all the information fulfilled by end-user during the execution of the wizard.

The Wizard uses an SDT (called <WebPanelName>Data) that keeps the information of each one of the steps. Then the developer is the one who must use that SDT to manipulate the data.

By default, it provides 6 different Wizard templates: Wizard Bullet Type, Wizard Arrow Type, Wizard Line, Wizard Vertical, Wizard Progress and Wizard Underline, but you can modify these templates or create new ones. In the following image, you can visualize these templates.

The WorkWithPlus Pattern Settings editor shows the Wizard templates tab with row of template tabs WizardArrowType, WizardBulletType, WizardLine, WizardVertical, WizardProgress, and WizardUnderline highlighted by a red arrow. The tree for Template: WizardArrowType shows TableMain with Step Titles, Step Description, Steps position, and an Event Refresh (AssignWizardStepDescription); the preview shows four arrow-shaped steps labeled Value with Step Description text below.

  • Wizard Bullet Type

The Select Template dialog shows the Wizard bullet template selected under Wizards (Steps in Web Components). The preview shows four numbered circular step markers ('Value') connected by a horizontal line at the top, with Step Description text and a placeholder Wizard Step Data box below.

  • Wizard Arrow Type

The Select Template dialog shows the Wizard arrow template selected under Wizards (Steps in Web Components). The preview shows four chevron-shaped step segments labeled 1 Value, 2 Value, 3 Value, 4 Value forming an arrow progression, with Step Description text and a placeholder Wizard Step Data box below.

  • Wizard Line **

The Select Template dialog shows the Wizard Line template selected under Wizards (Steps in Web Components) in the Templates tree. The preview shows a Step Title and Step Description above a four-segment horizontal progress line with two segments filled in dark blue, and a placeholder Wizard Step Data box below.

  • Wizard Progress **

The Select Template dialog shows the Wizard Progress template selected under Wizards (Steps in Web Components). The preview shows a Step Title and Step Description above a single continuous horizontal progress bar partially filled in dark blue, with a placeholder Wizard Step Data box below.

  • Wizard Underline **

The Select Template dialog shows the Wizard Underline template selected under Wizards (Steps in Web Components). The preview shows four numbered step labels ('Value') in a horizontal row with an underline beneath the first two, a checkmark on step 1, Step Description text, and a placeholder Wizard Step Data box below.

  • Wizard Vertical **

The Select Template dialog shows the Wizard Vertical template selected under Wizards (Steps in Web Components). The preview shows four numbered steps labeled 'Value' arranged vertically on the left, the first marked complete with a checkmark, next to a Step Description panel with a placeholder Wizard Step Data box.

We can also create or modify new steps for the wizard to develop other kind of tasks:

The WorkWithPlus Pattern Settings editor shows the Wizard templates tab with the Step templates sub-tab highlighted in orange, listing step tabs Welcome, Data, Select Grid Items, Add Grid Items, Summary, Completed, and MyStep (outlined in red). The tree for the selected Welcome step shows TableMain with WWP_WizardWelcomeCaption text and a Standard Action group with WizardPrevious and WizardNext actions; the preview on the right shows the 'Welcome to the Wizard' text with Previous and Next buttons.

 

** Available as of WorkWithPlus for Web 14 Upgrade #3