Tutorial: Aplicar reglas a campos de formulario adaptables

06-apply-rules-to-adaptive-form_main

Este tutorial es un paso en la serie Crear su primer formulario adaptable. Adobe recomienda seguir la serie en secuencia cronológica para comprender, realizar y mostrar el caso de uso completo del tutorial.

Acerca del tutorial

Puede utilizar reglas para agregar interactividad, lógica empresarial y validaciones inteligentes a un formulario adaptable. Los formularios adaptables tienen un editor de reglas integrado. El editor de reglas proporciona una funcionalidad de arrastrar y soltar, similar a las visitas guiadas. El método de arrastrar y soltar es el más rápido y sencillo para crear reglas. El editor de reglas también proporciona una ventana de código para los usuarios interesados en probar sus habilidades de codificación o llevar las reglas al siguiente nivel.

Puede obtener más información sobre el editor de reglas en Editor de reglas adaptable de Forms.

Al final del tutorial, aprenderá a crear reglas para:

  • Invocar un servicio de modelo de datos de formulario para recuperar datos de la base de datos
  • Invocar un servicio de modelo de datos de formulario para agregar datos a la base de datos
  • Ejecutar una comprobación de validaciones y mostrar mensajes de error

Las imágenes GIF interactivas al final de cada sección del tutorial le ayudan a aprender y validar la funcionalidad del formulario que está creando sobre la marcha.

Paso 1: Recuperar un registro de cliente de la base de datos

Ha creado un modelo de datos de formulario siguiendo el artículo crear modelo de datos de formulario. Ahora puede utilizar el editor de reglas para invocar los servicios del Modelo de datos de Forms para recuperar y agregar información a la base de datos.

A cada cliente se le asigna un número de ID de cliente único, que ayuda a identificar los datos relevantes del cliente en una base de datos. El procedimiento siguiente utiliza el ID de cliente para recuperar información de la base de datos:

  1. Abra el formulario adaptable para editarlo.

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. Toque el campo ID del cliente y toque el icono Editar reglas. Se abre la ventana Editor de reglas.

  3. Toque el icono + Crear para agregar una regla. Abre el Editor visual.

    En el Editor visual, la instrucción WHEN está seleccionada de forma predeterminada. Además, el objeto de formulario (en este caso, ID de cliente) desde el que se inició el editor de reglas se especifica en la instrucción WHEN.

  4. Toque la lista desplegable Seleccionar estado y seleccione se cambia.

    whparticipstomeridischanged

  5. En la instrucción ENTONCES, seleccione Invocar servicio en la lista desplegable Seleccionar acción.

  6. Seleccione el servicio Recuperar dirección de envío en la lista desplegable Seleccionar.

  7. Arrastre y suelte el campo ID del cliente de la ficha Objetos del formulario al objeto Colocar o seleccione aquí en el cuadro ENTRADA.

    dropobjectstoinputfield-Retrievedata

  8. Arrastre y suelte el campo ID del cliente, nombre, dirección de envío, estado y código postal de la ficha Objetos de formulario al objeto Colocar o seleccione aquí en el cuadro SALIDA.

    dropobjectstooutputfield-Retrievedata

    Toque Listo para guardar la regla. En la ventana del editor de reglas, toque Cerrar.

  9. Previsualización del formulario adaptable. Escriba un ID en el campo ID del cliente. El formulario ahora puede recuperar los detalles del cliente de la base de datos.

    recuperar-información

Paso 2: Añadir la dirección de cliente actualizada a la base de datos

Una vez recuperados los detalles del cliente de la base de datos, puede actualizar la dirección de envío, el estado y el código postal. El procedimiento siguiente invoca un servicio del Modelo de datos de formulario para actualizar la información del cliente a la base de datos:

  1. Seleccione el campo Enviar y toque el icono Editar reglas. Se abre la ventana Editor de reglas.

  2. Seleccione la regla Enviar: haga clic y toque el icono Editar. Aparecerán las opciones para editar la regla Enviar.

    submit-rule

    En la opción WHEN, las opciones Enviar y donde se hace clic ya están seleccionadas.

    submit-is-clicked

  3. En la opción ENTONCES, toque la opción + Añadir instrucción. Seleccione Invocar servicio en la lista desplegable Seleccionar acción.

  4. Seleccione el servicio Actualizar dirección de envío en la lista desplegable Seleccionar.

    update-Shipping-address

    dropobjectstoinputfield-updatedata

  5. Arrastre y suelte el campo Dirección de envío, estado y código postal de la ficha Objetos de formulario a la correspondiente propiedad .nombre de tabla (por ejemplo, custom details.ShippingAddress) del objeto Colocar o seleccione aquí en el cuadro ENPUT. Todos los campos con el prefijo tablename (por ejemplo, detalles del cliente en este caso de uso) sirven como datos de entrada para el servicio de actualización. Todo el contenido proporcionado en estos campos se actualiza en el origen de datos.

    NOTA

    No arrastre y suelte los campos Nombre y ID del cliente en la propiedad correspondiente de nombreDeTabla (por ejemplo, customerdetails.name). Ayuda a evitar actualizar el nombre y la ID del cliente por error.

  6. Arrastre y suelte el campo ID del cliente de la ficha Objetos del formulario al campo de identificación del cuadro ENTRADA. Los campos sin un nombre de tabla preestablecido (por ejemplo, detalles del cliente en este caso de uso) sirven como parámetro de búsqueda para el servicio de actualización. El campo id en este caso de uso identifica de forma exclusiva un registro en la tabla detalles del cliente.

  7. Toque Listo para guardar la regla. En la ventana del editor de reglas, toque Cerrar.

  8. Previsualización del formulario adaptable. Recupere los detalles de un cliente, actualice la dirección de envío y envíe el formulario. Al recuperar los detalles del mismo cliente de nuevo, se muestra la dirección de envío actualizada.

Paso 3: (Sección de bonificación) Utilice el editor de código para ejecutar validaciones y mostrar mensajes de error

Debe ejecutar la validación en el formulario para asegurarse de que los datos introducidos en el formulario son correctos y se muestra un mensaje de error en caso de datos incorrectos. Por ejemplo, si se introduce un ID de cliente no existente en el formulario, se mostrará un mensaje de error.

Los formularios adaptables proporcionan varios componentes con validaciones integradas, por ejemplo, campos numéricos y de correo electrónico que se pueden utilizar para casos de uso comunes. Utilice el editor de reglas para casos de uso avanzados, por ejemplo, para mostrar un mensaje de error cuando la base de datos devuelve cero (0) registros (sin registros).

El siguiente procedimiento muestra cómo crear una regla para mostrar un mensaje de error si el ID de cliente introducido en el formulario no existe en la base de datos. La regla también centra la atención en el campo ID del cliente y lo restablece. La regla utiliza la API dataIntegrationUtils del servicio del modelo de datos de formulario para comprobar si el ID de cliente existe en la base de datos.

  1. Toque el campo ID del cliente y toque el icono Edit Rules. Se abre la ventana Editor de reglas.

  2. Toque el icono + Crear para agregar una regla. Abre el Editor visual.

    En el Editor visual, la instrucción WHEN está seleccionada de forma predeterminada. Además, el objeto de formulario (en este caso, ID de cliente) desde el que se inició el editor de reglas se especifica en la instrucción WHEN.

  3. Toque la lista desplegable Seleccionar estado y seleccione se cambia.

    whparticipstomeridischanged

    En la instrucción ENTONCES, seleccione Invocar servicio en la lista desplegable Seleccionar acción.

  4. Cambie de Editor visual a Editor de código. El control del interruptor se encuentra en el lado derecho de la ventana. Se abre el Editor de código, que muestra código similar al siguiente:

    code-editor

  5. Reemplace la sección de variables de entrada con el siguiente código:

    var inputs = {
        "id" : this
    };
    
  6. Reemplace la sección guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) con el siguiente código:

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. Previsualización del formulario adaptable. Introduzca un ID de cliente incorrecto. Aparece un mensaje de error.

    display-validation-error

En esta página