Cambiar el color del título dinámicamente

Tipo de desencadenador: Actions simples tipo: 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 personalizado , diseñe su formulario siguiendo los pasos que se indican a continuación:

1. Agregue un componente de campo de texto y un componente de radio . Preste atención a sus Nombres de propiedad, ya que los usa en su lógica avanzada.
2. En la pestaña Visualización del componente del campo de texto, establece una Clase CSS personalizadapredeterminada. Por ejemplo, para establecer el rojo como el color predeterminado del campo de texto, usa la clase textFieldLabel-red . La clase debe definirse en el archivo CSS que creaste para la sección de Requisitos previos .
   
   

   

   
   
3. Para el componente Radio , añade dos valores para los colores green y red.
4. Ve a la pestaña Lógica del componente Campo de texto .
5. Añada una lógica y asígnele el nombre "color selection".
6. Selecciona el tipo de desencadenador Simple .
   1. En el menú desplegable Cuando aparezca 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. Seleccione el tipo Combinar Actions de componente de esquema e introduzca el siguiente fragmento:

   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.