Personalização de formulários usando arquivos CSS locais

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

Há algumas coisas que você deve considerar ao usar o arquivo CSS local:

• Os estilos globais se aplicam imediatamente após definir o caminho do arquivo CSS.
• Estilos de componentes específicos devem ser configurados como classes. Use um nome relevante. (por exemplo, .username-label ou .submitButton-color).
• A visualização do formulário não exibe as alterações de estilo quando você define o caminho do arquivo CSS como uma variável. Para visualizar as alterações, use valores codificados para o caminho do seu arquivo CSS.
  Observação:

  A propriedade LocalCSSFilePath está disponível a partir da versão 1.3.0 do pacote UiPath.Form.Activities .

Tutorial

Para projetar o formulário com requisitos de aparência específicos:

1. Crie um arquivo CSS contendo suas configurações de estilo e salve-o em seu dispositivo local. Por exemplo, para modificar as cores dos rótulos e adicionar um fundo personalizado ao formulário, criamos o seguinte arquivo 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").

   Você também pode armazenar o caminho para o arquivo CSS local como uma variável e inserir o nome da variável no campo LocalCSSFilePath .

   

3. Abra o Form Designer e navegue até o componente de destino de sua personalização.

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. Salve o componente.

6. Repita as etapas 3 a 5 para cada componente que você precisa personalizar usando seu arquivo CSS local.

7. Salve o formulário.

Fluxo de trabalho amostral

Para verificar o fluxo de trabalho completo ou ter uma referência futura, baixe o exemplo XAML