- Release Notes
- Project compatibility
- Form controls
- Form components
- Building your first forms
- Real Time Forms
- Updating form data
- Running forms using JavaScript
- Customizing Forms Using CSS
- Conditional components
- Adding multiple components on the same row in Columns
- Using the Data Table component
- Get File/Folder path
- Reading cell values from a Data Grid component
- Displaying PDF files
- Displaying images in forms
- Scrolling through Data Grids
- Using Dev Tools with forms
- Calculate form component values
- Managing dates in forms
- Opening hyperlinks inside forms
- Displaying a default tab in forms
- Displaying the full label of a component
- Searching long strings in drop-down lists
- About the pre 23.4 Form experience
- Project Compatibility
- Real Time Forms
- Dynamic Checkboxes
- Conditional Dropdowns
- Displaying a Default Tab
- Displaying Images
- Displaying PDF Files
- Displaying the Full Label
- Dynamic HTML Elements
- Managing Dates
- Searching Long Strings in Drop-downs
- Customizing Forms Using Local CSS Files
- Executing Do Block On Checkbox Change
- Customizing Columns Width
- Updating Form Data
- Resetting Collection Data
- Advanced Logic
- Executing Do Block on Dropdown Option Change
- Reading Cell Values From a Data Grid Component
- Conditional Components
- Scrolling Through Data Grid Components
- Using the Grid Component
- Dev Tools
- Calculated Value
- Dynamic Dropdowns
- Switching Tabs With Button Click
- Opening Hyperlinks Inside Form
- Release Notes
- Project Compatibility
- About the Persistence Activities Package
- Bulk Form Designer
- Start Job And Get Reference
- Wait for Job and Resume
- Add Queue Item And Get Reference
- Wait For Queue Item And Resume
- Wait for Form Task and Resume
- Resume After Delay
- Assign Tasks
- Create External Task
- Wait For External Task and Resume
- Complete Task
- Forward Task
- Get Form Tasks
- Get Task Data
- Add Task Comment
- Update Task Labels
- Building Your First Form Action
- Advanced Controls for Drop-downs
- Embedding Objects in Form Actions
- Allowing Users to Upload Files to the Storage Bucket
- Adding Advanced Logic Using Java Script
- Setting a Default Tab
- Removing the Delete button from Edit Grid using custom CSS
- Customizing Edit Grid templates
- Using buttons to trigger custom logic
- Using an External Form Layout
- Sample Workflows
- Release Notes
- About the System Activities Package
- Project Compatibility
- RegEx Builder Wizard
- Is Text Matching
- Find Matching Patterns
- Modify Text
- Modify Date
- Replace Matching Patterns
- Text to Left/Right
- Add Data Column
- Add Data Row
- Build Data Table
- Clear Data Table
- Get Row Item
- Update Row Item
- Merge Data Table
- Output Data Table
- Remove Data Column
- Remove Data Row
- For Each Row in Data Table
- Generate Data Table From Text
- Create List
- Append Item to List
- Read List Item
- Update List Item
- Add Log Fields
- Comment Out / Disabled Activities
- Comment
- Change Type
- Log Message
- Remove Log Fields
- Invoke Com Method
- Format Value
- Lookup Data Table
- Filter Data Table
- Sort Data Table
- Remove Duplicate Rows
- Join Data Tables
- Report Status
- Append Line
- Compress/Zip Files
- Copy File
- Copy Folder
- Create Folder
- Create File
- Delete
- File Exists
- Folder Exists
- Extract/Unzip Files
- Wait for Download
- File Change Trigger
- For Each File in Folder
- For Each Folder in Folder
- Delete File
- Delete Folder
- Move File
- Move Folder
- Rename Folder
- Rename File
- Path Exists
- Read Text File
- Write Text File
- Get File Info
- Get Folder Info
- Get Processes
- Get Username/Password
- Kill Process
- Beep
- Get Environment Folder
- Get Environment Variable
- Invoke Power Shell
- Input Dialog
- Message Box
- Browse for File
- Browse for Folder
- Invoke VBScript
- Process End Trigger
- Process Start Trigger
- File Change Trigger V3
- Trigger Scope
- Repeat Number of Times
- Text to Upper/Lowercase
- Set Environment Variable
- For Each
- Break / Exit Loop
- Retry Scope
- Check True
- Check False
- Workflow Placeholder
- Invoke Workflow File
- Launch Workflow Interactive
- Invoke Code
- Continue / Skip Current
- Multiple Assign
- Invoke Process
- Run Parallel Process
- While
- Do While
- Repeat Number Of Times
- Raise Alert
- Orchestrator HTTP Request
- Get Asset
- Get Credential / Get Orchestrator Credential
- Set Asset
- Set Credential
- Get Jobs
- Get Current Job Info
- Start Job
- Stop Job
- Add Queue Item
- Add Transaction Item
- Delete Queue Items
- Get Queue Items
- Get Transaction Item
- Postpone Transaction Item
- Set Transaction Progress
- Set Transaction Status
- Should Stop
- Wait Queue Item
- Bulk Add Queue Items
- Write Storage Text
- Upload Storage File
- List Storage Files
- Read Storage Text
- Download Storage File
- Delete Storage File
- Custom Input
- Append Item to Collection
- Build Collection
- Collection to Data Table
- Exists in Collection
- Filter Collection
- Merge Collections
- Remove From Collection
- Reset Timer
- Resume Timer
- Start Timer
- Stop Timer
- Timeout Scope
- Manual Trigger
- When New Item Added to Queue
- Stop Local Triggers
- Run Local Triggers
- Repeat Trigger
- Time Trigger
- Disable Local Trigger
- Enable Local Trigger
- Notify Global Variable Changed
- Global Variable Changed Trigger
- Extract Text
- Find and Replace
- Return
- Extract Date and Time from Text
- Change Case for Text
- Add or Subtract from Date
- Download file from URL
- Format Date as Text
- Split Text
- Combine text
- AddDataRow
- AddQueueItem
- AddTransactionItem
- AppendLine
- BulkAddQueueItems
- ClearDataTable
- CompressZipFiles
- CopyFile
- CreateFile
- CreateFolder
- DeleteFileOrFolder
- DeleteQueueItems
- DeleteStorageFile
- DownloadStorageFile
- ExtractUnzipFiles
- FilterDataTable
- GetAsset
- GetCredential
- GetJobs
- GetQueueItem
- GetQueueItems
- GetResourceForLocalPath
- GetRowItem
- GetTransactionItem
- InvokeProcess
- JoinDataTables
- ListStorageFiles
- LookUpDataTable
- MergeDataTable
- MoveFile
- OrchestratorHTTPRequest
- OutputDataTable
- PathExists
- PostponeTransactionItem
- ReadStorageText
- ReadTextFile
- RemoveDataColumn
- RemoveDuplicateRows
- Replace
- SetAsset
- SetCredential
- SetTransactionProgress
- SetTransactionStatus
- SortDataTable
- StartJob
- StopJob
- UpdateRowItem
- UploadStorageFile
- WaitQueueItem
- WriteStorageText
- WriteTextFile
- Release Notes
- Project Compatibility
- About the Testing Activities Package
- Project Settings
- Add Test Data Queue Item
- Address
- Attach Document
- Bulk Add Test Data Queue Items
- Delete Test Data Queue Items
- Get Test Data Queue Item
- Get Test Data Queue Items
- Given Name
- Last Name
- Random Date
- Random Number
- Random String
- Random Value
- Verify Control Attribute
- Verify Expression
- Verify Expression With Operator
- Verify Range
- Testing how-to guides
Form components
Form components provide you with the ability to collect various kinds of data. To create a custom form, drag the desired UI components into the form and arrange them to the logic of your use-case.
(Preview)
The form components are available in the Components
panel.
String,
Double
or SecureString
. However, there are some form components
that do not have a standard data type associated with them. In these cases, there are two
possible behaviors:
- The form component may be hidden at runtime, meaning it will not be displayed to the end-user when the form is rendered. For example, this behavior applies for the HTML Element.
- Secondly, the form component may not have a data type itself, but instead contains other form components that do have specific data types. In this case, the form component serves as a container or wrapper for the other components, allowing them to be grouped together in a logical manner.
Basic Components
Text Field
Data type:
String
You can use the Text Field component to input short text.
Text Area
Data type:
String
You can use the Text Area component to input long text. The Text Area component offers multi-line input.
The Rows setting allows you to set how many rows are visible in the Text Area component.
Number
Data type:
System.Double
You can use the Number component to input any number value.
- Use Thousands Separator - separates thousands with a comma.
- Require Decimal - always shows decimals, even if 0.
- Decimal Places - sets the maximum number of decimals displaying.
Password
Data type:
System.Security.SecureString
You can use the Password component to input passwords. The text is displayed as asterisks instead of the actual value entered for secrecy.
Checkbox
Data type:
Boolean
You can use the Checkbox component to input boolean values (true or false).
Select Boxes
Data type:
System.Collections.Generic.IEnumerable<System.String>
You can use the Select Boxes component to allow users to choose multiple values from a list.
Values - allows you to add options to your Select Box component. The column is the value visible to users. The Value column is the name stored in the data.
You can pass or retrieve values from a Select Boxes component, using the Set Form Values and Get Form Values activities. To do this, assign the value of the argument as a variable of type List
.
Label/Header
Data type:
String
You can use the Label/Header component to add labels to other form components. You can also use it to separate sections in your form.
- Label Size - choose a size or type for the Label/Header component from the dropdown list.
Drop-down List
Data type:
String
You can use the Drop-down List component to display lists in a dropdown format.
- Widget Type - select the type of widget you want to use.
-
Data Source Values - input the values that appear in the dropdown list. The Label column is the value visible to users. The Value column is the name stored in the data.
- Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in
the dropdown list, through the
item
variable. For example, useitem.label
to access a certain value in the dropdown list - Refresh Options On - refreshes data when another field changes.
- Refresh Options On Blur - refreshes data when another field is blurred.
- Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.
- Read Only Value - only show the value when in Read-Only mode.
- Choice.js options - input raw JSON object to use as options for the Select component.
- Use exact search - disables search algorithm threshold.
- Custom Default Value - create a custom default value using JavaScript or JSONLogic.
Radio
Data type:
String
You can use the Radio component to allow users to choose only one value from a list.
- Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.
Button
Data type:
String
You can use the Button component to allow users to perform various actions in the form.
-
Action - select the action you want the button to perform:
- Submit - submits the form.
- Click - performs the click operation.
- Reset Form - resets the form fields.
- Event - when a user clicks the button, a certain event starts running. When selecting Event you need to input the event in the Button Event field.
- Theme - choose the color theme of the button from the drop-down list.
- Size - choose the size of the button from the drop-down list.
- Block Button - stretches to the full width of the bounding container.
- Left / Right Icon - add the full icon class string, to show a specific icon. For example, you can add
fa fa-plus
.
Advanced Components
HTML Element
You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.
- HTML Tag - The tag of the HTML Element.
- CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
- Attributes - The attributes for the HTML Element. Only safe attributes are allowed, such as:
src
,href
, andtitle
. - Content - the content of the HTML Element.
- Refresh On Change - re-renders the HTML Element whenever a value changes in the form.
To display images forms, you need to use the HTML Element component. Check out the following tutorial Displaying Images.
For PDF files, you can only display them when you create a custom HTML form.
Content
You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the workflow.
- Refresh On Change - renders the Content component each time a value in the form changes.
Data type:
String
You can use the Email component to add a field for inputting email addresses.
Url
Data type:
System.Uri
You can use the Url component to add a field for inputting url addresses, ensuring they're in the correct format.
Phone Number
Data type:
String
You can use the Phone Number component to add a field for inputting phone numbers.
- Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is
(999) 999-9999
. - 9 - numeric
- a - alphabetical
- ** \* ** - alphanumeric
- Input Mask Placeholder Char - You can use a character as a placeholder in the field. For
example, you can use a hyphen (-).
Date/Time
Data type:
String
You can use the Date/Time component to input dates, times, or input both.
- Format - the format used for displaying the datetime value.
- Enable Date Input - allows users to input dates for this field.
- Use Input to add moment.js for minDate - enables the user to use an input for the
minDate
moment function, instead of a calendar. - Use calendar to set minDate - enables the user to use a calendar to set the
minDate
. - Use Input to add moment.js for maxDate - enables the user to use an input for
maxDate
moment function, instead of a calendar. - Use calendar to set maxDate - enables the user to use a calendar to set the
maxDate
. - Disable specific dates or dates by range - add dates that you want to ban. For example,
2027-08-11
. - Custom Disabled Dates - allows you to ban certain dates using a customized function.
- Disable weekends - allows you to ban weekends.
- Disable weekdays - allows you to ban weekdays.
- Enable Time Input - allows users to input time for this field.
- Hour Step Size - the number of hours that have to be incremented or decremented in the time picker.
- Minute Step Size - the number of minutes that have to be incremented or decremented in the time picker.
- 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or PM.
-
Default Date - sets the default value to a specific date using Moment.js functions. For example, you can use the following function:
moment().substract(10, 'days')
.
Day
Data type:
System.DateOnly
You can use the Day component to ask for input for Day,Month, and Year, either through a number-type field or a select-type field.
- Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.
Minimum / Maximum Year - choose the minimum / maximum year that can be entered.
- Require Day - the Day field must be filled in before the form renders.
- Require Month - the Month field must be filled in before the form renders.
- Require Year - the Year field must be filled in before the form renders.
-
Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use
moment().add(10, 'days')
.
Time
Data type:
System.TimeOnly
You can use the Time component to input time in different formats.
- Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).
Currency
Data type:
System.Double
You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.
- Currency - choose a certain currency from the drop-down list.
Survey
Data type:
System.Collections.Generic.Dictionary<System.String,System.String>
You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.
- Questions - add the questions that the users should answer.
- Values - add the options that the user can select per question.
Layout components
Columns
You can use the Columns component to display other components in line, grouping them as columns.
When configuring the Size parameter, you have the option to select the desired screen width for displaying the columns using Bootstrap grid classes:
-
xs - phones (less than 768px)
-
sm - tablets (equal to or greater than 768px)
-
md - small laptops (equal to or greater than 992px)
-
lg - laptops and desktops (equal to or greater than 1200px)
-
xl - large monitors (equal to or greater than 1200px)
- Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
- Auto adjust columns - automatically adjusts columns, if there are hidden nested components.
Panel
You can use the Panel component to group components and add them inside a named panel.
- Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.
- Collapsible - allows you to collapse the panel.
- Initially Collapsed - the property is available only when Collapsible is checked. Collapses the panel when the form has loaded.
Table
You can use the Table component to create a table that holds other form components inside the columns and rows of the table.
- Number of Rows / Columns - enter the number of rows or columns that you want to be displayed in the table.
- Clone Row Components - clones the components inside rows and adds them in the remaining rows, too. You can use it when creating tables with multiple rows, that contain the same content.
- Cell Alignment- choose the horizontal alignment of the cells in the table.
- Striped - adds striped shading to rows.
- Bordered - adds visible borders to the table.
- Hover - highlights row when hovering the mouse over it.
- Condensed - condenses the size of the table.
Tabs
You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.
The Tabs setting allows you to add, configure, reorder, and remove tabs.
Data
Hidden
You can use the Hidden component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.
Container
You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance
submits as:
{
data: {
financialPerformance {
grossProfitMargin: "0.83",
[tab]netProfitMargin: "0.43"
}
}
}
{
data: {
financialPerformance {
grossProfitMargin: "0.83",
[tab]netProfitMargin: "0.43"
}
}
}
Data Map
Data type:
System.Collections.Generic.Dictionary<System.String,System.String>
- Label for Key column - set a label to show for the Key column. If left empty, the name of the column stays as Key.
- Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form shows.
- Show Key Column Before Value - select if you want the Key column to show before the Value column.
- Add Another Text - set the text to display for the Add Another button.
- HTML Attributes - add custom HTML attributes to the component.
Note: Attributes from other components dominate the attributes that you configure.
- PDF Overlay - apply styling settings to PDF forms.
To learn how to use the Data Map component check out the Using the Data Map component tutorial.
Data Grid
You can use the Data Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the Data Grid to match your use case.
In the Form Renderer window, the rows inside the Data Grid component can be added or removed.
- Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
- Allow Reorder - reorder rows by dragging and dropping them.
- Equal Column Width - makes the widths of columns equal.
- Enable Row Groups - allows separating rows into groups. Add groups, label them, and select the rows for each group.
- Initialize Empty - the Data Grid will have no visible rows when initialized.
Edit Grid
You can use the Edit Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the Edit Grid, to capture loads of data.
When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.
- Open First Row when Empty - opens the first row when the Edit Grid is empty.
- Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form shows.
- Add Another Text - changes the name of the Add Another button.
- Save Row Text - changes the text of the Save Row button.
- Remove Row Text - changes the text of the Remove Row button.
The Templates tab is specific to the Edit Grid component only. The Header,Row, and Footer Templates allow you to customize the grid using JavaScript. You can modify what type of components display in the rows within a grid or the look of the header / footer.
Header Template
This is the Lodash Template used to render the header of the Edit Grid component.
There are two variables available:
- value - the array of row data.
- components - the array of components in the grid.
Row Template
This is the Lodash Template used to render each row of the Edit Grid component.
There are three variables available:
- row - object of one row's data.
- components - the array of components in the grid.
- state - current row's state (draft/saved).
To add Click type events, add the following classes to elements: editRow
and removeRow
.
Footer Template
This is the Lodash Template used to render the footer of the Edit Grid component.
There are two variables available:
- value - the array of row data.
- components - the array of components in the grid.
Data Table
You can use the Data Table component to render multiple rows of data, similar to a data table. Data Table is a read-only component that you can use to display large amounts of data. You can drag and drop multiple form components into the Data Table component.
- Sortable - sort data inside columns in ascending or descending order. You sort the data at runtime.
- Filterable - filter data inside each column. Filter the data at runtime.
- Column(s) Resizable - change the width of the columns at runtime. The Column(s) Resizable capability allows you to see the data inside columns better.
-
Pagination - display the data of the Data Table component on pages that are numbered. The pagination capability also includes setting the number of items per page.
- Inline editing - allow editing at runtime, similarly to how you would do it in Excel.
Sortable
You can sort data inside columns in ascending or descending order. You sort the data at runtime, in the form.
The data in the Data Table is displayed in the same order as in the input data table. To sort all data in the Data Table, click any column header in the form.
- First click sorts the data in ascending order.
- Second click sorts the data in descending order.
-
Third click restores the original order.
Filterable
You can filter data inside each column. You can filter the data while the form is showing.
To filter data in a column:
- Hover over the column header and click the triple bar
menu.
- Choose a filtering operation.
- Input a value in the Filter field of the triple bar menu. The input value in the Filter field is a condition for the filtering operation.
Based on the type of data, the following filter operations are available:
Filter operation |
Text |
Number |
Date/Time |
---|---|---|---|
Contains |
|
|
|
Not contains |
![]() |
|
|
Equals |
![]() |
![]() |
|
Not equal |
|
|
|
Starts with |
|
|
|
Ends with |
|
|
|
Less than |
|
|
|
Less than or equals |
|
![]() |
|
Greater than |
|
|
|
Greater than or equals |
|
|
|
In range |
|
|
![]() |
Blank |
|
|
|
Not blank |
![]() |
![]() |
![]() |
For all filtering operations applied on Text and Number data, you can add an additional filtering operation, using the operators:
- AND - displays data if both filter operations are true.
- OR - displays data if any of the filter operations is true.
Column(s) Resizable
You can change the width of the columns at runtime. The Column(s) Resizable capability allows you to see the data inside columns better.
To resize columns, hover your cursor over the border that separates the columns, until the two-way arrow appears. Drag the border until you get the desired column width.
Pagination
You can display the data of the Data Table component on pages that are numbered. The Pagination capability also includes setting the number of items per page.
To set the number of items per page: go to the Display tab of the Data Table component and choose a value from the Items per page dropdown list. You can choose to display 10
, 50
or 100
items per page.
At the bottom of the form, at runtime you can view:
- The number of rows in the page that you are on.
- The total number of rows in the data table.
- The page number you are on out of the total number of pages in the grid.
You can browse through the pages by clicking the < > arrows or you can get to the first page by clicking the arrow and last page by clicking the
arrow.
Inline editing
You can edit any field inside the Data Table by double-clicking it, making whatever changes, and then pressing Enter.
To learn how to use the Data Table component, see Using the Data Table component.