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

Este tutorial es un paso en la Crear el primer formulario adaptable serie. 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 de Forms adaptable.

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

• Invocar un servicio del Modelo de datos de formulario para recuperar datos de la base de datos
• Invocar un servicio del 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 interactivas de GIF 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

Se ha creado un modelo de datos de formulario siguiendo las crear modelo de datos de formulario artículo. 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 de clientes relevantes 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 . ID de cliente toque el campo Editar reglas icono. Se abre la ventana Editor de reglas.

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

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

4. Toque . Seleccionar estado y seleccione se cambia.

   

5. En el ENTONCES , seleccione Invocar servicio de la variable Seleccionar acción lista desplegable.

6. Seleccione el Recuperar dirección de envío del Select lista desplegable.

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

   

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

   

   Pulse Listo para guardar la regla. En la ventana del editor de reglas, pulse Cerrar.

9. Obtenga una vista previa del formulario adaptable. Introduzca un ID en la variable ID de cliente campo . El formulario ahora puede recuperar los detalles del cliente de la base de datos.

   

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 en la base de datos:

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

2. Seleccione el Enviar - Haga clic y pulse la Editar icono. Aparecerán las opciones para editar la regla Enviar.

   

   En la opción WHEN , la variable Submit y se hace clic ya están seleccionadas.

   

3. En el ENTONCES , pulse la opción + Agregar instrucción . Select Invocar servicio de la variable Seleccionar acción lista desplegable.

4. Seleccione el Actualizar dirección de envío del Select lista desplegable.

   

5. 

   Arrastre y suelte la Dirección de envío, estado y código postal del campo de la ficha Objetos de formulario a la propiedad .nombre de tabla correspondiente (por ejemplo, customerdetails.ShippingAddress) del Colocar objeto o seleccionar aquí en el campo ENTRADA en la ventana Todos los campos con el prefijo tablename (por ejemplo, los 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 la variable Nombre y ID de cliente a la propiedad tablename.property correspondiente (por ejemplo, customerdetails.name). Ayuda a evitar actualizar el nombre y el ID del cliente por error.

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

7. Pulse Listo para guardar la regla. En la ventana del editor de reglas, pulse Cerrar.

8. Obtenga una vista previa del formulario adaptable. Recupere detalles de un cliente, actualice la dirección de envío y envíe el formulario. Cuando recupere los detalles del mismo cliente de nuevo, se mostrará la dirección de envío actualizada.

Paso 3: (Sección Bonus) Utilice el editor de código para ejecutar las validaciones y mostrar los 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 debería 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 registros cero (0) (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. Toque . ID de cliente toque el campo Edit Rules icono. Se abre la ventana Editor de reglas.

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

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

3. Toque . Seleccionar estado y seleccione se cambia.

   

   En el ENTONCES , seleccione Invocar servicio de la variable Seleccionar acción lista desplegable.

4. Cambiar desde 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:

   

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

   var inputs = {
       "id" : this
   };
   

6. Reemplace la sección guidelib.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.

   

Recursos de Business.Adobe.com

Content Insights Content Intelligence Managed Cloud Version History Dynamic Forms Digital Rights Management