Configure Advanced Controls

The Advanced Palette contains a set of advanced controls that you can drag onto the canvas. When you select a control on the canvas, the General tab and the Styling tab become available in the Properties pane so you can configure settings specific to the selected control. An asterisk (*) indicates a required property.

Configure Currency (Money) Fields

Add a money control to your web form to allow users to enter money amounts (USD, EUR, JPY, GBP, and INR). By default, the currency type is set to USD. The user can change the currency type using the Currency property on the General tab. The corresponding currency symbol displays next to the currency amount. Users can use commas or decimal point to enter different amounts into the control, such as £ 30,700.00. If users don’t specify commas or decimal point, the web form automatically displays these symbols. The web form rounds all currency amounts to two decimal places.

To configure a money control:
  1. From the Advanced Palette, drag the Money 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.

    Binding

    Defines a link between the control and a data attribute.

    Computed Value

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

    Currency

    Allows you to change the currency type.

    Placeholder

    Text that will appear in the control until any text is entered. If text is removed from the control, the text specified in this field reappears.

    Hint

    Hint text that will display to users when a user clicks into the control.

    Help

    Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.

    Min

    Specify the minimum amount that users need to enter into the control.

    Max

    Specify the maximum amount that users can enter into the control.

    Show increment/decrement buttons

    Select this check box to display the up and down arrow buttons used to increment or decrement the control value.

    Step

    Specify a step value based on which the amount will be incremented or decremented correspondingly when a user increments or decrements the amount in the control. By default, the step value in this field is set to 1. For example, if the step value specified is 3 and the initial amount is $ 0.00, then, when a user increments the amount in the control for the first time, the amount is updated to $ 3.00. When the user increments the amount again for the second time, the amount is updated to $ 6.00 and so on.

    Note:

    This property is displayed only when you select the Show increment/decrement buttons check box.

    Show increment/decrement buttons

    Select this check box to display the up and down arrow buttons used to increment or decrement the control 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 Behaviors to a Form.

  3. On the Styling tab, edit the control's styling properties.
  4. Click Preview to try out using the control.

Configure Phone Number Fields

Add a phone control to your web form to allow users to enter phone numbers in International or US formats. The phone control uses the US format by default and displays the expected phone number pattern (xxx-xxx-xxxx). You can change the format using the Format property on the General tab.

To configure a phone control:
  1. From the Advanced Palette, drag the Phone 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.

    Binding

    Defines a link between the control and a data attribute.

    Computed Value

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

    Format

    Specify a phone number format. By default, the US format is selected.

    Placeholder

    Text that will appear in the control until any text is entered. If text is removed from the control, the text specified in this field reappears.

    Hint

    Hint text that will display to users when a user clicks into the control.

    Help

    Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.

    Max Length

    Defines the maximum number of characters a user can enter into the control.

    Min Length

    Defines the minimum number of characters a user must enter into the control. Leave this field blank if you don’t want to define the minimum length.

    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 Behaviors to a Form.

  3. On the Styling tab, edit the control's styling properties.
  4. Click Preview to try out using the control.

Include Images

Use an image control to include an image in your web form. Under image source properties, you can identify the image using an absolute or a relative image URL or a Base64 format string.

To configure an image control:
  1. From the Advanced Palette, drag the Image 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.

    Binding

    Defines a link between the control and a data attribute.

    Computed Value

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

    From URL

    To specify either an absolute or relative URL, select this option and enter the image URL in the field below it.

    From Base64

    To specify an image converted to base64 format, select this option, then identify the image's format in the Image Format field and its binding in the Base64 Binding field. Base64 images can be viewed in preview mode only.

    Alternative text

    Enter text to display if the image can’t be loaded.

    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 Behaviors to a Form.

  3. On the Styling tab, edit the control's styling properties.
  4. Click Preview to try out using the control.

Upload and Preview a Base64 Image

You can embed Base64 encoded images in forms. They load quickly and are useful for email signatures.

  1. Drag and drop an Image control onto the canvas and select it.
  2. On the General tab, specify Base64 settings in the Image Source fields:
    1. Select From Base64.
    2. In the Image Format field, specify the format you chose when converting the image to base64.
    3. In the Base64 Binding field, enter a name for the image (for example, a data string called oracle).
  3. If the encoded string of your base64 image starts with data:image/jpeg;base64, remove it.
    The base64 input you need begins with: "/9j/4AAQ....", not "data:image/jpg;base64,/9j/4AAQ...."
  4. Click Preview, then Reload With Payload. In the Payload JSON field, enter the binding name and copied code string to the payload. Enclose the binding name and code string within quotation marks.
  5. Click OK and the image displays in the preview window.
    Note that the Reload with Payload button enables you to test the form’s functionality. In a typical use case, the encoded string would be passed as part of the payload.

Include Videos

Use a video control to add a video, such as a Youtube or Vimeo video, to your web form. You can specify full video URLs, embedded URLs, or shortened URLs using the Source Url property on the General tab. You can optionally loop the video or specify to automatically start playing the video when loaded.

To configure a video control:
  1. From the Advanced Palette, drag the Video 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.

    Binding

    Defines a link between the control and a data attribute.

    Computed Value

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

    Source Url

    Specify a valid source URL for the video.

    Allow Fullscreen

    Set this property to allow users to play the video in full screen mode. By default, this field is enabled.

    Loop

    Set this property to loop the video continuously.

    Auto Play

    Set this property to automatically start playing the video when the web form loads.

    Show Controls

    Specify whether to display play or pause controls for the video. By default, this field is enabled.

    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 Behaviors to a Form.

  3. On the Styling tab, edit the control's styling properties.
  4. Click Preview to try out using the control.

Configure Identity Browser Fields

Add an Identity Browser control to allow users to search and select individuals to be notified or assigned tasks downstream in the process.

Use identities to search for users, groups, or roles. You can add single or multiple entries to the Identity Browser based on the configuration you select. Use options in the search filter to restrict the scope of the search.

To configure an Identity Browser control:

  1. From the Advanced Palette, drag the Identity Browser 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.

    Placeholder

    Text that will appear in the control until any text is entered. If text is removed from the control, the text specified in this field reappears.

    Hint

    Hint text that will display to users when a user clicks into the control.

    Help

    Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.

    Default Scope

    Specifies the default scope for the identity search. Available options in the drop-down menu are All, User, Group, and Role. The value of this field is set to User by default.

    Required

    Set this property to require users to complete the control in order to successfully submit the form.

    Multiple

    Set this property to allow multiple entries to the control.

    Disabled

    Set this property to display the control as inactive.

    Hide

    Set this property to hide the control. For example, you might hide a control by default, but configure another control that when selected triggers an event that displays the hidden control.

    Scope Filter

    Set this property to allow filtering of results in the control.

    Auto Focus

    Set this property to automatically select the control when the web form loads.

    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 Behaviors to a Form.

    Note:

    Except for assigning a constant value, you cannot trigger any changes to the Identity Browser using other controls. Actions such as assigning function results, connector call values, or data from the payload or another control are not applicable in the context of Identity Browser.
  3. On the Styling tab, edit the control's styling properties.

  4. Click Preview to try out using the control.

Retrieving a List of User Identities

An identity object contains several fields, such as title, ID (user identity), type, e-mail, first name, last name, and contact number.

Using a combination of Identity Browser and Text controls, you can retrieve a comma-separated list of user identities (IDs), which can be used by other process elements.

To fetch a list of IDs:

  1. Add an Identity Browser control to the form canvas.

  2. Edit the control’s properties as required. Make sure to select the Multiple checkbox to allow multiple entries to the control.

  3. Drag the Input text control onto the canvas. You may also use the Text Area control.

  4. Configure an event to populate data in the Input text control field based on the data entered into the Identity Browser control. See Add Dynamic Behaviors to a Form for details on creating events.

    1. Select Identity Browser, and in the Properties pane's General tab, scroll down until you see Events.

    2. Click Add Add icon to define an event.

    3. Select an event option, for example, On Change; this event is activated when an end user changes the control’s value.

    4. After selecting the event option, click the editing icon next to the events drop-down menu to specify the action. An event window appears.

    5. In the event window, click +Action to add an action.

      A solid red Action indicator appears. Below it, configure the action.

    6. In the Control Name field, select the control the action will affect, in this case select InputText.

    7. In the Action field, select Value.

    8. In the Type field select Control, and in the resulting Control Name field, select IdentityBrowser.

    9. Finally, select Identities in the Property field. This fetches the data in the ID fields of entries in the Identity Browser control to the Input text field.

    10. Click OK, then Save.

  5. Click Preview to test the controls.

  6. On the Preview page, search for and select multiple identity objects in the Identity Browser control.

  7. The Input text field is populated automatically with the list of user identities, that is, the data in the ID fields of these entries.

    Description of forms_id_list.png follows
    Description of the illustration forms_id_list.png

Place Controls in Panels, Sections, or Tabs

You can add panels, sections, and tabs to your web form and use them to group multiple controls under a single control.

To configure a panel, section, or tab control:
  1. Expand the Advanced Palette.
  2. Drag and drop a Panel, Section, or Tab control onto the canvas.
    • A text Drop Elements to this panel! indicates that you can drop controls into the panel.

    • A text Drop Elements to this section! indicates that you can drop controls into the section.

    • A text Drop Elements to this tab! indicates that you can drop controls into the tab. By default, the tab control displays one tab (Tab1). Click Add tab to insert additional tabs into the control.

  3. Select the control, and then edit its properties on theGeneral tab in the Properties pane.
    Field Description

    Name

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

    Label

    The title of the panel, section, or tab that the user will see in the form.

    Description

    For a panel control, provides additional information or instructions for the user.

    Layout

    For a panel control, specifies whether the controls inside it should be displayed vertically or horizontally. This is a mandatory field for the panel control.

    Type

    For a section control, sets the style and format in which the section label displays.

    Expand

    For a section control, specifies if the section control is expanded or collapsed when the form loads. By default, this field is checked.

    Event

    Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behaviors to a Form.

  4. On the Styling tab, edit the control's styling properties.
  5. Drag and drop individual controls from the Basic Palette or the Advanced Palette into the panel, section, or tab control.
  6. Configure general and styling properties for the controls inside your panel, section, or tab control.

    See Configure Basic Controls and Configure Advanced Controls.

    Note:

    If you delete the panel, section, or tab control, all the controls grouped under it get deleted.
  7. Click Preview to try out using the control.

    Note:

    If the data in a field within a section or tab is invalid, a validation error is displayed for the field and the entire section or tab is marked invalid.

Format the Title and Description of a Panel

Use a theme to format the title and description for a panel in your web form.

To select a theme for a panel:
  1. From the Advanced Palette, drag and drop the Panel control onto the canvas.
  2. Select the Panel control on the canvas.
  3. In the Properties pane, select the General tab.
    • In the Label field, enter a title for the panel. The user will see this title on the form.

    • In the Description field, add information or instructions for the user.

  4. In the Properties pane, select the Styling tab.
  5. In the Theme field, select Standard.

    The Standard theme automatically:

    • Increases the font size of the label to 24 pixels (font-size: 24px)

    • Applies the bold style to the label (font-weight: bold)

    Selecting a theme overrides the value defined in the Label Size field on the Styling tab. If you want to use the Label Size field to format the panel label, then make sure the Theme field is set to None.

    You can use the Label Color field to specify a color for the label and the descriptive text in the panel.

Indent Sections

Use a theme to indent the sections in your web form.

To indent one or more sections in a web form:
  1. From the Advanced Palette, drag and drop the Section control onto the canvas.
  2. Select the Section control on the canvas.
  3. In the Properties pane, select the Styling tab.
  4. In the Theme field, select Indent.

Configure Repeatable Sections

Use repeatable section controls to display multiple copies of a set of controls in your web form. You can use repeatable section controls to create dynamic content for your web form.

To configure a repeatable section control:
  1. From the Advanced Palette, drag and drop a repeatable section 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.

    Label Binding

    Allows you to define a dynamic label. To do this, you can use a data attribute listed in the Data definition pane.

    Users can Add/Remove Rows

    Allows users to add or remove rows to the repeatable section.

    Multiple Selection

    Allows users to select multiple rows of the repeatable section.

    While using a repeatable section with multiple-selection enabled to define Dynamic Behaviors or Computed Values, the options available (specific to multiple selection) in the Event or Computed Value window under the Which? field are listed here:
    • For Each Selected: Use to retrieve a value from another control to apply to each selected row of a repeatable section.

    • All Selected: Use to retrieve values from all selected rows of a repeatable section to apply to another control.

    Similarly, in a repeatable section with two controls in a row, you can use these options to apply values from one control to another on occurrence of an event. In this case, when you chose to apply an action to each selected row (by selecting the For Each Selected option), an additional option is available to chose the value source:
    • Current Iteration Row: Use to retrieve the value from one control of the current selected row and apply to another control in the same row.

    Use Data from Connector

    Allows you to populate the repeatable section from a REST connector defined for the application.

    Specify the connector settings in the Connector, Resource and Operation fields and map response settings. See Populate Controls Using REST Calls.

    Events

    Specifies events that trigger actions and conditions. You can customize the repeatable section control’s behavior by configuring events. See Add Dynamic Behaviors to a Form.

    Note:

    While configuring events for a repeatable section, you can now add a condition based on number of rows present within the section using the Row Count property.
  3. On the Styling tab, edit the control's styling properties.
  4. Drag and drop individual controls from the Basic or Advanced Palette into the repeatable section control.
  5. Configure general and styling properties for the controls inside your repeatable section control.

    See Configure Basic Controls and Configure Advanced Controls.

    Note:

    If you delete the repeatable section control, all the controls grouped under it get deleted.
  6. Click Preview to try out using the control.

Some Useful Event Actions for Repeatable Sections

This section lists a few useful actions that you can apply to a repeatable section through the event window. To create an event action, see Specify Actions.

  • To retrieve a value from another control and apply it to each row of the repeatable section, use the For Each option under the Which? field.

  • In a repeatable section with two controls in a row, to copy values from one control to another (for each row) on occurrence of an event, use the For Each option along with an additional option called Current Iteration Row that is available to choose the value source. The Current Iteration Row option allows you to retrieve the value from one control of a row and apply to another control in the same row. The following figure shows an event action configuration for a repeatable section with two controls in a row. The value of control2 is copied into control1 for each row of the repeatable section on occurrence of the specified event:

    Description of foreach-rs.png follows
    Description of the illustration foreach-rs.png

Configure Tables

Use table controls to group multiple controls in a grid pattern into your web form. You can use table controls to create dynamic content for your web form.

To configure a table control:
  1. From the Advanced Palette, drag and drop a table control onto the canvas.

    By default the table control contains one column.

  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.

    Binding

    Defines a link between the control and a data attribute.

    Columns

    In the Columns field, click Add Add icon to add columns. Edit the labels of each column in their respective label fields. To hide a particular column from users, click Hide Hide Column icon beside its label field; you may require to hide a column initially and show it on occurrence of an event, see Some Useful Event Actions for Tables. Click the Delete icon to delete a column.

    Users can Add/Remove Rows

    Allows users to add or remove rows to the table.

    Multiple Selection

    Allows users to select multiple rows of the table.

    While using a table with multiple-selection enabled to define Dynamic Behaviors or Computed Values, the options available (specific to multiple selection) in the Event or Computed Value window under the Which? field are listed here:
    • For Each Selected: Use to retrieve a value from another control to apply to each selected row of a table.

    • All Selected: Use to retrieve values from all selected rows of a table to apply to another control.

    Similarly, in a table with two columns, you can use these options to apply values from one column to another on occurrence of an event. In this case, when you chose to apply an action to each selected row (by selecting the For Each Selected option), an additional option is available to chose the value source:
    • Current Iteration Row: Use to retrieve the value from one cell of the current selected row and apply to another cell in the same row.

    Use Data from Connector

    Allows you to populate the table from a REST connector defined for the application.

    Specify the connector settings in the Connector, Resource and Operation fields and map response settings. See Populate Controls Using REST Calls.

    Events

    Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behaviors to a Form.

    Note:

    While configuring events for a table, you can now add a condition based on number of rows present within the table using the Row Count property.
  3. On the Styling tab, edit the control's styling properties. You can specify column width in several ways:
    • Leave the Automatic column size checkbox selected so the table’s columns automatically resize to fit the device on which the form is viewed.
    • Deselect the Automatic column size checkbox and specify column sizes for different device sizes by entering a number from 1 to 12 in the column size fields that display for different devices.
    • In the Table Columns Width fields, specify an absolute width for each column such as 2in (inches), 5cm (centimeters), 100px (pixels), or 25% (percent). If the column widths together exceed the table width, a scroll bar displays, unless columns are defined with percentages. If percentages are specified but exceed 100%, column widths are displayed proportionally across the table.
  4. Drag and drop individual controls from the Basic or Advanced Palette into the columns.

    Each column can have one control. See Position Controls on Forms.

  5. Configure general and styling properties for the controls inside your table control.

    See Configure Basic Controls and Configure Advanced Controls.

    Note:

    If you delete the table control, all the controls grouped under it get deleted.
  6. Click Preview to try out using the control.

Some Useful Event Actions for Tables

This section lists a few useful actions that you can apply to a table through the event window. To create an event action, see Specify Actions.

  • To retrieve a value from another control and apply it to each row of the table, use the For Each option under the Which? field.

  • In a table with two columns, to copy values from one column to another (for each row) on occurrence of an event, use the For Each option along with an additional option called Current Iteration Row that is available to choose the value source. The Current Iteration Row option allows you to retrieve the value from one cell of a row and apply to another cell in the same row. The following figure shows an event action configuration for a table with two columns. The value of control2 (the control in table column 2) is copied into control1 (the control in table column 1) for each row of the table on occurrence of the specified event:

    Description of foreach-table.png follows
    Description of the illustration foreach-table.png

  • To hide a column within a table on occurrence of an event, select Self under the Which? field, choose Hide Column under Action, and specify the column to hide. The following figure shows an event action configuration to hide a table column:

    Description of tablecol-hide.png follows
    Description of the illustration tablecol-hide.png

  • Similarly, to show a previously hidden column—hidden either through Properties pane’s General tab or through an event action, select Self under the Which? field, choose Show Column under Action, and specify the column to show.

Configure Rich Text Editor Fields

Add a rich text editor control to allow users to enter various types of content, like multimedia, web links, formatted texts, and more into the web form.

This control supports most of the word processing features found in desktop applications such as Microsoft Word. Use the standard editing buttons to insert content or to apply styles to the selected content.

To configure a rich text editor control:

  1. From the Advanced Palette, drag the Rich Text Editor 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 Creating Computed Controls.

    Default Value

    Sets a value to display to users when the form loads.

    Help

    Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.

    Read Only

    Set this property to make the control read-only, that is, to display the control (and its contents if any) but not allow users to edit it.

    Hide

    Set this property to hide the control. For example, you might hide a control by default, but configure another control that, when selected, triggers an event that displays the hidden control.

    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 Behaviors to a Form.

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

  4. Click Preview to try out using the control.

Note:

Using computed values or events, you can populate another control (for example, text area) with the contents of a rich text editor control along with all the HTML tags.

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. See Setting Up Navigation for a Multistep Web Form.

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 Creating 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 Populate Controls Using REST Calls.

    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 Behaviors to a Form.

  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.

Setting Up Navigation for a Multistep Web Form

Let’s set up navigation for a multistep web form using the Train control. To create a web form from scratch, see Creating Web Forms.

In this example, we’ll use a simple, two-step web form designed to receive feedback from users. When the form loads, you enter your basic details to begin with and then navigate to the next step to provide your feedback.

Now, let’s create and configure forms and controls to suit this example.

  1. Create a web form with two presentations, one to obtain basic details of the user and the other to receive feedback. Name these presentations, BasicDetails and Feedback.

    1. To the BasicDetails presentation, add three Input text controls and rename their labels to Name, Company, and Email.

    2. To the Feedback presentation, add a Text Area control and rename its label to Enter Feedback.

    3. Click Save.

  2. Now, create another web form, then drag and drop the Train control onto the form’s canvas. On the General tab, rename options names and values for the control as follows:

    Description of train-stops.png follows
    Description of the illustration train-stops.png

  3. From the Forms Palette, drag and drop the web form you created previously.

  4. Then, select the Train control to add an event.
    1. On the General tab, locate Events and click Add.

    2. Select On Change from the drop-down menu and click Edit.

  5. As illustrated in the following figure, define If-Else conditions in the event window to switch presentations of the embedded form according to train stop selections.

    Description of example-event-config.png follows
    Description of the illustration example-event-config.png

    Click OK to close the window.

  6. Click Preview to test the form.
    1. At the first train stop, you are presented with the fields to enter your details.

      Description of multistep-form-presentation1.png follows
      Description of the illustration multistep-form-presentation1.png

    2. Clicking on the second stop provides you with a space to enter your feedback and submit the form.

      Description of multistep-form-presentation2.png follows
      Description of the illustration multistep-form-presentation2.png

Configure Divider Controls

Use a divider control to separate related content within your form or to create logical breaks in your form's layout. For example, you might want to break up your form into sections or separate a related group of controls from the rest in the form.

To configure a divider control:
  1. From the Advanced Palette, drag the Divider control onto the canvas.
  2. Select the control.
  3. In the Properties pane, select the General tab and edit the properties.
    Field Description

    Name

    An internal identifier that you use to identify the control.

    Hide

    Set this property to hide the control. For example, you might hide a control by default, but configure another control that, when selected, triggers an event that displays the hidden control.

    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 Behaviors to a Form.

  4. On the Styling tab, edit the control's styling properties.
    • To specify the color of the divider control, use the Stroke Color property.
    • To specify the width of the divider control, use the Stroke Width property. You can enter standard values such as 0.05in, 0.2em, or 5px.

    See Styling Properties.

  5. To try out the control, click Preview.