Personalizar formularios usando archivos CSS locales

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

Hay algunas cuestiones que debe tener en cuenta al utilizar el archivo CSS local:

• Los estilos globales se aplican inmediatamente después de establecer la ruta del archivo CSS.
• Los estilos de componentes específicos deben configurarse como clases. Utilice un nombre relevante. (por ejemplo, .username-label o .submitButton-color).
• La vista previa del formulario no muestra los cambios de estilo cuando se establece la ruta del archivo CSS como variable. Para previsualizar los cambios, utiliza valores codificados para la ruta de tu archivo CSS.
  Nota:

  La propiedad LocalCSSFilePath está disponible a partir de la versión 1.3.0 del paquete UiPath.Form.Activities .

Tutorial

Para diseñar el formulario con requisitos de apariencia específicos:

1. Cree un archivo CSS que contenga su configuración de estilo y guárdelo en su dispositivo local. Por ejemplo, para modificar los colores de las etiquetas y agregar un fondo personalizado al formulario, creamos el siguiente archivo CSS:

   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").

   También puedes almacenar la ruta al archivo CSS local como una variable e introducir el nombre de la variable en el campo RutaDeArchivoCSSLocal .

   

3. Abre el Diseñador de formularios y navega hasta el componente objetivo de tu personalización.

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. Guarde el componente.

6. Repite los pasos 3 a 5 para cada componente que necesites personalizar con tu archivo CSS local.

7. Guarda el formulario.

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o para tener una referencia futura, descarga el ejemplo XAML