Lógica avanzada

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

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 tiene lugar la acción. 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 la casilla de verificación es el desencadenador, y mostrar el campo del formulario es la acción.

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	Proporcionas una lógica JavaScript para un componente de formulario o datos de formulario. Utiliza la sintaxis de JavaScript para crear una lógica compleja, como un bucle o un comportamiento dinámico.
Lógica JSON	Proporcionas una lógica JSON para un componente de formulario o datos de formulario. Recomendado en casos en los que JavaScript no está permitido. No puede admitir bucles o 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 del componente disponibles, como Información sobre herramientas, Descripción, Clase CSS, etc. Las propiedades disponibles dependen del tipo de componente de activación.
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 componente JSON. 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. Puedes cambiar varios parámetros dentro de 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. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. Introduzca un nombre para su lógica.
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. Introduzca un nombre para su acción.
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

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 acción: Valor Resumir dos campos de texto de forma dinámica
• Tipo de desencadenador: simple y tipo de acción: propiedad Ocultar un campo de forma dinámica
• Tipo de desencadenador: simple y tipo de acción: combinar esquema de componentes Cambiar el color del título de forma dinámica
• Tipo de desencadenador: Tipo de evento y acción: Acción personalizada Establecer un campo de formulario como predeterminado utilizando eventos
• Tipo de desencadenador: JSON Tipo de lógica y acción: Propiedad Mostrar un componente basado en 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. Drag and drop three Text Field components into your form.

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.

   Opcionalmente, puedes establecer el componente de campo de texto Total como Deshabilitado, para que los usuarios empresariales no puedan interactuar con él.

4. Go to the Logic tab of the Total field component.

5. Añada una lógica y asígnele el nombre "suma dinámica".

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   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. Select the Value action type, and enter the following script in the Value (Javascript) section:

   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: simple Tipo de acción: 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. Drag and drop two Text Field components.
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. Go to the Logic tab of the Child field component.
5. Añada una lógica y asígnele el nombre "ocultar entrada".
6. Select the Simple trigger type.
   1. En el menú desplegable Cuando el componente del formulario , selecciona Parent field ({parentField_field_key}).
   2. En el campo Tiene el valor , introduce "ocultar". La configuración anterior detecta si el usuario introdujo 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. Select the Property action type.
   1. En el menú desplegable Propiedad del componente , selecciona Oculto.
   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: 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.

Prerrequisitos:

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

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. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.

3. 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 definirse en el archivo CSS a partir de los requisitos previos documentados anteriormente.

   

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

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

6. Añada una lógica y asígnele el nombre "selección de color".

7. 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 "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. Select the Merge Schema Component action type and enter the following snippet:

   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: Evento Tipo de acción: 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. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

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

   1. Etiquetar el componente del botón como Change value to "Default"
   2. Establece la acción del botón como Clic.
   3. Selecciona la casilla Usar para actualización local.
   4. Introduce 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', {});
      

   5. Guarde el componente de botón.

4. Go to the Logic tab of the text field component.

5. Añade una lógica y asígnale el nombre "restablecer".

6. Select the Event trigger type.

7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., 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. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    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: Lógica JSON Tipo de acción: 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. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   1. Etiquete el componente del campo de texto como "Escriba "Mostrar"".
   2. Añade la descripción "Debe ser una coincidencia exacta (sensible a mayúsculas y minúsculas)", para indicar a los usuarios que deben introducir el texto según sea necesario.
   3. Guarde el componente del campo de texto.

4. In the Display tab of the HTML element component:

   1. En la sección Contenido , haz referencia a la imagen que quieres mostrar. Por ejemplo: <img href="https://picsum.photos/200/300" />.
   2. Selecciona la casilla Oculto , para ocultar la imagen y evitar que se muestre de forma predeterminada.
   3. Guarde el componente de elemento HTML.

5. Go to the Logic tab of the HTML element component.

6. Añada una lógica y asígnele el nombre "entrada de usuario".

7. Select the JSON Logic trigger type.

8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

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

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

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

10. Select the Property action type.

    1. En el menú desplegable Propiedad del componente , selecciona Oculto.
    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 para tener una referencia futura, descarga el ejemplo XAML