Cambiar el color del título dinámicamente

Tipo de desencadenador: Simple Tipo de acción: Combinar esquema de componentes

Esta lógica avanzada cambia el color de la etiqueta de un componente del campo de texto cuando el usuario selecciona el color deseado de una lista. El cambio se aplica mediante un archivo CSS personalizado.

Requisitos previos: añade las clases CSS que contienen el nuevo color para el campo de texto en el campo de propiedad CSS personalizado del formulario.

Por ejemplo, el siguiente fragmento de CSS contiene una clase que establece el color de la etiqueta en verde o rojo:

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

Después de hacer referencia a las clases de CSS en el campo de propiedad CSS personalizada , diseña tu formulario siguiendo los siguientes pasos:

1. Añade un componente Campo de texto y un componente Radio . Presta atención a sus nombres de propiedad, ya que los utilizas en tu lógica avanzada.

2. En la pestaña Visualización del componente de campo de texto, establece una Clase CSS personalizada predeterminada. Por ejemplo, para establecer el rojo como color predeterminado del campo de texto, utiliza la clase textFieldLabel-red . La clase debe estar definida en el archivo CSS que creaste para la sección Requisitos previos .

   

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. Añada una lógica y asígnele el nombre "color selection".

6. Select the Simple trigger type.

   1. En el menú desplegable Cuando el componente del formulario , selecciona Radio ({radio_field_key}).
   2. En el campo Tiene el valor , introduce "green".

   La configuración anterior detecta si el usuario selecciona "green" de las opciones de radio y activa las Actions para cambiar el color de la etiqueta del campo de texto.

7. Añada una acción y Actions el nombre "change color using css"

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

   return { customClass: "textFieldLabel-green" }
   

9. Guarde la acción y la lógica.

10. Guarde el componente.

En Runtime, si el usuario comercial selecciona el botón de opción "green" , la etiqueta del campo de texto se vuelve verde. Si el usuario selecciona el botón de opción "red" , la etiqueta del campo de texto se vuelve rojo.