Interfaz de usuario del editor de reglas para Forms adaptable basado en componentes principales

La interfaz de usuario del Editor de reglas para Forms adaptable basado en componentes principales mejora el proceso de creación de formularios en Adobe Experience Manager AEM (). Permite a los usuarios y desarrolladores implementar lógica dinámica y compleja en los formularios al escribir reglas que almacenan en déclencheur las acciones en función de condiciones predefinidas, entradas del usuario e interacciones. Esta función es compatible con las funcionalidades modernas de JavaScript, incluidas las funciones ES10, y ofrece un editor visual intuitivo que simplifica el proceso de escritura de reglas.
El Editor de reglas es fundamental para optimizar la experiencia de rellenado de formularios, lo que garantiza tanto la precisión como la eficacia. Permite validar o restablecer paneles y formularios, así como ejecutar funciones personalizadas para calcular los valores de objetos de formulario. Con su compatibilidad con las condiciones anidadas y la capacidad de invocar los servicios del modelo de datos de formulario, la interfaz de usuario del editor de reglas es un componente fundamental para crear formularios adaptables, fáciles de usar y adaptables.

Explicación de la interfaz de usuario del editor de reglas understanding-the-rule-editor-user-interface

El editor de reglas proporciona una interfaz de usuario completa pero sencilla para escribir y administrar reglas. Puede iniciar la interfaz de usuario del editor de reglas desde un formulario adaptable en modo de creación.

Para iniciar la interfaz de usuario del editor de reglas:

  1. Abra un formulario adaptable en modo de creación.

  2. Seleccione el objeto de formulario para el que desea escribir una regla y, en la barra de herramientas de componentes, seleccione edit-rules . Aparecerá la interfaz de usuario del editor de reglas.

    create-rules

    Cualquier regla existente en los objetos de formulario seleccionados se muestra en esta vista. Para obtener información sobre la administración de reglas existentes, consulte Administrar reglas.

  3. Seleccione Crear para escribir una regla nueva. El editor visual de la interfaz de usuario del editor de reglas se abre de forma predeterminada cuando se inicia el editor de reglas por primera vez.

    Interfaz de usuario del editor de reglas

Veamos en detalle cada componente de la interfaz de usuario del editor de reglas.

A. Visualización de la regla de componente a-component-rule-display

Muestra el título del objeto de formulario adaptable a través del cual se ha iniciado el editor de reglas y el tipo de regla seleccionado actualmente. En el ejemplo anterior, el editor de reglas se inicia desde un objeto de formulario adaptable llamado Pregunta 1 y el tipo de regla seleccionado es Cuándo.

B. Desde objetos y funciones b-form-objects-and-functions-br

El panel de la izquierda de la interfaz de usuario del editor de reglas incluye dos pestañas: Objetos de formulario y Funciones.

La pestaña Objetos de formulario muestra una vista jerárquica de todos los objetos contenidos en el formulario adaptable. Muestra el título y el tipo de los objetos. Al escribir una regla, puede arrastrar y soltar objetos de formulario en el editor de reglas. Al crear o editar una regla cuando arrastra y suelta un objeto o función en un marcador de posición, el marcador de posición toma automáticamente el tipo de valor apropiado.

Los objetos de formulario que tienen una o más reglas válidas aplicadas se marcan con un punto verde. Si alguna de las reglas aplicadas a un objeto de formulario no es válida, el objeto de formulario se marca con un punto amarillo.

La pestaña Funciones incluye un conjunto de funciones integradas, como Sum Of (suma de), Min Of (mín. de), Max Of (máx. de), Average Of (promedio de), Number Of (número de) y Validate Form (validar formulario). Puede utilizar estas funciones para calcular valores en paneles repetibles y filas de tabla y utilizarlos en instrucciones de acción y condición al escribir reglas. Sin embargo, también puede crear funciones personalizadas.

Algunas de las funciones de la lista se muestran en la figura:

La pestaña Funciones

NOTE
Puede buscar texto en nombres de objetos y funciones y títulos en las pestañas Objetos y Funciones de Forms.

En el árbol izquierdo de los objetos de formulario, puede seleccionar los objetos de formulario para mostrar las reglas aplicadas a cada uno de ellos. No solo puede desplazarse por las reglas de los distintos objetos de formulario, sino que también puede copiar y pegar reglas entre los objetos de formulario. Para obtener más información, consulte Copiar y pegar reglas.

C. Alternar entre funciones y objetos de formulario c-form-objects-and-functions-toggle-br

Al pulsar el botón de cambio, se alternan los paneles de funciones y de objetos de formulario.

D. Editor de reglas visual visual-rule-editor

El editor de reglas visual es el área del modo de editor visual de la interfaz de usuario del editor de reglas donde se escriben las reglas. Permite seleccionar un tipo de regla y definir las condiciones y las acciones correspondientes. Al definir condiciones y acciones en una regla, puede arrastrar y soltar funciones y objetos de formulario desde el panel Objetos de formulario y el de Funciones.

Para obtener más información sobre el uso de un editor de reglas visual, consulte Escribir reglas.

E. Botones de finalización y cancelación done-and-cancel-buttons

El botón Listo se utiliza para guardar una regla. Puede guardar una regla incompleta. Sin embargo, las que estén incompletas no son válidas, por lo tanto, no se ejecutan. Las reglas guardadas en un objeto de formulario se enumeran cuando se inicia el editor de reglas la próxima vez desde el mismo objeto. Puede administrar las reglas existentes en esa vista. Para obtener más información, consulte Administrar reglas.

El botón Cancelar descarta los cambios realizados en una regla y cierra el editor de reglas.

Escribir reglas write-rules

Puede escribir reglas mediante el editor de reglas visual

Veamos primero cómo escribir reglas utilizando un editor visual.

+++

Usando el editor visual {#using-visual-editor}

Vamos a comprender cómo crear una regla en un editor visual utilizando el siguiente formulario de ejemplo.

Create-rule-example

La sección Loan Requirements (requisitos de préstamo) del formulario de solicitud de ejemplo requiere que los solicitantes especifiquen su estado civil, su salario y, si están casados, el salario de su cónyuge. En función de las entradas del usuario, la regla calcula la cantidad de idoneidad para el préstamo y se muestra en el campo Loan Eligibility (elegibilidad del préstamo). Aplique las siguientes reglas para implementar el escenario:

  • El campo Spouse’s Salary (salario del cónyuge) solo se muestra cuando en el estado civil (Marital Status) se indica que se está casado o casada (Married).
  • La cantidad de la elegibilidad del préstamo es el 50 % del salario total.

Para escribir las reglas, realice los siguientes pasos:

  1. En primer lugar, escriba la regla para controlar la visibilidad del campo Spouse Salary en función de la opción que seleccione el usuario para el botón de opción Marital Status.

    Abra el formulario de solicitud de préstamo en modo de creación. Seleccione el componente Estado civil y haga clic en edit-rules . A continuación, seleccione Crear para iniciar el editor de reglas.

    write-rules-visual-editor-1

    Al iniciar el editor de reglas, la regla When se selecciona de forma predeterminada. Además, el objeto de formulario (en este caso, Marital Status) desde el que se inició el editor de reglas se especifica en la instrucción When.

    Aunque no puede cambiar ni modificar el objeto seleccionado, puede utilizar la lista desplegable de reglas, como se muestra a continuación, para seleccionar otro tipo de regla. Si desea crear una regla en otro objeto, seleccione Cancelar para salir del editor de reglas y volver a iniciarlo desde el objeto de formulario deseado.

  2. Seleccione el menú desplegable Seleccionar estado y haga clic en es igual a. Aparece el campo Escribir una cadena.

    write-rules-visual-editor-2

  3. En el campo Escriba una cadena en la regla, seleccione Casado del menú desplegable.

    write-rules-visual-editor-4

    Ha definido la condición como When Marital Status is equal to Married. A continuación, defina la acción que se realizará si esta condición es True.

  4. En la instrucción Then, seleccione Show de la lista desplegable Seleccionar acción.

    write-rules-visual-editor-5

  5. Arrastre y suelte el campo Spouse Salary de la pestaña Objetos de formulario en el campo Colocar objeto o seleccionar aquí. Como alternativa, seleccione el campo Colocar objeto o seleccionar aquí y seleccionar el campo Salario del cónyuge del menú emergente, que enumera todos los objetos del formulario.

    write-rules-visual-editor-6

    A continuación, defina la acción que se realizará si esta condición es False.

  6. Haga clic en Agregar otra sección para agregar otra condición para el campo Salario del cónyuge, en caso de que seleccione Estado civil como soltero.

    when-else

  7. En la instrucción Else, seleccione Hide de la lista desplegable Select Action.
    when-else

  8. Arrastre y suelte el campo Spouse Salary de la pestaña Objetos de formulario en el campo Colocar objeto o seleccionar aquí. Como alternativa, seleccione el campo Colocar objeto o seleccionar aquí y seleccionar el campo Salario del cónyuge del menú emergente, que enumera todos los objetos del formulario.
    when-else

    La regla aparece de la siguiente manera en el editor.

    write-rules-visual-editor-7

  9. Seleccione Listo para guardar la regla.

note note
NOTE
Como alternativa, puede escribir una regla Show en el campo Spouse Salary, en lugar de reglas When en el campo Marital Status, para implementar el mismo comportamiento.

write-rules-visual-editor-9

  1. A continuación, escriba una regla para calcular el importe de idoneidad para el préstamo, que es el 50 % del salario total, y muéstrela en el campo Loan Eligibility. Para lograr este resultado, cree reglas Set Value Of en el campo Loan Eligibility.

    En el modo de creación, seleccione el campo Idoneidad del préstamo y haga clic en edit-rules . A continuación, seleccione Crear para iniciar el editor de reglas.

  2. Seleccione la regla Set Value Of en la lista desplegable de reglas.

    write-rules-visual-editor-10

  3. Seleccione Seleccionar opción y seleccione Expresión matemática. Se abre un campo para escribir una expresión matemática.

    write-rules-visual-editor-11

  4. En el campo de la expresión:

    • Seleccione o arrastre y suelte desde la pestaña Objetos de formulario el campo Salary (salario) en el primer campo Colocar objeto o seleccionar aquí.

    • Seleccione Más en el campo Seleccionar operador.

    • Seleccione o arrastre y suelte desde la pestaña Objetos de formulario el campo Spouse Salary en el otro campo Colocar objeto o seleccionar aquí.

    write-rules-visual-editor-12

  5. A continuación, seleccione el área resaltada alrededor del campo de expresión y haga clic en Ampliar expresión.

    write-rules-visual-editor-13

    En el campo para ampliar la expresión, seleccione divided byr en el campo Seleccionar operador y Número en el campo Seleccionar opción. A continuación, especifique 2 en el campo de número.

    write-rules-visual-editor-14

    note note
    NOTE
    Puede crear expresiones complejas utilizando componentes, funciones, expresiones matemáticas y valores de propiedad del campo Seleccionar opción.

    A continuación, cree una condición que, cuando devuelva un valor True, ejecute la expresión.

  6. Seleccione Agregar condición para agregar una instrucción When.

    write-rules-visual-editor-15

    En la instrucción When:

    • Seleccione o arrastre y suelte desde la pestaña Objetos de formulario el campo Marital Status en el primer campo Colocar objeto o seleccionar aquí.

    • Seleccione is equal to en el campo Seleccionar operador.

    • Seleccione Cadena en el otro campo Colocar objeto o seleccionar aquí y especifique Married en el campo Escribir una cadena.

    La regla finalmente aparece de la siguiente manera en el editor de reglas. write-rules-visual-editor-16

  7. Seleccione Listo. Se guarda la regla.

  8. Repita los pasos del 7 al 14 para definir otra regla que calcule la idoneidad del préstamo si el estado civil es Single (soltero o soltera). La regla aparece de la siguiente manera en el editor.

    write-rules-visual-editor-17

También puede utilizar la regla Set Value Of para calcular la idoneidad del préstamo en la regla When que creó para mostrar u ocultar el campo Spouse Salary. La regla combinada resultante cuando el estado civil es Single aparece de la siguiente manera en el editor de reglas.

write-rules-visual-editor-18

Puede escribir una regla combinada para controlar la visibilidad del campo Spouse Salary y calcular la idoneidad del préstamo cuando el estado civil sea Married con la condición Else.

write-rules-visual-editor-19

Funciones personalizadas en el editor de reglas custom-functions

Además de las funciones integradas, como Sum of que se enumeran en Salida de funciones, también puede usar funciones personalizadas en el editor de reglas. El editor de reglas admite la sintaxis de JavaScript ECMAScript 2019 para scripts y funciones personalizadas. Para obtener instrucciones sobre cómo crear funciones personalizadas, consulte el artículo Funciones personalizadas en Forms adaptable.

Administrar reglas manage-rules

Cualquier regla existente en un objeto de formulario aparece enumerada al seleccionar el objeto y seleccionar edit-rules1 . Puede ver el título y una vista previa del resumen de la regla. Además, la IU le permite expandir y ver el resumen completo de las reglas, cambiar el orden, editarlas y eliminarlas.

List-rules

Puede realizar las siguientes acciones en las reglas:

  • Ampliar/contraer: la columna Contenido de la lista de reglas muestra el contenido de las reglas. Si todo el contenido de la regla no es visible en la vista predeterminada, seleccione expand-rule-content para ampliarla.

  • Reordenar: cualquier regla nueva que cree se apilará en la parte inferior de la lista de reglas. Las reglas se ejecutan de arriba a abajo. La regla de la parte superior se ejecuta primero, seguida de otras reglas del mismo tipo. Por ejemplo, si tiene las reglas When, Show, Enable y When en las posiciones primera, segunda, tercera y cuarta desde la parte superior, respectivamente, la regla When en la parte superior se ejecuta primero, seguida de la regla When en la cuarta posición. A continuación, se ejecutan las reglas Show y Enable.
    Puede cambiar el orden de una regla al pulsar sort-rules o arrástrela hasta el orden deseado en la lista.

  • Editar: para editar una regla, active la casilla de verificación situada junto al título de la misma. Aparecerán las opciones para editar y eliminar la regla. Seleccione Editar para abrir la regla seleccionada en el editor de reglas.

  • Eliminar: para eliminar una regla, selecciónela y presione Eliminar.

  • Habilitar/deshabilitar: cuando tenga que suspender temporalmente el uso de una regla, puede seleccionar una o más reglas y seleccionar Deshabilitar en la barra de herramientas de acciones para deshabilitarlas. Si una regla está deshabilitada, no se ejecuta en el tiempo de ejecución. Para habilitar una regla que esté deshabilitada, puede seleccionarla y seleccionar Habilitar en la barra de herramientas de acciones. La columna de estado de la regla muestra si la regla está habilitada o deshabilitada.

Deshabilitar regla

Copiar y pegar reglas copy-paste-rules

Puede copiar y pegar una regla de un campo a otros campos similares para ahorrar tiempo.

Para copiar y pegar reglas, haga lo siguiente:

  1. Seleccione el objeto de formulario del que desea copiar una regla y, en la barra de herramientas de componentes, seleccione editar regla . La interfaz de usuario del editor de reglas aparece con el objeto de formulario seleccionado y aparecen las reglas existentes.

    copyrule

    Para obtener información sobre la administración de reglas existentes, consulte Administrar reglas.

  2. Seleccione la casilla de verificación situada junto al título de la regla. Aparecerán las opciones para administrar la regla. Seleccione Copiar.

    copyrule2

  3. Seleccione otro objeto de formulario al que desee pegar la regla y eija Pegar. Además, puede editar la regla para realizar cambios en ella.

    note note
    NOTE
    Puede pegar una regla en otro objeto de formulario solo si dicho objeto de formulario admite el evento de regla copiada. Por ejemplo, un botón admite el evento de clic. Puede pegar una regla con un evento de clic en un botón, pero no en una casilla de verificación.
  4. Seleccione Listo para guardar la regla.

Siguiente paso

Para comprender los distintos tipos de operadores y eventos en el editor de reglas de un formulario adaptable, consulte el artículo Tipos de operadores y eventos disponibles en el editor de reglas de un formulario adaptable.

Consulte también

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab