- Overview
- Callout
- Complex Scenarios
- Credentials
- Data Service
- Form
- Release notes
- Project compatibility
- 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
- FTP
- IPC
- Persistence
- Release notes
- Project compatibility
- About the Persistence activity 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
- Create App Task
- Wait for App Task and Resume
- Working with App tasks
- 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
- Dynamically expanding form components at runtime
- Sample Workflows
- Automation Ops Pipelines
- System
- Release notes
- About the System activity 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
- Testing
- Release notes
- Project compatibility
- About the Testing activity 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
- Address
- AddTestDataQueueItem
- AttachDocument
- BulkAddTestDataQueueItems
- DeleteTestDataQueueItems
- GetTestDataQueueItem
- GetTestDataQueueItems
- GivenName
- LastName
- RandomDate
- RandomNumber
- RandomString
- RandomValue
- VerifyAreEqual
- VerifyAreNotEqual
- VerifyContains
- VerifyExpression
- VerifyExpressionWithOperator
- VerifyIsGreater
- VerifyIsGreaterOrEqual
- VerifyIsLess
- VerifyIsLessOrEqual
- VerifyIsRegexMatch
- VerifyRange
- Workflow Events
- Workflow Foundation
Customizing Columns Width
Tables in your form sometimes need wider or narrower columns, rather than columns with the same width. You can set a custom width for tables in Edit Grid and Data Grid components.
Column3
in
a table saved as myTable
.
Building the Data Table
To create a table to use inside your form:
- Inside your workflow, add the Build Data Table activity.
- Click DataTable... . The Build Data Table wizard opens.
-
Add the desired columns for your table and edit their properties.
Make sure the columns name have no spaces or special characters, as you use these names to link the columns in the form through the Field Key component tab.
- Click OK to save the table.
-
In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example,
myTable
).You use this variable to bind the table to the form through the FormFieldsCollection property of the Create Form activity.
To bind the data table to your form:
- Add the Create Form activity in your workflow.
- In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.
-
Create an argument and link it to the previously created table using the variable (i.e.,
myTable
). Set the argument Direction toIn/Out
and the Type toDataTable
. Give a Name to your argument, for exampletable
.
-
Click OK.
Make sure that GenerateInputFields box is unchecked.
- Open the Form Designer from the Create Form activity.
- From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).
-
In the Field Key tab of your grid, reference the table argument (i.e.,
table
).The Field Key value is case sensitive.
-
Add text components into your grid to replicate the columns in your table. Save each text component.
For example, if your table has three columns calledColumn1
,Column2
, andColumn3
, drag and drop three text components into your grid, and make sure to use the column names from the table into the components Field Key tab.The Field Key value is case sensitive.
- Save the form.
Using Bootsrap 3
- Go to the Edit Grid Component settings .
-
In the Templates tab > Header Template section, change the default generated code with the following template:
<div class="row"> {% util.eachComponent(components, function(component) { %} {% if (displayValue(component)) { %} {% if (component.key=== 'Column3') { %} <div class="col-sm-8"> {% } %} {% if (component.key !== 'Column3') { %} <div class="col-sm-2"> {% } %} {{ component.label }}</div> {% } %} {% }) %} </div>
<div class="row"> {% util.eachComponent(components, function(component) { %} {% if (displayValue(component)) { %} {% if (component.key=== 'Column3') { %} <div class="col-sm-8"> {% } %} {% if (component.key !== 'Column3') { %} <div class="col-sm-2"> {% } %} {{ component.label }}</div> {% } %} {% }) %} </div> -
In the Templates tab > Row Template section, change the default generated code with the following template:
<div class="row"> {% util.eachComponent(components, function(component) { %} {% if (!component.hasOwnProperty('tableView') || component.tableView) { %} {% if (component.key=== 'Column3') { %} <div class="col-sm-8"> {% } %} {% if (component.key !== 'Column3') { %} <div class="col-sm-2"> {% } %} {{ getView(component, row[component.key]) }} </div> {% } %} {% }) %} {% if (!instance.options.readOnly && !instance.disabled) { %} <div class="col-sm-2"> <div class="btn-group pull-right"> <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button> {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %} <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button> {% } %} </div> </div> {% } %} </div>
<div class="row"> {% util.eachComponent(components, function(component) { %} {% if (!component.hasOwnProperty('tableView') || component.tableView) { %} {% if (component.key=== 'Column3') { %} <div class="col-sm-8"> {% } %} {% if (component.key !== 'Column3') { %} <div class="col-sm-2"> {% } %} {{ getView(component, row[component.key]) }} </div> {% } %} {% }) %} {% if (!instance.options.readOnly && !instance.disabled) { %} <div class="col-sm-2"> <div class="btn-group pull-right"> <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button> {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %} <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button> {% } %} </div> </div> {% } %} </div>Note:- Notice that you compare the
component.key
value to the exact name of the column, which is the same one used in the Field Key tab of each text component (step 4 in binding the data table to Edit Grid or Data Grid components). - UiPath Forms are using the
Bootstrap 3 framework. The total width of the table is divided into 12 sections.
Therefore, make sure that any division you make, it adds up to 12. In this example,
two columns with
col-sm-2
class take up 4 sections, leaving the remaining 8 for the third column (col-sm-8
).
- Notice that you compare the
Using Style property
- Hover over the Edit Grid component and click Edit. The configuration page opens.
-
Navigate to the Templates tab.
2.1. In the Header Template script, identify all<div class="col-sm-2">
tags and add your custom width as follows:style="width:{your_custom_width}px !important"
. The width must be expressed in pixels.2.2. In the Row Template script, identify all<div class="col-sm-2">
tags and add your custom width as follows:style="width:{your_custom_width}px !important"
. The width must be expressed in pixels.The"col-sm-2"
element represents the default column width. You can modify the default column width by adding a customized style tag. For examplestyle="width:70px !important"
applies a width of 70 pixels to all Edit Grid columns.
- Save your component and the form.
-
Create a local CSS file with the desired column widths. In our example, the following template creates a wider
Column3
(i.e.,nth-child(3)
):.mygrid tbody>tr>:nth-child(1){ width: 70px; } .mygrid tbody>tr>:nth-child(2){ width: 15%; } .mygrid tbody>tr>:nth-child(3){ width: 60%; }
.mygrid tbody>tr>:nth-child(1){ width: 70px; } .mygrid tbody>tr>:nth-child(2){ width: 15%; } .mygrid tbody>tr>:nth-child(3){ width: 60%; } - In the Properties panel >
LocalCSSFilePath field of the Create Form activity, reference the
previously created CSS file. For
example,
"/file://C:\User\Desktop\EditColumnWidth.css"
. - In the Data Grid component >
Display tab > Custom CSS Class field, enter the name of the CSS class
(for example,
mygrid
).
To check the complete workflows or to have a future reference, download the XAML examples