Personalizar formularios usando archivos CSS locales

El campo RutaDeArchivoCSSLocal de la actividad Crear formulario responde a la necesidad de personalizar el formulario según sus preferencias.

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 RutaDeArchivoCSSFocal 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. En la actividad Crear formulario > propiedad Formato > RutaDeArchivoCSSLocal, introduce la ruta del archivo CSS (por ejemplo, "/file://C:\User heCssFile.css").

   También puede almacenar la ruta del archivo CSS local como variable e introducir el nombre de la variable en el campo RutaDelArchivoCSSLocal .

   
   

   

   
   
3. Abre el Diseñador de formularios y navega hasta el componente objetivo de tu personalización.
4. En la pestaña Visualización del componente de destino> campo Clase CSS personalizada , escribe el nombre de la clase CSS personalizada configurada en el archivo. Esto vincula los datos del archivo CSS a su formulario. Por ejemplo, para personalizar la etiqueta del menú desplegable Ciudad, introduce la clase CSS correspondiente 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 tener una referencia futura, descarga el ejemplo XAML