Subscribe

UiPath Activities

The UiPath Activities Guide

Customizing Forms Using Local CSS Files

Overview


The LocalCSSFilePath field of the Create Form activity comes to greet the necessity of customizing the form to your preference.

📘

Note:

The LocalCSSFilePath property is available starting with version 1.3.0 of the UiPath.Form.Activities pack.

Tutorial


There are some things you should consider while using the local CSS file:

  • The global styles apply immediately after setting the CSS file path.
  • Specific component styles must be configured as classes. Use a relevant name. (for example, .username-label or .submitButton-color).
  • Form preview doesn't display the style changes when you set the CSS file path as a variable. To preview the changes, use hardcoded values for the path of your CSS file.

To design the form with specific appearance requirements:

  1. Create a CSS file containing your style settings and save it on your local device. For example, to modify the label colors and to add a custom background to the form, we created the following CSS file:
body {
    background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.lastname-label
{
   color : red;
   font-size : 15px;
   font-weight : 10px;
}
.firstname-label
{
   color : green;
   font-size : 17px;
   font-weight : 30px;
}
.city-label
{
   color : blue;
   font-size : 19px;
   font-weight : 50px;
}
.eligible-label
{
   color : purple;
   font-size : 12px;
   font-weight : 30px;
}
  1. In the Create Form activity > Format property > LocalCSSFilePath, input the path to the CSS file (for example, "/file://C:\C:\User\theCssFile.css").
    You may also store the path to the local CSS file as a variable, and input the variable name in the LocalCSSFilePath field.
  1. Open the Form Designer and navigate to the component targeted by your customization.
  2. In the Display tab of the targeted component > Custom CSS Class field, write the name of the custom CSS class configured in the file. This binds the data in the CSS file to your form. For example, to customize the label for the City drop-down, input the corresponding CSS class city-label.
  1. Save the component.
  2. Repeat steps 3 to 5 for every component you need to customize using your local CSS file.
  3. Save the form.

Sample Workflow


To check the complete workflow or to have a future reference, download the XAML example below.

Updated about a month ago


Customizing Forms Using Local CSS Files


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.