Criar uma função personalizada para um formulário adaptável com base nos Componentes principais

O Forms adaptável baseado em Componentes principais oferece experiências dinâmicas de usuário, ajustando o conteúdo e o comportamento com base na entrada do usuário. As funções personalizadas permitem que os desenvolvedores estendam a funcionalidade, garantindo que os formulários possam atender a requisitos específicos. Ao integrar funções personalizadas, os desenvolvedores podem implementar lógica complexa, automatizar processos e introduzir interações exclusivas que se alinham a requisitos de negócios específicos ou expectativas do usuário. Garante que os formulários não só se adaptem a condições variáveis, mas também forneçam uma solução mais precisa e eficaz para casos de uso diversos.
Este artigo orienta você pelas etapas da criação de funções personalizadas para o Adaptive Forms usando componentes principais.

Considerações

Pré-requisitos para criar uma função personalizada

Antes de começar a adicionar uma função personalizada ao Adaptive Forms, verifique se você tem o seguinte:

Software:

Criar uma função personalizada create-custom-function

Crie uma biblioteca do cliente para chamar funções personalizadas no editor de regras. Para obter mais informações, consulte Usando bibliotecas do lado do cliente.

As etapas para criar funções personalizadas são:

Criar uma biblioteca do cliente create-client-library

É possível adicionar funções personalizadas adicionando uma biblioteca do cliente. Para criar uma biblioteca do cliente, execute as seguintes etapas:

Clonar o Repositório

Clonar o Repositório as a Cloud Service do AEM Forms:

Este comando faz o download do repositório e cria uma pasta local do repositório clonado no computador. Neste guia, nos referimos a essa pasta como o [diretório do projeto AEMaaCS].

Adicionar uma pasta da biblioteca do cliente

Para adicionar uma nova pasta da biblioteca do cliente ao [diretório do projeto AEMaaCS], siga estas etapas:

Adicionar arquivos e pastas à pasta da Biblioteca do Cliente

Adicione o seguinte à pasta da biblioteca do cliente adicionada:

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

Incluir a nova pasta no filter.xml:

Implante a pasta da biblioteca do cliente recém-criada no seu ambiente AEM

Implante o AEM as a Cloud Service, [diretório do projeto AEMaaCS], no seu ambiente Cloud Service. Para implantar no ambiente de Cloud Service:

Se você ainda não tiver configurado um pipeline, consulte o manual sobre como configurar um pipeline para o AEM Forms as a Cloud Service.

Depois que o pipeline for executado com êxito, a função personalizada adicionada à biblioteca do cliente ficará disponível em seu editor de regras de Formulário adaptável.

Adicionar a biblioteca do cliente a um Formulário adaptável use-custom-function

Depois de implantar a biblioteca do cliente no ambiente do Forms CS, use os recursos dela no Formulário adaptável. Para adicionar a biblioteca do cliente no Formulário adaptável

Você pode usar a função personalizada no editor de regras de um Formulário Adaptável usando as anotações do JavaScript.

Uso de uma função personalizada em um Formulário adaptável

Em um Formulário adaptável, você pode usar funções personalizadas no editor de regras. Vamos adicionar o seguinte código ao arquivo JavaScript (arquivo Function.js) para calcular a idade com base na Data de Nascimento (AAAA-MM-DD). Crie uma função personalizada como calculateAge() que use a data de nascimento como entrada e retorne a idade:

    /**
        * 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;
    }

No exemplo acima, quando o usuário insere a data de nascimento no formato (AAAA-MM-DD), a função personalizada calculateAge é invocada e retorna a idade.

Vamos visualizar o formulário para observar como as funções personalizadas são implementadas por meio do editor de regras:

Recursos de funções personalizadas

As funções personalizadas em formulários AEM oferecem uma solução robusta para estender e personalizar a funcionalidade de seus formulários. Você pode usar as funções personalizadas para atender às necessidades específicas de sua organização.

Essas funções oferecem suporte a várias funcionalidades, incluindo o trabalho com campos específicos, o uso de campos globais e operações assíncronas, além de incorporar mecanismos de armazenamento em cache. Essa flexibilidade garante que os formulários possam se adaptar a requisitos complexos e fornecer uma experiência do usuário eficiente e personalizada. Ao utilizar esses recursos avançados, você pode aprimorar as interações de formulários e otimizar o desempenho, tornando seus formulários AEM mais funcionais e ágeis.

Vamos analisar os recursos de funções personalizadas.

Suporte assíncrono em funções personalizadas support-of-async-functions

As funções personalizadas assíncronas não aparecem na lista do editor de regras. No entanto, é possível chamar funções assíncronas em funções personalizadas criadas usando expressões de função síncrona.

Examine o código abaixo para ver como podemos chamar funções assíncronas usando funções 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);
    });
}

No exemplo acima, a função asyncFunction é um asynchronous function. Ele executa uma operação assíncrona fazendo uma solicitação GET para https://petstore.swagger.io/v2/store/inventory. Ele aguarda a resposta usando await, analisa o corpo da resposta como JSON usando response.json() e retorna os dados. A função callAsyncFunction é uma função personalizada síncrona que chama a função asyncFunction e exibe os dados de resposta no console. Embora a função callAsyncFunction seja síncrona, ela chama a função asyncFunction assíncrona e manipula seu resultado com instruções then e catch.

Para ver seu funcionamento, vamos adicionar um botão e criar uma regra para o botão que chama a função assíncrona em um clique de botão.

Consulte a ilustração da janela de console abaixo para demonstrar que, quando o usuário clica no botão Fetch, a função personalizada callAsyncFunction é invocada, o que, por sua vez, chama uma função assíncrona asyncFunction. Inspect na janela do console para exibir a resposta ao clique de botão:

Suporte a objetos de escopo de campo e global em funções personalizadas support-field-and-global-objects

Os objetos Field referem-se aos componentes ou elementos individuais em um formulário, como campos de texto e caixas de seleção. O objeto Globals contém variáveis somente leitura, como instância de formulário, instância de campo de destino e métodos para fazer modificações de formulário em funções personalizadas.

Suporte de cache na função personalizada

O Forms adaptável implementa o armazenamento em cache de funções personalizadas para melhorar o tempo de resposta ao recuperar a lista de funções personalizadas no editor de regras. Uma mensagem como Fetched following custom functions list from cache aparece no arquivo error.log.

Caso as funções personalizadas sejam modificadas, o armazenamento em cache é invalidado e é analisado.

Resolução de problemas

Próxima etapa

Vamos ver vários exemplos de funções personalizadas para um Formulário adaptável com base nos Componentes principais.

Consulte também