Show TOC

Procedure documentationCreating a Wizard Locate this document in the navigation structure

 

In this example, you build a wizard (guided procedure) on top of the model that you created in Adding a Data Service for Choosing Banks (model BanksB). You do so after importing the BanksB model.

Prerequisites

You have created the model in Adding a Data Service for Choosing Banks and have the base model (Creating the Base Model) open in Storyboard.

Procedure

  1. From the Design board top level (SecondExample), import the model:

    1. Choose   Model   Import from File.   The Import from File dialog box is displayed.

    2. Click the Browse button and navigate to the BanksB.gml file that you exported previously.

    3. Click OK and rename the new iView BanksD.

  2. Open (drill down into) the BanksD iView and 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 to the top-left side of the Design board, and drag the Input Form into it. (By dragging elements into layers, you effectively attach them into a single unit.)

    3. Drag another layer to the center and drag the Bank List Table into it.

    4. Drag the third layer to the right, drag the Bank Address Form into it and move the layer to the top right.

  3. Configure the wizard:

    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, change each Step name as follows (you can leave the Label numbers as they are):

      • 1 Enter Country

      • 2 Select Bank

      • 3 View Details

  4. Save the model. It should look something like this:

    Creating Wizard Layers (Creating Wizard Layers)

  5. Create the transitions and their triggers:

    1. Select the Enter Country layer and drag the green dot at the top to the left edge of the Select Bank layer. When the line turns red, release the mouse. A transition line called *next is created.

    2. In order for the data entered in the Input Form to be transferred to the Bank Getlist data service, while triggering the transition to the Select Bank layer, both events must be given the same name:

      1. First, select the Input Form and double-click on the SUBMIT button row in the task panel. The Control Properties dialog box is displayed.

      2. In the Display tab, rename the button "Next".

      3. In the Action tab, click Delete (Delete) to delete the Submit action. Then click Add (Add) and create a new Custom Action named Next.

      4. Close the Control Properties dialog box.

      5. Double-click the submit line and rename it Next.

      6. Do the same for the *next transition line.

    3. Now create a transition between the Select Bank layer and the View Details layer, and rename it Next as well.

    4. For this middle layer, we need buttons going both forward and backwards:

      1. Right-click the Bank List Table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed.

      2. As you did previously, create a button called Next, which triggers a Custom Action also called Next.

      3. For a button called Back, we can use a predefined action rather than creating a transition and using a Custom action. To do so, create the button, call it Back, and choose History Back as the assigned action. Then click OK.

    5. For the View Details layer, create transitions and events as follows:

      1. Create a transition from the View Details layer to the Enter Country layer and rename it BackToStart.

      2. Right-click the Bank Address Form and choose Create Toolbar from the menu.

      3. Create two buttons:

        • Back, using the System action:History Back

        • Back to Start, using a Custom action called BackToStart.

    6. Click OK and save the model.

  6. Lay out the iView by clicking the Layout tab. The first stage of the wizard (Enter Country) is displayed with the Input Form.

    1. In the Input Form, move the fields down and the Next button to the top left, to be consistent with the buttons in the other toolbars.

    2. In order to display the contents of all the layers simultaneously, press Ctrl and select the other two numbered steps.

    3. Move the Bank List Table and the Bank Address Form to align with the top-left corner of the Input Form, one on top of the other.

    4. Click on the workspace grid and then click the third step (View Details) in order to show its contents only. Resize the Bank Address Form.

  7. Return to the Design board to view the complete model. It should look similar to the following:

    Banks Wizard - Final Design (Banks Wizard - Final Design)

    Recommendation Recommendation

    You can use the following three buttons in the toolbox below the Design board to view parts of your model, as follows:

    Button

    Description

    Level 1 (Level 1)

    Displays the layers and transitions only.

    Level 2 (Level 2)

    Displays the layers and transitions, and the layer contents (what the user sees).

    Level 3 (Level 3)

    Displays the full model logic.
    End of the recommendation.

  8. Save the model and then deploy it.

Result

Your runtime model should look similar to the following:

Banks Wizard - Runtime (Banks Wizard - Runtime)