Show TOC

Procedure documentationCreating a Wizard Locate this document in the navigation structure

 

In a wizard, the user is guided from one step to another, with a "roadmap" showing the steps at the top. To move from one step to another, the user clicks a navigation button – such as Next or Back – in the view and jumps to the target view. As the transition occurs, the step for that view is highlighted.

A Three-Step Wizard (A Three-Step Wizard)

When you create your wizard, you can define steps and substeps, and enable the user to move backwards and forwards through the full roadmap of steps.

Procedure

  1. On the Design board, create and connect all the components of your iView.

  2. To create the layers for the wizard:

    1. Click the Compose button in the task-panel toolbar.

    2. From the Components group of elements, drag a Layer onto the board, under the component(s) it should contain. Then drag the components into it. (By dragging components into layers, you effectively attach them into a single unit.)

    3. Repeat the last step for each layer you want to create.

  3. Configure the wizard layers:

    1. Click the Configure button in the task-panel toolbar.

    2. From the Navigation control drop-down list in the Layers group of attributes, choose Wizard.

    3. In the table at the bottom, enter an appropriate Step name for each layer (you can leave the Label numbers as they are). You can use the Label column to number steps and substeps accordingly, such as 1 - 1a - 1b - 2 - 3 - 3a -3b - 3c - 4. Each of these steps would be numbered consecutively in the first, # (Layer ID), column.

  4. Create the transitions and their triggers:

    1. From the first layer, drag the green dot at the top to the edge of the layer to which it should be connected. When the line turns red, release the mouse. A transition line called *next is created.

      Note Note

      In order to define the main steps of the wizard (in contrast to the substeps), therefore, you must indicate that the transition is a default one. To do so, right-click the transition and choose Set as default from the context menu.

      End of the note.
    2. In the Event name field at the top of the Configure Element task panel, rename the transition to give it a logical name that will be used to relate it to a navigation button.

    3. Repeat steps a and b for each layer, creating transitions back and forth between the steps and substeps. Substep transitions should not be set as default.

  5. Create the navigation buttons:

    In order to trigger the transition to the component of the connected layer, you need to assign an action with the transition's event name to the button that triggers the action. You should do this on the Layout board.

    1. First, if a button in the component of the first layer does not exist, create it. You can add a button to the form by selecting the form and at the bottom of the Configure Element task panel, clicking the Add (plus) button and creating a pushbutton. Alternatively, you can create a taskbar button by using the Create Toolbar option from the right-click menu (see Create a Toolbar).

    2. For the button, define the appropriate action, naming it according to the name of the transition. (For pushbuttons, this is done in the Action tab of the Control Properties dialog box, accessed by right-clicking the control on the Layout board and choosing Properties from the context menu.) For more information about defining actions, see Control Properties - Action Tab.

  6. Lay out the iView, also on the Layout board.

    1. In each UI component, move the navigation button to a reasonable place that is fairly consistent between the different views/layers.

    2. In the table of the Configure Element task panel, press Ctrl and in the second column – with the Visible (Visible) icon – select all the rows, in order to display the contents of all the layers. This makes the components appear semi-transparent.

    3. Stack the components one on top of the other, aligning them to their top-left corners.

Result

The wizard is created so that each layer can be accessed, as defined, from other layers, displaying only the contents of the selected layer. The boxed number at the top indicates the layer currently being accessed.

Example

You can build a wizard using the tutorial in Creating a Wizard