Configuring Advanced Controls

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

Configuring 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.

    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.

    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 Adding 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.

Configuring 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 Adding 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.

Including Images

Use an image control to include an image to your web form. You can specify an absolute or a relative image URL using the Image URL property on the General tab.

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.

    Image URL

    Specify an image URL (absolute URL or relative URL).

    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 Adding 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.

Including 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 Adding 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.

Configuring 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 in the context of Oracle Process Cloud Service 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 Adding 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 Adding 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

Placing 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. From the Advanced Palette, 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) and an Add Tab option besides it. Add more tabs to your tab control by clicking Add Tab.

  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.

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

  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 panel, section or tab control.
  5. Configure general and styling properties for the controls inside your panel, section or tab control.

    See Configuring Basic Controls and Configuring Advanced Controls.

    Note:

    If you delete the panel, section or tab control, all the controls grouped under it get deleted.
  6. 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.

Configuring 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

    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 Populating 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 Adding Dynamic Behaviors to a Form.
  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 Configuring Basic Controls and Configuring 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.

Configuring 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 label of the columns in the column fields. Click the delete icon beside the column field 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 Populating Controls Using REST Calls.

    Events

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

  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 Positioning Controls on Forms.

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

    See Configuring Basic Controls and Configuring 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.