Configure Train Controls

If you have a multistep web form activity that users should approach in a particular sequence, then add a Train control to guide them through this activity. The Train control displays the number of steps a user must complete before submitting the form, and it also indicates the user’s current place within a multistep activity.

In a multistep form (form with a set of presentations), you can represent each step using a train stop. In other words, you can map each presentation to a stop. Users can navigate between steps by clicking on the train stops; the current stop of the user is highlighted in blue and the visited stops bear a check mark. However, to display a different presentation for each stop, you must define an event with Change Presentation actions for the Train control.

To configure a Train control:

  1. From the Advanced Palette, drag the Train control onto the canvas.

  2. Select the control and edit its properties on the Properties pane's General tab.

    Field Description

    Name

    An internal identifier that you will use to identify the control.

    Label

    Specifies the control name that displays to a user.

    Binding

    Defines a link between the control and a data attribute.

    Computed Value

    Set this property to apply a computation to the control. See Create Computed Controls.

    Options Source

    Select a source (Static, From Data, and Connector).

    • Static: Specify choices using Options Names and Options Values fields. Use Options Names to specify the label to display for an option and use Options Values to specify an internal value for an option.

    • From Data: In the Options List field, select a list of values options source from the data definitions available in the web form. If you selected a list of complex elements, then, in the Label Binding field, specify a data attribute that will display as the label and in the Value Binding field, specify a data attribute that will be the value.

    • Connector: Specify a REST connector, a resource, and an operation to use. Specify parameters to pass to the connector and define how the response should be mapped to the control properties. See Work with Connectors.

    Default Value

    If you selected Static in the Options Source field, then, specify a default option in this field.

    If you selected From Data or Connector in the Options Source field, then, select either the first or the last value as the default value.

    Events

    Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to Forms.

  3. On the Styling tab, edit the control's styling properties.

  4. Click Preview to try out using the control.

Note:

  • You can add a maximum of 15 stops for your form using the Train control. When the form loads, users can scroll to navigate the stops or the control can be designed to fit into a single view by selecting Stretch from the Properties pane's General tab.

  • To avoid redesigning the Train control each time you make changes (especially, addition or deletion of presentations) to the multistep form, add the control after you’ve completely configured the web form and all of its steps.