Customizing Forms Using Local CSS Files

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

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.

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

Tutorial

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;
   }

2. In the Create Form activity > Format property > LocalCSSFilePath, input the path to the CSS file (for example, "/file://C:\User heCssFile.css").

   You may also store the path to the local CSS file as a variable, and input the variable name in the LocalCSSFilePath field.

   
   

   

   
   
3. Open the Form Designer and navigate to the component targeted by your customization.
4. 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.
   
   

   

   
   
5. Save the component.
6. Repeat steps 3 to 5 for every component you need to customize using your local CSS file.
7. Save the form.

Sample workflow

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