2. Create a Wizard to Help Users Complete a Form

Create a Wizard to Help Users Complete a Form

Learn how to create a wizard that will help your users complete and submit a form in your process application. To get started, look at the sample volunteer form for an overview. Download and try out the sample application, and then follow the steps to create your own wizard.

Topics:

Learn About the Sample Wizard

Let’s review the sample form that people complete when registering for volunteer positions.

In the first step, the wizard prompts the user for basic information, such as name and email. Next, it asks about areas of interest and time commitment. Then, it requests some additional information. In the final step, the user submits the application. The wizard acknowledges the form was received and sends information about what happens next.

Description of traincontrol-all-base2.png follows
Description of the illustration traincontrol-all-base2.png

Import the Sample Forms and Preview the Wizard

Import the sample forms and try out the wizard.

  1. In the Integration Cloud navigation pane, click Processes.
  2. In the Processes navigation pane, click Applications.
  3. On the Process Applications page, click Create, then Import.
  4. Browse and locate the TrainSample.exp file you downloaded and click Import.
  5. In the Application navigation pane, click Forms, and then open the Wizard form.
  6. Click Preview. Select each step in the wizard and enter sample values, and then submit the form.

Build a Wizard Yourself

Add a Train control to any form to create a wizard that helps users complete the form. The train—or wizard—has several stops along the way. Each stop displays a different portion, also called a presentation, of the form. Users can see the steps they have completed, their current step, and how many more steps to go.

Description of traincontrol-ex1.png follows
Description of the illustration traincontrol-ex1.png

To build a wizard for your form:
  1. Navigate to the Forms page.
    1. In the Integration Cloud navigation pane, click Processes.
    2. In the Processes navigation pane, click Applications.
    3. On the Process Applications page, click Forms.
  2. Create two forms, called Presentations and Wizard.

    Each step in the wizard (each train stop) is linked with a presentation defined in the Presentations form. The Wizard form contains the Train control and the Presentations form.

  3. In the Presentations form, create one presentation for each step of the wizard.
  4. In the Wizard form, drag and drop a Train control Train control icon from the Advanced Palette. Add the Presentations form Presentations icon from the Forms Palette.
  5. In the Wizard form, define the four stops for the Train control.

    Select the Train control. On the General tab in the Properties pane, enter the Options Names and Options Values for the four train stops (which are the four steps your users will complete):

    • Basic Info –> option1

    • Volunteer Info –> option2

    • Additional Info –> option3

    • Submit Application –> option4

    Description of traincontrol-ex1f.png follows
    Description of the illustration traincontrol-ex1f.png

  6. In the Wizard form, add events for the Train control.

    Select the Train control again. On the General tab in the Properties pane, add an On Change event and an On Submit event.

    Description of traincontrol-ex1g2.png follows
    Description of the illustration traincontrol-ex1g2.png

  7. Configure the On Change event.

    Add a series of If/Then/Else If condition and action expressions to control which presentation displays when the user clicks a train step. If the train value is equal to the train step value, then display the presentation corresponding to that value. For example:

    • Option1 is the value of the first train step, so when the user clicks the first train step, then the corresponding presentation Basic Info is shown.

    • Option2 is the value of the second train step, so when the user clicks the second train step, then the corresponding presentation Volunteer Info is shown.

    Description of traincontrol-ex1g.png follows
    Description of the illustration traincontrol-ex1g.png

  8. In the Wizard form, configure the On Submit event.

    In this example, option4 is the last step. The user should be able to submit the form only while visiting the last step.

    Configure the On Submit event to prevent form submission if the user isn’t on the last step.

    Description of traincontrol-ex1h.png follows
    Description of the illustration traincontrol-ex1h.png

  9. Click Preview to see and test the results.