Crear una función personalizada para un formulario adaptable basado en componentes principales

Los Forms adaptables basados en componentes principales ofrecen experiencias de usuario dinámicas al ajustar el contenido y el comportamiento en función de los datos introducidos por el usuario. Las funciones personalizadas permiten a los desarrolladores ampliar la funcionalidad, lo que garantiza que los formularios puedan satisfacer requisitos específicos. Al integrar funciones personalizadas, los desarrolladores pueden implementar lógicas complejas, automatizar procesos e introducir interacciones únicas que se alineen con los requisitos comerciales específicos o las expectativas de los usuarios. Garantiza que los formularios no solo se adapten a condiciones diferentes, sino que también proporcionen una solución más precisa y eficaz para casos de uso diversos.
Este artículo le guía a través de los pasos para crear funciones personalizadas para Forms adaptable mediante componentes principales.

Consideraciones

Requisitos previos para crear una función personalizada

Antes de empezar a agregar una función personalizada a su Forms adaptable, asegúrese de que dispone de lo siguiente:

Software:

Creación de una función personalizada create-custom-function

Cree una biblioteca de cliente para llamar a funciones personalizadas en el editor de reglas. Para obtener más información, consulte Uso de bibliotecas del lado del cliente.

Los pasos para crear funciones personalizadas son los siguientes:

Crear una biblioteca de cliente create-client-library

Puede agregar funciones personalizadas agregando una biblioteca de cliente. Para crear una biblioteca de cliente, realice los siguientes pasos:

Clonar el repositorio

Clonar su repositorio as a Cloud Service de AEM Forms:

Este comando descarga el repositorio y crea una carpeta local del repositorio clonado en el equipo. En esta guía, nos referimos a esta carpeta como el [directorio del proyecto AEMaaCS].

Agregar una carpeta de biblioteca de cliente

Para agregar una nueva carpeta de biblioteca de cliente al [directorio del proyecto AEMaaCS], siga estos pasos:

Agregar archivos y carpetas a la carpeta Biblioteca de cliente

Agregue lo siguiente a la carpeta de biblioteca de cliente agregada:

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

Incluir la nueva carpeta en filter.xml:

AEM Implemente la carpeta Client library recién creada en su entorno de la biblioteca de cliente

Implemente AEM as a Cloud Service, [directorio del proyecto AEMaaCS], en su entorno de Cloud Service. Para implementarlo en el entorno de Cloud Service:

Si aún no ha configurado una canalización, consulte la guía sobre cómo configurar una canalización para AEM Forms as a Cloud Service.

Una vez que la canalización se haya ejecutado correctamente, la función personalizada agregada en la biblioteca de cliente estará disponible en el editor de reglas de formularios adaptables.

Agregar una biblioteca de cliente a un formulario adaptable use-custom-function

Una vez que haya implementado la biblioteca de cliente en el entorno de Forms CS, utilice sus funcionalidades en el formulario adaptable. Para agregar la biblioteca de cliente en el formulario adaptable

Puede usar la función personalizada en el editor de reglas de un formulario adaptable mediante las anotaciones de JavaScript.

Usar una función personalizada en un formulario adaptable

En un formulario adaptable, puede usar funciones personalizadas dentro del editor de reglas. Agregue el siguiente código al archivo JavaScript (archivo Function.js) para calcular la edad en función de la fecha de nacimiento (DD-MM-AAAA). Cree una función personalizada como calculateAge() que tome la fecha de nacimiento como entrada y devuelva la edad:

    /**
        * Calculates Age
        * @name calculateAge
        * @param {object} field
        * @return {string}
    */

    function calculateAge(field) {
    var dob = new Date(field);
    var now = new Date();

    var age = now.getFullYear() - dob.getFullYear();
    var monthDiff = now.getMonth() - dob.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
    }

    return age;
    }

En el ejemplo anterior, cuando el usuario introduce la fecha de nacimiento con el formato (AAAA-MM-DD), se invoca la función personalizada calculateAge y se devuelve la edad.

Vamos a previsualizar el formulario para observar cómo se implementan las funciones personalizadas a través del editor de reglas:

Características de las funciones personalizadas

AEM Las funciones personalizadas de los formularios de la aplicación ofrecen una solución sólida para ampliar y personalizar la funcionalidad de los formularios. Puede utilizar las funciones personalizadas para satisfacer las necesidades específicas de su organización.

Estas funciones admiten varias funciones, como trabajar con campos específicos, utilizar campos globales y operaciones asincrónicas, así como incorporar mecanismos de almacenamiento en caché. Esta flexibilidad garantiza que los formularios se puedan adaptar a requisitos complejos y ofrecer una experiencia de usuario eficiente y adaptada. AEM Al aprovechar estas funciones avanzadas, puede mejorar las interacciones de los formularios y optimizar el rendimiento, lo que hace que los formularios de la aplicación sean más funcionales y adaptables.

Vamos a profundizar en las funciones personalizadas.

Compatibilidad asíncrona en funciones personalizadas support-of-async-functions

Las funciones personalizadas asincrónicas no aparecen en la lista del editor de reglas. Sin embargo, es posible invocar funciones asincrónicas dentro de funciones personalizadas creadas mediante expresiones de función sincrónicas.

Consulte el siguiente código para ver cómo se pueden invocar funciones asincrónicas mediante funciones personalizadas:

    async function asyncFunction() {
    const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
    const data = await response.json();
    return data;
    }

    /**
    * callAsyncFunction
    * @name callAsyncFunction callAsyncFunction
    */
    function callAsyncFunction() {
    asyncFunction()
        .then(responseData => {
        console.log('Response data:', responseData);
        })
        .catch(error => {
         console.error('Error:', error);
    });
}

En el ejemplo anterior, la función asyncFunction es un asynchronous function. Realiza una operación asincrónica realizando una solicitud GET a https://petstore.swagger.io/v2/store/inventory. Espera la respuesta con await, analiza el cuerpo de la respuesta como JSON con response.json() y, a continuación, devuelve los datos. La función callAsyncFunction es una función sincrónica personalizada que invoca la función asyncFunction y muestra los datos de respuesta en la consola. Aunque la función callAsyncFunction es sincrónica, llama a la función asyncFunction asincrónica y controla su resultado con instrucciones then y catch.

Para ver cómo funciona, vamos a agregar un botón y crear una regla para el botón que invoca la función asincrónica al hacer clic en un botón.

Consulte la ilustración de la ventana de la consola siguiente para demostrar que cuando el usuario hace clic en el botón Fetch, se invoca la función personalizada callAsyncFunction, que a su vez llama a una función asincrónica asyncFunction. Inspect abre la ventana de la consola para ver la respuesta al botón y hacer clic en:

Compatibilidad con objetos de ámbito global y de campo en funciones personalizadas support-field-and-global-objects

Los objetos de campo hacen referencia a los componentes o elementos individuales de un formulario, como campos de texto o casillas de verificación. El objeto Globals contiene variables de solo lectura como la instancia de formulario, la instancia del campo de destino y los métodos para realizar modificaciones de formulario dentro de funciones personalizadas.

Compatibilidad con el almacenamiento en caché en función personalizada

Los Forms adaptables implementan el almacenamiento en caché de funciones personalizadas para mejorar el tiempo de respuesta al recuperar la lista de funciones personalizadas en el editor de reglas. Aparece un mensaje como Fetched following custom functions list from cache en el archivo error.log.

En caso de que se modifiquen las funciones personalizadas, el almacenamiento en caché se invalidará y se analizará.

Resolución de problemas

Siguiente paso

Veamos ahora varios ejemplos de funciones personalizadas para un formulario adaptable basadas en componentes principales.

Consulte también