Alterar a cor do título dinamicamente

Tipo de gatilho: tipo de ação simples : mesclar esquema de componente

Essa lógica avançada altera a cor do rótulo de um componente de campo de texto quando o usuário seleciona a cor desejada de uma lista. A alteração aplica-se usando um arquivo CSS personalizado.

Pré-requisitos: adicione as classes CSS contendo a nova cor para o campo de texto no campo da propriedade CSS Personalizada do formulário.

Por exemplo, o trecho de CSS abaixo contém uma classe que define a cor do rótulo para verde ou vermelho:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

Após fazer referência às classes CSS no campo da propriedade CSS personalizado , crie seu formulário seguindo as etapas abaixo:

1. Adicione um componente Text Field e um componente Rádio . Preste atenção em seus Nomes de propriedades, pois você os usa em sua lógica avançada.

2. Na guia Exibição do componente de campo de texto, defina uma Classe CSS Personalizada padrão. Por exemplo, para definir vermelho como a cor padrão do campo de texto, use a classe textFieldLabel-red . A classe deve ser definida no arquivo CSS que você criou para a seção Pré-requisitos .

   

3. For the Radio component, add two values for the colors green and red.

4. Go to the Logic tab of the Text Field component.

5. Adicione uma lógica e lhe atribua o nome "color selection".

6. Select the Simple trigger type.

   1. No menu suspenso Quando o componente de formulário , selecione Radio ({radio_field_key}).
   2. No campo Tem o valor , insira "green".

   A configuração acima detecta se o usuário seleciona "green" entre as opções de rádio e dispara as Actions para alterar a cor do rótulo do campo de texto.

7. Adicione uma Actions e chame-a de "change color using css"

8. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }
   

9. Salve a ação e a lógica.

10. Salve o componente.

No tempo de Runtime, se o usuário empresarial selecionar o botão de rádio "green" , o rótulo do campo de texto ficará verde. Se o usuário selecionar o botão de rádio "red" , o rótulo do campo de texto ficará vermelho.