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.
Topics:
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.
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.
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.
Upload and Preview a Base64 Image
You can embed Base64 encoded images in forms. They load quickly and are useful for email signatures.
- 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.
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.
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:
-
From the Advanced Palette, drag the Identity Browser control onto the canvas.
-
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 Behavior 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. -
On the Styling tab, edit the control's styling properties.
-
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:
-
Add an Identity Browser control to the form canvas.
-
Edit the control’s properties as required. Make sure to select the Multiple checkbox to allow multiple entries to the control.
-
Drag the Input text control onto the canvas. You may also use the Text Area control.
-
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 Behavior to a Form for details on creating events.
-
Select Identity Browser, and in the Properties pane's General tab, scroll down until you see Events.
-
Click Add
to define an event.
-
Select an event option, for example, On Change; this event is activated when an end user changes the control’s value.
-
After selecting the event option, click the editing icon next to the events drop-down menu to specify the action. An event window appears.
-
In the event window, click +Action to add an action.
A solid red Action indicator appears. Below it, configure the action.
-
In the Control Name field, select the control the action will affect, in this case select InputText.
-
In the Action field, select Value.
-
In the Type field select Control, and in the resulting Control Name field, select IdentityBrowser.
-
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.
-
Click OK, then Save.
-
-
Click Preview to test the controls.
-
On the Preview page, search for and select multiple identity objects in the Identity Browser control.
-
The Input text field is populated automatically with the list of user identities, that is, the data in the ID fields of these entries.
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.
Format the Title and Description of a Panel
Use a theme to format the title and description for a panel in your web form.
Indent Sections
Use a theme to indent the sections in your web form.
- From the Advanced Palette, drag and drop the Section control onto the canvas.
- Select the Section control on the canvas.
- In the Properties pane, select the Styling tab.
- 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.
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:
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.
- 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
to add columns. Edit the labels of each column in their respective label fields. To hide a particular column from users, click Hide 
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 Behavior 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. -
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:
-
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:
-
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:
-
From the Advanced Palette, drag the Rich Text Editor control onto the canvas.
-
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 Behavior to a Form.
-
On the Styling tab, edit the control's styling properties.
-
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:
-
From the Advanced Palette, drag the Train control onto the canvas.
-
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 Behavior to a Form.
-
-
On the Styling tab, edit the control's styling properties.
-
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.
-
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.
-
To the BasicDetails presentation, add three Input text controls and rename their labels to Name, Company, and Email.
-
To the Feedback presentation, add a Text Area control and rename its label to Enter Feedback.
-
Click Save.
-
-
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:
-
From the Forms Palette, drag and drop the web form you created previously.
-
Then, select the Train control to add an event.
-
On the General tab, locate Events and click Add.
-
Select On Change from the drop-down menu and click Edit.
-
-
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 the illustration example-event-config.pngClick OK to close the window.
-
Click Preview to test the form.
-
At the first train stop, you are presented with the fields to enter your details.
Description of the illustration multistep-form-presentation1.png -
Clicking on the second stop provides you with a space to enter your feedback and submit the form.
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.