- 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
- Get App Tasks
- Add Task Comment
- Update Task Labels
- Create App Task
- Wait For App Task And Resume
- Configure task timer
- 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
- Aligning the content of a form component from left to right using JSON attributes
- Sample Workflows
- Automation Ops Pipelines
- System
- Release notes
- About the System activity package
- Project compatibility
- Supported character encoding
- RegEx Builder Wizard
- Add Data Column
- Add Data Row
- Add Log Fields
- Add or Subtract from Date
- Add Transaction Item
- Add Queue Item
- Append Item to Collection
- Append Item to List
- Append Line
- Beep
- Break / Exit Loop
- Browse for File
- Browse for Folder
- Build Collection
- Build Data Table
- Bulk Add Queue Items
- Change Case for Text
- Change Type
- Check False
- Check True
- Clear Data Table
- Collection to Data Table
- Comment
- Compress/Zip Files
- Copy File
- Copy Folder
- Combine text
- Comment Out / Disabled Activities
- Continue / Skip Current
- Create File
- Create Folder
- Create List
- Custom Input
- Delete
- Delete File
- Delete Folder
- Delete Storage File
- Delete Queue Items
- Disable Local Trigger
- Do While
- Download file from URL
- Download Storage File
- Enable Local Trigger
- Evaluate Business Rule
- Exists in Collection
- Extract/Unzip Files
- Extract Date and Time from Text
- Extract Text
- File Change Trigger
- File Exists
- Filter Collection
- Filter Data Table
- Folder Exists
- For Each
- For Each File in Folder
- File Change Trigger V3
- Find and Replace
- Find Matching Patterns
- For Each Folder in Folder
- For Each Row in Data Table
- Format Date as Text
- Format Value
- Generate Data Table From Text
- Get Asset
- Get Credential / Get Orchestrator Credential
- Get Current Job Info
- Get Environment Folder
- Get Environment Variable
- Get File Info
- Get Folder Info
- Get Jobs
- Get Processes
- Get Row Item
- Get Transaction Item
- Get Username/Password
- Get Queue Items
- Global Variable Changed Trigger
- Input Dialog
- Invoke Code
- Invoke Com Method
- Invoke Power Shell
- Invoke Process
- Invoke VBScript
- Invoke Workflow File
- Is Text Matching
- Join Data Tables
- Kill Process
- Launch Workflow Interactive
- List Storage Files
- Log Message
- Lookup Data Table
- Manual Trigger
- Merge Collections
- Merge Data Table
- Message Box
- Modify Date
- Modify Text
- Move File
- Move Folder
- Multiple Assign
- New Item Added to Queue
- Notify Global Variable Changed
- Orchestrator HTTP Request
- Output Data Table
- Path Exists
- Postpone Transaction Item
- Process End Trigger
- Process Start Trigger
- Raise Alert
- Read List Item
- Read Text File
- Read Storage Text
- Remove Data Column
- Remove Data Row
- Remove Duplicate Rows
- Remove From Collection
- Remove Log Fields
- Replace Matching Patterns
- Repeat Number of Times
- Repeat Trigger
- Rename File
- Rename Folder
- Report Status
- Reset Timer
- Resume Timer
- Retry Scope
- Return
- Run Local Triggers
- Run Parallel Process
- Set Asset
- Set Credential
- Set Environment Variable
- Set Transaction Progress
- Set Transaction Status
- Should Stop
- Split Text
- Sort Data Table
- Start Timer
- Start Job
- Stop Job
- Stop Local Triggers
- Stop Timer
- Text to Left/Right
- Text to Upper/Lowercase
- Time Trigger
- Trigger Scope
- Timeout Scope
- Update Row Item
- Update List Item
- Upload Storage File
- Wait for Download
- Wait Queue Item
- While
- Workflow Placeholder
- Write Storage Text
- Write Text File
- 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
- About the Testing activity package
- Project compatibility
- Project Settings
- Add Test Data Queue Item
- Address
- Attach Document
- Bulk Add Test Data Queue Items
- Create Comparison Rule
- 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 Documents Equivalence
- Verify Expression
- Verify Expression With Operator
- Verify Range
- Verify Text Equivalence
- 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
Embedding Objects in Form Actions
You can design your Form Actions to display images or PDF files, to simply customize the look with logos and icons, or to provide materials that can help your Action Center users in completing the Action.
This feature is available with the Create Form Task activity only.
To embed objects, you use the properties under the Storage section of the Create Form Task activity to link to a Storage Bucket and the Upload Storage File activity to add files.
You can embed any type of object that is supported by storage buckets.
The video below shows how an embedded PDF file behaves in Action Center:
Prerequisites
To use the capabilities of embedding objects in Form Actions, users need the following permissions:
User type |
Permissions |
---|---|
Action Center user |
This user needs the following permissions at folder level: View for Storage Bucket and View for Storage File. |
Robot user |
This user needs the following permissions at folder level: View and Edit for Storage Bucket, and View and Create for Storage File. |
For your Action Center users to experience better performance, we recommend that you embed images that were previously uploaded to a Storage Bucket.
To embed an image in a Form Action:
- Use activities, such as the
Upload Storage File activity, to upload the image to the storage
bucket that is used by the Create Form Task activity. As part of this
step, create a
String
variable to store the path where the file is uploaded, for exampleimagePath
.Important: The storage bucket upload converts the+
sign into a space, which can result in an error during form rendering. - In the Create Form Task
activity, click the ellipsis (
...
) to the right of FormData and add an argument with the_storage
keyword as a suffix:- Name:
image_storage
. - Direction: In.
- Type: String.
- Value:
imagePath
.
Note: The_storage
keyword is used to indicate that this is an object that is available in the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded image.Tip: For images smaller than 2 KB, such as logos or icons, you can skip this step. In the following step where theimage_storage
argument is used, use theimagePath
variable instead. - Name:
- Add an HTML Element
component and configure it as follows:
- HTML Tag:
div
. - Content:
<img src="{{ data.image_storage }}" />
. This maps the storage file argument to the form component. Using the<img>
tag displays the image in the form. Alternatively, you can use<a src="{{ data.image_storage }}" target=_blank>
to add a link that opens the image in a new window. - Refresh On Change: selected.
Note: You can add links to specific files by referencing them in the<a href="https://link-to-file"></a>
tag. You can ignore any validation errors that appear on the Content field, they do not affect form rendering at runtime. - HTML Tag:
- Convert the
TIFF
files toJPEG
orPNG
before uploading it to a storage bucket, using custom activities inside the workflow that you are working with. - Reference the file inside the
storage bucket, using a
<href>
tag.
To follow the steps of the tutorial and try it out yourself, download the sample workflow.
Embedding a PDF file from a storage bucket is different for regular forms, than for advanced forms. Advanced forms offer an improved rendering performance and advanced usage of the components and their logic. You can create advanced forms by selecting Enable Advanced Forms in the Create Form Task activity.
You can also add PDF files that were uploaded to a storage bucket to a Form Action so that your Action Center users can review it.
To embed a PDF in a regular form task:
- Use activities, such as the
Upload Storage File activity, to upload the PDF file to the storage
bucket that is used by the Create Form Task activity. As part of this
step, create a
String
variable to store the path where the file is uploaded, for exampledocPath
. -
In the Create Form Task activity, click the ellipsis (
...
) to the right of FormData and add an argument with the_storage
keyword as a suffix:- Name:
doc_storage
. - Direction: In.
- Type: String.
-
Value:
docPath
.Important: The_storage
keyword is used to indicate that this is an object that is available inside the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded PDF file.
- Name:
-
Add an HTML Element component to the form and specify the following:
- HTML Tag:
div
. - Content:
<embed src={{ data.doc_storage }} width="600px" height="500px"></embed>
. - Refresh On Change: cleared.
- HTML Tag:
- Save your changes and close the component window, to return to the Form Designer window.
- Click the Edit JSON icon for the HTML Element.
- Under the Component JSON,
search for
"refreshOn"
and set its value to the form data attribute, so that you have"refreshOn": "doc_storage"
. -
Make sure the text which gets auto-generated for the
_storage
field is available in the form. It can be marked as a hidden field.Important: If you use UiPath.FormActivitiyLibrary v1.1.10, notice that the Component JSON doesn't list the"refreshOn"
option. However, you can manually add the"refreshOn"
key and set its value as mentioned above.
Download this example here.
To embed a PDF in an advanced form task:
- Use activities, such as the
Upload Storage File activity, to upload the PDF file to the storage
bucket that is used by the Create Form Task activity. Specify the path of
the file in the Path field of the Upload Storage File activity.
For this example, input
sample.pdf
. - In the Create Form Task activity, click the ellipsis
(
...
) to the right of FormData and add an argument with the following configurations:- Key:
pdf
. - Direction: In.
- Type: String.
- Value:
"sample.pdf"
.
- Key:
- Add a PDF component to the form and specify the name of the argument
added previously as the Property Name. For this example, specify
pdf
. - Save your changes and close the component window, to return to the Form Designer window.
Download this example here.