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 Event Trigger, Get Form Values, Set Form Values |
| Updating form data | Change form values at runtime, while the form is showing. | Show Form, Form Event Trigger, 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 Event Trigger, 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 Event Trigger, 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 Event Trigger, 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 Event Trigger |
| 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 Event Trigger |
| 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 |