Lógica avanzada

La pestaña Lógica del Diseñador de formularios te permite crear condiciones y scripts de lógica avanzados que pueden cambiar el estado o el comportamiento del componente del formulario seleccionado.

Usando la lógica avanzada puedes cambiar dinámicamente los controles, la apariencia de un componente del formulario.

La lógica de un formulario consta de dos partes: el desencadenador y la acción.

Desencadenador El desencadenador lógico es la condición en la que tienen lugar las Actions . Por ejemplo, es posible que desees mostrar un campo de formulario específico solo cuando se selecciona una opción de casilla de verificación. En este caso, la opción de casilla de verificación es el desencadenador y el campo del formulario se muestra en Actions.

Hay cuatro tipos de desencadenadores lógicos:

Tipo de desencadenador	Descripción	Ejemplo
Simple	Se define un componente y un valor del formulario de activación.
Javascript	Proporcione una lógica de JavaScript para un componente de formulario o datos de formulario. Utilizar la sintaxis de JavaScript para crear lógicas complejas, como un bucle o un comportamiento dinámico.
Lógica JSON	Proporcionas una lógica JSON para un componente de formulario o datos del formulario. Recomendado en los casos en los que no se permite JavaScript. No admite bucles ni comportamientos dinámicos.
Evento	Se define un evento de componente que, una vez emitido por el componente correspondiente, desencadena la acción deseada.

Acción

La acción lógica es el comportamiento del componente del formulario que debe ocurrir en función de las condiciones lógicas que establezca (es decir, el desencadenador). Por ejemplo, puede activar un botón para usuarios de una edad específica. En este caso, el rango de edad es el desencadenador y la activación del botón es la acción.

Hay cuatro tipos de acciones lógicas:

Tipo de acción	Descripción	Ejemplo
Propiedad	El desencadenador cambia una de las propiedades disponibles del componente, como la información sobre herramientas, la descripción, la clase CSS, etc. Las propiedades disponibles dependen del tipo de componente desencadenador.
Valor	El desencadenador cambia el valor del componente correspondiente. La acción debe definirse utilizando la sintaxis de JavaScript.
Fusionar esquema de componentes	El desencadenador cambia los parámetros del esquema del componente que se encuentran en el JSON del componente. Para ver los parámetros del esquema que puedes cambiar, pasa el ratón por encima del componente correspondiente y haz clic en Editar JSON. Puede cambiar varios parámetros en una acción.
Acción personalizada	Defina una acción personalizada utilizando la sintaxis de JavaScript, de la misma manera que definiría el tipo de desencadenador de JavaScript.

Tutorial

Para configurar una lógica avanzada:

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastre y suelte componentes en su formulario. Preste atención a sus claves de campo, ya que podría usarlas en su lógica avanzada.
3. Navega hasta la pestaña Lógica del componente que deseas cambiar (es decir, el componente en el que deben tener lugar las Actions ).
4. Haz clic en + Agregar lógica. Puede añadir tantas lógicas como desee.
5. Introduzca un nombre para su lógica.
6. En el panel Desencadenador , selecciona el tipo de desencadenador que quieres utilizar en tu lógica. Los tipos disponibles son Simple, Javascript, Lógica JSONy Eventos. Establezca las condiciones deseadas para desencadenar la acción.
7. En el panel Actions , haz clic en + Añadir Actions. Puedes añadir tantas Actions como quieras, todas desencadenadas por la lógica que las agrupa.
8. Introduzca un nombre para su acción.
9. Selecciona el tipo de acción que deseas utilizar. Los tipos disponibles son Propiedad, Valor, Combinar esquema de componentesy Acción personalizada. Establezca el efecto deseado de su acción.
10. Cuando esté listo, haga clic en Guardar Actions.
11. Para guardar su lógica, haga clic en Guardar lógica.

El procedimiento anterior se aplica genéricamente a cualquier tipo de desencadenador o acción. Para ver un procedimiento detallado, consulte los tutoriales específicos, que proporcionan ejemplos de cada desencadenador y tipo de acción específico

• Tipo de desencadenador: Javascript y Tipo de Actions : valor Resumir dos campos de texto de forma dinámica
• Tipo de desencadenador: simple y tipo de Actions : propiedad Ocultar un campo dinámicamente
• Tipo de desencadenador: Simple y Tipo de Actions : Combinar esquema de componentes Cambiar el color del título dinámicamente
• Tipo de desencadenador: evento y tipo de acción: acción personalizada Configurar un campo de formulario como predeterminado mediante eventos
• Tipo de desencadenador: JSON Lógica y tipo de Actions : propiedad Mostrar un componente según la entrada del usuario

Resumir dos campos de texto de forma dinámica

Tipo de desencadenador: JavaScript Tipo de acción: Valor

Esta lógica avanzada suma dos campos de texto, según la condición de que el usuario interactúe con los campos de texto correspondientes.

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastra y suelta tres componentes de Campo de texto en tu formulario.
3. Nombra dos de los componentes del campo de texto como A y B, y nombra al tercero como Total. Preste atención a sus claves de campo, ya que las usa en su lógica avanzada.
   De forma opcional, puede establecer el componente del campo de texto Total como Deshabilitado, para que los usuarios empresariales no puedan interactuar con él.
4. Ve a la pestaña Lógica del componente del campo Total .
5. Añada una lógica y asígnele el nombre "suma dinámica".

6. Selecciona el tipo de desencadenador de Javascript e introduce el siguiente script en la sección Área de texto :

   result = true;
   return result;

   El fragmento anterior detecta si hay algún cambio en los campos de texto, es decir, si el usuario interactúa con los campos de texto, y desencadena las Actions para sumar los campos.

7. Añade una acción y asígnale el nombre "a + b".

8. Seleccione el tipo de acción Valor e introduzca el siguiente script en la sección Valor (Javascript) :

   result = (+data.a) + (+data.b);
   return result;

   Reemplaza a y b con los valores de las claves de campo de los componentes del campo de texto.
9. Guarde la acción y la lógica.
10. Guarde el componente.

En runtime, si el usuario comercial interactúa con los campos de texto A y B, el campo Total se rellena automáticamente y muestra la suma de A y B.

Ocultar un campo de forma dinámica

Tipo de desencadenador: tipo de Actions simples : propiedad

Esta lógica avanzada oculta un campo de formulario (es decir, Child field) cuando el usuario introduce "ocultar" en otro campo de formulario (es decir, Parent field).

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastre y suelte dos componentes de Campo de texto .
3. Nombra uno de los componentes del campo de texto como Parent fieldy el otro como Child field. Preste atención a sus claves de campo, ya que las usa en su lógica avanzada.
4. Ve a la pestaña Lógica del componente Child field .
5. Añada una lógica y asígnele el nombre "ocultar entrada".

6. Selecciona el tipo de desencadenador Simple .

   6.1. En el menú desplegable Cuando aparezca el componente del formulario , selecciona Parent field ({parentField_field_key}).

   6.2. En el campo Tiene el valor , introduce "ocultar".

   La configuración anterior detecta si el usuario introduce la cadena "ocultar" en el campo principal y desencadena la acción para ocultar el campo secundario.

7. Añada una acción y asígnele el nombre "ocultar".

8. Selecciona el tipo Actions de propiedad .

   8.1. En el menú desplegable Propiedad del componente , selecciona Oculto.

   8,2. En el menú desplegable Establecer estado , selecciona Verdadero.

9. Guarde la acción y la lógica.
10. Guarde el componente.

En runtime, si el usuario empresarial introduce "ocultar" en el campo principal, el campo secundario se oculta.

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.

Prerrequisitos:

Crea un archivo CSS que contenga el nuevo color para la etiqueta del campo de texto y haz referencia a él en la actividad Crear formulario, en la propiedad de la actividad RutaDeArchivoCSSLocal .

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 al archivo CSS en las propiedades de Crear formulario, diseñe su formulario siguiendo los pasos a continuación:

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastre y suelte un componente de Campo de texto y un componente de Radio . Preste atención a sus claves de campo, ya que las usa en su lógica avanzada.
3. 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 a partir de los requisitos previos documentados anteriormente.
   
   

   

   
   
4. Para el componente Radio , añade dos valores para los colores green y red.
5. Ve a la pestaña Lógica del componente Campo de texto .
6. Añada una lógica y asígnele el nombre "selección de color".

7. Selecciona el tipo de desencadenador Simple .

   7.1. En el menú desplegable Cuando aparezca el componente del formulario , selecciona Radio ({radio_field_key}).

   7.2. En el campo Tiene el valor , introduce "verde".

   La configuración anterior detecta si el usuario selecciona "verde" en las opciones de radio y desencadena la acción para cambiar el color de la etiqueta del campo de texto.

8. Añade una acción y asígnale el nombre "cambiar color usando css".

9. Seleccione el tipo Combinar Actions de componente de esquema e introduzca el siguiente fragmento:

   return { customClass: "textFieldLabel-green" }

10. Guarde la acción y la lógica.
11. Guarde el componente.

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

Establecer un campo de formulario como predeterminado usando eventos

Tipo de desencadenador: tipo de acción de evento : acción personalizada

Esta lógica avanzada cambia el contenido de un campo de texto cuando el usuario hace clic en un botón. El botón emite un evento en función del cual el contenido del campo de texto cambia a un texto predeterminado.

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastre y suelte un componente de Campo de texto y un componente de Botón . Preste atención a las claves de campo de los componentes, ya que las utiliza en su lógica avanzada.

3. En la pestaña Visualización del componente de botón:

   3.1. Etiquetar el componente del botón como Change value to "Default"

   3.2. Establecer las Actions de los botones como Clic

   3.3. Selecciona la casilla de verificación Usar para actualización local.

   3.4. Introduzca el siguiente fragmento en la sección Actualizar lógica de datos . Esto emite el evento llamado resetTextField cada vez que el usuario hace clic en el botón.

   instance.emit('resetTextField', {});

   3.5. Guarde el componente de botón.

4. Ve a la pestaña Lógica del componente de campo de texto.
5. Añade una lógica y asígnale el nombre "restablecer".
6. Selecciona el tipo de desencadenador de evento .
7. En el campo Nombre del evento , introduce el nombre del evento emitido al hacer clic en el botón. (es decir, resetTextField).
   La configuración anterior detecta cuando el usuario hace clic en el botón Change value to "Default" y reemplaza el contenido existente del campo de texto por "Predeterminado".
8. Añada una acción y asígnele el nombre "predeterminada".
9. Selecciona el tipo Actions Actions .

10. Introduzca el siguiente fragmento en la sección Acción personalizada (Javascript) .

    return "Default"

11. Guarde la acción y la lógica.
12. Guarde el componente.

En runtime, si el usuario comercial hace clic en el botón Change value to "Default" , se emite el evento resetTextField . El desencadenador escucha el evento y reemplaza el contenido del campo de texto existente a "Predeterminado".

Mostrar un componente según la entrada del usuario

Tipo de desencadenador: JSON Tipo de Actions lógicas: Propiedad

Esta lógica avanzada muestra el contenido de un componente HTML (en este caso, una imagen) cuando el usuario introduce el texto requerido.

1. Abre el Diseñador de formularios en la actividad Crear formulario.
2. Arrastre y suelte un componente de Campo de texto y un componente de Elemento HTML . Preste atención a las claves de campo de los componentes, ya que las utiliza en su lógica avanzada.

3. En la pestaña Visualización del componente de campo de texto:

   3.1. Etiquete el componente del campo de texto como "Escribir" Mostrarme "".

   3.2. Agregue la descripción "Debe ser una coincidencia exacta (distingue entre mayúsculas y minúsculas)" para indicar a los usuarios que deben introducir el texto según sea necesario.

   3.3. Guarde el componente del campo de texto.

4. En la pestaña Visualización del componente de elemento HTML:

   4.1. En la sección Contenido , haz referencia a la imagen que quieres mostrar. Por ejemplo: <img href="https://picsum.photos/200/300" />.

   4.2. Selecciona la casilla de verificación Oculto para ocultar la imagen de forma predeterminada. 4.3. Guarde el componente de elemento HTML.

5. Ve a la pestaña Lógica del componente del elemento HTML.
6. Añada una lógica y asígnele el nombre "entrada de usuario".
7. Selecciona el tipo de desencadenador de lógica JSON .
8. Introduce el siguiente fragmento en la sección Lógica de JSON y reemplaza {text_field_component_field_key} con el valor de la clave del campo que estableciste para el componente de campo de texto.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }

   La configuración anterior detecta cuando el usuario introduce "Mostrarme" y solo entonces establece el valor de la propiedad Elemento HTML oculto en Falso, mostrando así el contenido HTML correspondiente.

9. Añada una acción y asígnele el nombre "mostrar imagen".

10. Selecciona el tipo Actions de propiedad .

    10,1. En el menú desplegable Propiedad del componente , selecciona Oculto.

    10.2. En el menú desplegable Establecer estado , selecciona Falso.

11. Guarde la acción y la lógica.
12. Guarde el componente.

En runtime, si el usuario introduce el texto requerido en el campo de texto, el formulario muestra el contenido HTML.

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o tener una referencia futura, descarga el ejemplo XAML