Form how-to guides

This page includes guides and resources that can help you learn how to create automations using the activities in this package.

The current form experience can be used starting with Studio 2023.4 and Form.Activities 23.4.3.

Tutorials

Step-by-step guides on how to create automations from scratch. Each tutorial includes a project that you can download and open in UiPath Studio.

Tutorial	Description	Activities
Real Time Forms	Change values inside a form while the form is displaying.	Show Form, Form trigger activity, Get Form Values, Set Form Values
Updating form data	Change form values at runtime, while the form is showing.	Show Form, Form trigger activity, Get Form Values, Set Form Values
Design forms using custom HTML	Create and display a simple form using an HTML file. This form displays a short message, two buttons, and the live date and time when the user interacts with the form.	Show Form, Form trigger activity, Close form
Running forms using JavaScript	Display a simple JavaScript alert while a form is showing.	Show Form, Run Form Script
Customizing Forms Using CSS	Set a different background color for components inside the form.	Show Form
Conditional components	Apply conditions to components that show at runtime.	Show Form
Summing up two text fields dynamically	Create an advanced logic that sums up two text fields, based on the condition that the user interacts with the corresponding text fields.	Show Form
Hiding a field dynamically	Create an advanced logic that hides a form field when the user inputs "hide" in another form field.	Show Form
Changing the title color dynamically	Create an advanced logic that changes the label color of a text field component when the user select the desired color from a list. The change applies using a custom CSS file.	Show Form
Working with Data Map	Pass data to a Data Map, update it dynamically while the form is displayed, and extract the data.	Show Form, Form trigger activity, Get Form Values, Set Form Values
Working with Data Grid	Pass data into the Data Grid, update it in real-time, and extract the information. The tutorial utilizes a CSV file for data input into the Data Grid.	Show Form, Form trigger activity, Get Form Values, Set Form Values
Adding multiple components on the same row in Columns	Display multiple components in one line, and generated across multiple rows.	Show Form
Using the Data Table component	Bind a data table variable to a Data Table component, display it, and edit it at runtime.	Show Form
Get File/Folder path	Prompt a user to browse for a file or folder path and then add it inside a form field.	Show Form, Form trigger activity
Reading cell values from a Data Grid component	Dynamically sum all values in a Data Grid column.	Show Form
Displaying PDF files	Display a local PDF file.	Show Form
Displaying images in forms	Display an image inside a form through embedding the image inside the form. For Base64 images you display them using custom JavaScript.	Show Form
Scrolling through Data Grids	Scroll through the Data Grid, and make the components inside of it wider, so the content becomes more readable.	Show Form
Using Dev Tools with forms	Experiment with CSS styles in Dev Tools. This example shows how to change the color of all Text Field titles inside a Data Grid.	Show Form
Calculate form component values	Calculate the values of form components.	Show Form
Customizing columns width in data components	Adjust the width of a column inside a grid component and make the content inside of it readable, you can use custom CSS or configure certain properties of the components.	Show Form
Managing dates in forms	Make one or more specific dates unavailable for selection within the form, set a relative minimum or maximum date inside a Day/Time component.	Show Form
Opening hyperlinks inside forms	Use form triggers to open a certain hyperlink while the form is still showing.	Show Form, Form trigger activity
Displaying a default tab in forms	Specify which tab to be displayed by default upon opening the form.	Show Form
Displaying the full label of a component	Display the full length of a label on multiple lines, in cases where you use the Label field to enter a large description.	Show Form
Searching long strings in drop-down lists	Find the drop-down label containing a string starting with the 27th character.	Show Form