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

O campo LocalCSSFilePath da atividade Create Form vem atender a necessidade de personalizar o formulário de acordo com sua preferência.

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. Na atividade Create Form > propriedade Format > LocalCSSFilePath, insira o caminho para o arquivo CSS (por exemplo, "/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. Na guia Exibir do componente de destino > campo Classe CSS personalizada , escreva o nome da classe CSS personalizada configurada no arquivo. Isso vincula os dados no arquivo CSS ao seu formulário. Por exemplo, para personalizar o rótulo do menu suspenso Cidade, insira a classe CSS correspondente 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 para ter uma referência futura, baixe o exemplo do XAML