Show Menu
TEMAS×

Tutorial: Aplicación de reglas a campos de formulario adaptables

Este tutorial es un paso de la serie Crear su primer formulario adaptable. Adobe recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar 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 el editor de reglas de formularios adaptables.
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 formularios 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.
  2. Toque el campo ID ​del cliente y 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 cambiará .
  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 desde la ficha Objetos de formulario al objeto Colocar o seleccione aquí en el cuadro ENTRADA .
  8. Arrastre y suelte los campos ID de cliente, Nombre, Dirección de envío, Estado y Código postal desde la ficha Objetos de formulario al objeto Colocar o seleccione este campo en el cuadro RESULTADO .
    Toque Hecho para guardar la regla. En la ventana del editor de reglas, toque Cerrar .
  9. Obtenga una vista previa del formulario adaptable. Introduzca un ID en el campo ID del cliente. El formulario ahora puede recuperar los detalles del cliente de la base de datos.

Paso 2: Agregar 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 Enviar: haga clic en la regla y toque el icono Editar . Aparecerán las opciones para editar la regla Enviar.
    En la opción WHEN, las opciones Enviar y se hace clic ya están seleccionadas.
  3. En la opción ENTONCES , toque la opción + Agregar 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 .
  5. Arrastre y suelte los campos Dirección de envío, Estado y Código postal desde la ficha Objetos de formulario hasta la correspondiente propiedad .property (por ejemplo, customerdetails.ShippingAddress) del objeto Drop o seleccione este campo en el cuadro ENTRADA . 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.
    No arrastre y suelte los campos Nombre e ID del cliente en la propiedad correspondiente tablename.property (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 desde la ficha Objetos del formulario hasta el campo id 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 de detalles del cliente.
  7. Toque Hecho para guardar la regla. En la ventana del editor de reglas, toque Cerrar .
  8. Obtenga una vista previa 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 de 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. Puntee en el campo ID del cliente y toque el Edit Rules icono. 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 cambiará .
    En la instrucción ENTONCES , seleccione Invocar servicio en la lista desplegable Seleccionar acción .
  4. Cambie del Editor ​visual al 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:
  5. Reemplace la sección de variables de entrada con el siguiente código:
    var inputs = {
        "id" : this
    };
    
    
  6. Reemplace la sección guía lib.dataIntegrationUtils.executeOperation (operationInfo, entradas, salidas) 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. Obtenga una vista previa del formulario adaptable. Introduzca un ID de cliente incorrecto. Aparece un mensaje de error.