Generation of Wizards

WorkWithPlus provides the possibility to generate Wizard Web Panels in a very simple way, managing automatically the state of the different steps so that have in the final step all the information fulfilled by end user in all the steps of the Wizard.

In order to achieve this, WorkWithPlus has created a type of templates named 'Wizard templates', which you can visualize and manage within WorkWithPlus Settings -> Web Panel templates.

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.


Each Wizard template contains a main part, which is the first tab of the template. In that main part it is included:

  • The title of the wizard, which you should modify when creating a Wizard Web Panel
  • A node named 'Step Titles' which is the Web Component that displays the different steps of the Wizard
  • And a node named 'Steps position' which defines the position within the form where the content of the steps will be displayed.

In the example above, there is also a text block 'Step Description' which will display the description of the current step (because this is set by the code added in the event block).

Also, each Wizard template contains a set of 'StepTemplates', that will be selected by developers when creating Wizard steps. You can create new 'StepTemplates' within a Wizard template, or you can add new ones.

Each 'StepTemplate' will have its content, and the StandardActions WizardPrevious and WizardNext. Then, depending on the position of these steps within a Web Panel, these actions will be automatically hidden (for example if you are in the first step, you don't have the option to go back), or changed its behavior (More info about these StandardActions in the following link).

The steps provided by default for both 'Wizard templates' are: Welcome, Data, Select Grid Items, Add Grid Items and Completed.

Wizard Templates -> Wizard Bullet Type: StepTemplates -> Welcome

The purpose of this step template is to make an introduction to the wizard. When using this step template in a Wizard Web Panel, you should modify the text block with the explanation of the purpose of the wizard.


Wizard Templates -> Wizard Bullet Type: StepTemplates -> Data

This step template could be used in order to display information or to ask user to fulfill information (in this case you could add a variable based on some Business Component and select the elements, or add variables based on domains, attributes, etc).


Wizard Templates -> Wizard Bullet Type: StepTemplates -> Select Grid Items

This step template could be used when you want to display items in a grid and end user needs to select some items within that grid:


Wizard Templates -> Wizard Bullet Type: StepTemplates -> Add Grid Items  

This step template could be used when end users needs to add a collection of items one by one all in one step, and visualize them together. For example, when creating a new person, add each of their phone numbers or emails. This step template contains an example code in order to show you how it could be achieved.


When using this step template, we recommend that you base your grid on an SDT collection, by making right over the grid -> Select SDT. Then you should add the code in the insert button and in the delete button. There is an example for each one of them included as event block code

Wizard Templates -> Wizard Bullet Type: StepTemplates -> Summary

This step template could be used when end user need to see a summary of all steps. Also in this step is added the Standard Action Wizard Go To that allow you to navigate for the steps of the wizard.


Wizard Templates -> Wizard Bullet Type: StepTemplates -> Completed

This step template could be used as a final step to the wizard, including information about the process, related actions, etc.