Documentação AEM 6.5 LTS Guia do usuário

Funções personalizadas nos Componentes principais do Forms adaptável

Última atualização: 5 de maio de 2025

Aplica-se a:
Experience Manager 6.5 LTS

Criado para:

Administrador
Usuário
Desenvolvedor

Este artigo descreve como criar funções personalizadas com o componente principal de formulário adaptável mais recente, que tem os recursos mais recentes, como:

Recurso de armazenamento em cache para funções personalizadas
Suporte a objetos de escopo global e objetos de campo para Funções personalizadas
Suporte para recursos modernos do JavaScript, como funções de esquerda e seta (suporte para ES10)

Defina a versão mais recente do formulário no ambiente do Componente principal do AEM Forms para usar os recursos mais recentes nas Funções personalizadas.

Versão	Link do artigo
AEM 6.5	Este artigo
AEM as a Cloud Service	Clique aqui

Introdução

O AEM Forms 6.5 inclui funções do JavaScript que permitem definir regras de negócios complexas usando o editor de regras. Embora o AEM Forms ofereça várias funções personalizadas prontas para uso, muitos casos de uso exigem a definição de suas próprias funções personalizadas para serem usadas em vários formulários. Essas funções personalizadas aprimoram os recursos de formulários permitindo que a manipulação e o processamento dos dados inseridos atendam a requisitos específicos. Além disso, elas permitem a alteração dinâmica do comportamento do formulário com base nos critérios predefinidos.

Usos de funções personalizadas

As vantagens de usar funções personalizadas nos Componentes principais do Forms adaptável são:

Gerenciamento de dados: funções personalizadas gerenciam e processam dados inseridos nos campos de formulários.
Processamento de dados: as funções personalizadas ajudam a processar dados inseridos nos campos de formulários.
Validação de dados: as funções personalizadas permitem que você execute verificações personalizadas nas entradas do formulário e forneça mensagens de erro especificadas.
Comportamento dinâmico: as funções personalizadas permitem que você controle o comportamento dinâmico de seus formulários com base em condições específicas. Por exemplo, você pode mostrar/ocultar campos, modificar valores de campo ou ajustar a lógica do formulário dinamicamente.
Integração: você pode usar funções personalizadas para integrar-se a APIs ou serviços externos. Ele ajuda a buscar dados de fontes externas, enviar dados para endpoints Rest externos ou executar ações personalizadas com base em eventos externos.

As funções personalizadas são essencialmente bibliotecas de clientes adicionadas ao arquivo do JavaScript. Depois de criar uma Função personalizada, ela fica disponível no editor de regras para seleção pelo usuário em um Formulário adaptável. As funções personalizadas são identificadas pelas anotações do JavaScript no editor de regras.

Anotações do JavaScript compatíveis com a função personalizada

As anotações do JavaScript fornecem metadados para o código JavaScript. Inclui comentários que começam com símbolos específicos, por exemplo, /** e @. As anotações fornecem informações importantes sobre funções, variáveis e outros elementos no código. O Formulário adaptável é compatível com as seguintes anotações do JavaScript para funções personalizadas:

Nome

O Name é usado para identificar a função personalizada no editor de regras de um formulário adaptável. As seguintes sintaxes são usadas para nomear uma Função Personalizada:

@name [functionName] <Function Name>
@function [functionName] <Function Name>
@func [functionName] <Function Name>

NOTE

[functionName] é o nome da função. Espaços não são permitidos.
<Function Name> é o nome de exibição da função no editor de regras do Adaptive Forms.
Se o nome da função for idêntico ao nome da própria função, você poderá omitir [functionName] da sintaxe.

Parâmetro

O Parâmetro é uma lista de argumentos usados por funções personalizadas. Uma função pode suportar vários parâmetros. As sintaxes a seguir são usadas para definir um parâmetro em uma função personalizada:

@param {type} name <Parameter Description>
@argument {type} name <Parameter Description>
@arg {type} name <Parameter Description>

{type} representa o tipo de parâmetro. Os tipos de parâmetros permitidos são:
- string: representa um único valor de string.
- number: representa um único valor numérico.
- booleano: representa um único valor booleano (verdadeiro ou falso).
- cadeia de caracteres []: representa uma matriz de valores de cadeia de caracteres.
- número[]: representa uma matriz de valores numéricos.
- booleano[]: representa uma matriz de valores booleanos.
- date: representa um único valor de data.
- date[]: representa uma matriz de valores de data.
- array: representa uma matriz genérica contendo valores de vários tipos.
- object: representa o objeto de formulário passado para uma função personalizada em vez de passar seu valor diretamente.
- escopo: representa o objeto global, que contém variáveis somente leitura, como instâncias de formulário, instâncias de campo de destino e métodos para executar modificações de formulário nas funções personalizadas. Ele é declarado como o último parâmetro nas anotações do JavaScript e não está visível para o editor de regras de um Formulário adaptável. O parâmetro scope acessa o objeto do formulário ou componente para acionar a regra ou o evento necessário para o processamento do formulário. Para obter mais informações sobre o objeto Globals e como usá-lo, clique aqui

O tipo Parameter é não diferencia maiúsculas de minúsculas e espaços não são permitidos no nome do parâmetro.

<Parameter Description> contém detalhes sobre a finalidade do parâmetro. Ele pode ter várias palavras.

Tipo de retorno

O tipo de retorno especifica o tipo de valor que a função personalizada retorna após a execução. As sintaxes a seguir são usadas para definir um tipo de retorno em uma função personalizada:

@return {type}
@returns {type}
{type} representa o tipo de retorno da função. Os tipos de retorno permitidos são:
string: representa um único valor de string.
number: representa um único valor numérico.
booleano: representa um único valor booleano (verdadeiro ou falso).
cadeia de caracteres []: representa uma matriz de valores de cadeia de caracteres.
número[]: representa uma matriz de valores numéricos.
booleano[]: representa uma matriz de valores booleanos.
date: representa um único valor de data.
date[]: representa uma matriz de valores de data.
array: representa uma matriz genérica contendo valores de vários tipos.
object: representa o objeto de formulário diretamente em vez do seu valor.

O tipo de retorno não diferencia maiúsculas de minúsculas.

Privado

A função personalizada, declarada como privada, não aparece na lista de funções personalizadas no editor de regras de um formulário adaptável. Por padrão, as funções personalizadas são públicas. A sintaxe para declarar função personalizada como privada é @private.

Diretrizes ao criar funções personalizadas

Para listar as funções personalizadas no editor de regras, você pode usar qualquer um dos seguintes formatos:

Instrução Function com ou sem comentários jsdoc

Você pode criar uma função personalizada com ou sem comentários jsdoc.

    function functionName(parameters)
        {
            // code to be executed
        }

Se o usuário não adicionar anotações do JavaScript à função personalizada, ela será listada no editor de regras pelo nome da função. No entanto, é recomendável incluir anotações do JavaScript para melhorar a legibilidade das funções personalizadas.

Função de seta com anotações ou comentários obrigatórios do JavaScript

É possível criar uma função personalizada com uma sintaxe de função de seta:

    /**
    * test function
    * @name testFunction
    * @param {string} a parameter description
    * @param {string=} b parameter description
    * @return {string}
    */
    testFunction = (a, b) => {
    return a + b;
    };
    /** */
    testFunction1=(a) => (return a)
    /** */
    testFunction2 = a => a + 100;

Se o usuário não adicionar anotações JavaScript à função personalizada, a função personalizada não será listada no editor de regras de um Formulário adaptável.

Expressão de função com anotações ou comentários obrigatórios do JavaScript

Para listar funções personalizadas no editor de regras de um Formulário adaptável, crie funções personalizadas no seguinte formato:

    /**
    * test function
    * @name testFunction
    * @param {string} input1 parameter description
    * @param {string=} input2 parameter description
    * @return {string}
    */
    testFunction = function(input1,input2)
        {
            // code to be executed
        }

Se o usuário não adicionar anotações JavaScript à função personalizada, a função personalizada não será listada no editor de regras de um Formulário adaptável.

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 instalado em sua máquina:

Editor de Texto sem Formatação (IDE): embora qualquer editor de texto sem formatação possa funcionar, um IDE (Ambiente de Desenvolvimento Integrado) como o Microsoft Visual Studio Code oferece recursos avançados para facilitar a edição.
Git: este sistema de controle de versão é necessário para gerenciar alterações de código. Se não estiver instalado, baixe-o de https://git-scm.com.

Criar uma função personalizada

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

Crie uma biblioteca do lado do cliente usando o Arquétipo de Projeto do AEM e adicione uma função personalizada
OU
Criar funções personalizadas através do CRXDE
Adicionar a biblioteca do cliente a um Formulário adaptável
Usar função personalizada em um formulário adaptável

Criar uma biblioteca do cliente usando o Arquétipo de projeto do AEM

Você pode adicionar funções personalizadas adicionando uma biblioteca do cliente ao projeto criado usando o Arquétipo de Projetos AEM.
Se você tiver um projeto existente , poderá adicionar diretamente funções personalizadas ao seu projeto local.

Depois de criar um Projeto do Arquétipo ou usar um projeto existente, crie uma biblioteca do cliente. Para criar uma biblioteca do cliente, execute as seguintes etapas:

Adicionar uma pasta da biblioteca do cliente

Para adicionar uma nova pasta da biblioteca do cliente ao seu [diretório do projeto AEM], siga as etapas abaixo:

Abra o [diretório do projeto AEM] em um editor.
Localizar ui.apps.
Adicionar nova pasta. Por exemplo, adicione uma pasta chamada experience-league.
Navegue até a pasta /experience-league/ e adicione um ClientLibraryFolder. Por exemplo, crie uma pasta da biblioteca do cliente chamada customclientlibs.

O local é: [AEM project directory]/ui.apps/src/main/content/jcr_root/apps/

Adicionar arquivos e pastas à pasta da Biblioteca do Cliente

Adicione o seguinte à pasta da biblioteca do cliente adicionada:

.content.xml arquivo
js.txt arquivo
Pasta js

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

Em .content.xml, adicione as seguintes linhas de código:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[customfunctionscategory]"/>

NOTE

Você pode escolher qualquer nome para a propriedade client library folder e categories.

Em js.txt, adicione as seguintes linhas de código:
#base=js function.js

Na pasta js, adicione o arquivo javascript como function.js, o que inclui as funções personalizadas:

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

Salve os arquivos.

estrutura de pasta de função personalizada

Incluir a nova pasta no filter.xml:

Navegue até o arquivo /ui.apps/src/main/content/META-INF/vault/filter.xml no seu [diretório do projeto AEMaaCS].
Abra o arquivo e adicione a seguinte linha no final:

<filter root="/apps/experience-league" />
Salve o arquivo.
Crie a pasta da biblioteca do cliente recém-criada em seu ambiente AEM seguindo as etapas fornecidas na seção Como criar.

Criar e implantar funções personalizadas por meio do CRXDE

Se você estiver usando o complemento mais recente do AEM Forms e do Forms, poderá criar uma função personalizada por meio do CRXDE para usar as atualizações mais recentes de funções personalizadas. Para fazer isso, execute as seguintes etapas:

Faça logon em http://server:port/crx/de/index.jsp#.
Crie uma pasta na pasta /apps. Por exemplo, crie uma pasta chamada experience-league.
Salve as alterações.
Navegue até a pasta criada e crie um nó do tipo cq:ClientLibraryFolder como clientlibs.
Navegue até a pasta clientlibs recém-criada e adicione as propriedades allowProxy e categories:

NOTE
Você pode fornecer qualquer nome no lugar de customfunctionsdemo.
Salve as alterações.
Crie uma pasta chamada js na pasta clientlibs.
Crie um arquivo JavaScript chamado functions.js na pasta js.
Crie um arquivo chamado js.txt na pasta clientlibs.
Salve as alterações.
A estrutura de pastas criada é semelhante a:

Clique duas vezes no arquivo functions.js para abrir o editor. O arquivo é composto pelo código da função personalizada.
Vamos adicionar o seguinte código ao arquivo do JavaScript para calcular a idade com base na Data de nascimento (AAAA-MM-DD).

    /**
         * Calculates Age
         * @name calculateAge
         * @return {string}
    */

    function calculateAge(dateOfBirthString) {
    var dob = new Date(dateOfBirthString);
    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;
    }

Salve function.js.
Navegue até js.txt e adicione o seguinte código:
#base=js functions.js
Salve o arquivo js.txt.

Você pode consultar a seguinte pasta função personalizada. Baixe e instale essa pasta na instância do AEM.

Agora, você pode usar a função personalizada no Formulário adaptável adicionando a biblioteca do cliente.

Adicionar biblioteca do cliente em um Formulário adaptável

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

Abra o formulário no modo de edição. Para abrir um formulário no modo de edição, selecione um formulário e selecione Editar.
Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
Clique no ícone de propriedades do Contêiner do guia. A caixa de diálogo Contêiner de formulário adaptável é aberta.
Abra a guia Básico e selecione o nome da categoria da biblioteca do cliente na lista suspensa (neste caso, selecione customfunctionscategory).
Clique em Concluído.

Agora, é possível criar uma regra para usar funções personalizadas no editor de regras:

Adicionando a biblioteca cliente de função personalizada

Agora, vamos entender como configurar e usar uma função personalizada usando o serviço Chamar do Editor de regras no AEM Forms 6.5

Utilização da 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.

Função personalizada Calcular Idade no Editor de Regras

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

Função personalizada Calcular Idade na Visualização de Formulário do Editor de Regras

NOTE

Você pode consultar a seguinte pasta funções personalizadas. Baixe e instale esta pasta na instância do AEM usando o Gerenciador de Pacotes.

Suporte para funções assíncronas em funções personalizadas

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.

Função personalizada síncrona e assíncrona

NOTE

A vantagem de chamar funções assíncronas em funções personalizadas é que as funções assíncronas permitem a execução simultânea de várias tarefas, com o resultado de cada função usada nas funções personalizadas.

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.

criando regra para função assíncrona

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. Inspecione a janela do console para exibir a resposta ao clicar no botão:

Janela de console

Vamos analisar os recursos de funções personalizadas.

Vários recursos para funções personalizadas

Você pode usar funções personalizadas para adicionar recursos personalizados a formulários. Essas funções oferecem suporte a várias habilidades, como trabalhar com campos específicos, usar campos globais ou armazenar em cache. Essa flexibilidade permite personalizar formulários de acordo com os requisitos de sua organização.

Objetos de escopo de campo e global em funções personalizadas

Objetos de campo 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.

NOTE

O param {scope} globals deve ser o último parâmetro e não é exibido no editor de regras de um Formulário adaptável.

Saiba como as funções personalizadas usam campos e objetos globais com a ajuda de um formulário Contact Us usando diferentes casos de uso.

Formulário Contate-nos

Caso de uso: mostrar um painel usando a regra `SetProperty`

Adicione o seguinte código na função personalizada, como explicado na seção create-custom-function, para definir o campo de formulário como Required.


    /**
    * enablePanel
    * @name enablePanel
    * @param {object} field1
    * @param {object} field2
    * @param {scope} globals
    */

    function enablePanel(field1,field2, globals)
    {
       if(globals.functions.validate(field1).length === 0)
       {
       globals.functions.setProperty(field2, {visible: true});
       }
    }

NOTE

Você pode configurar as propriedades de campo usando as propriedades disponíveis localizadas em [form-path]/jcr:content/guideContainer.model.json.
As modificações feitas no formulário usando o método setProperty do objeto Globals são de natureza assíncrona e não são refletidas durante a execução da função personalizada.

Neste exemplo, a validação do painel personaldetails ocorre ao clicar no botão. Se nenhum erro for detectado no painel, outro painel, o painel feedback, ficará visível ao clicar no botão.

Vamos criar uma regra para o botão Next, que valida o painel personaldetails e torna o painel feedback visível quando o usuário clica no botão Next.

Definir Propriedade

Consulte a ilustração abaixo para demonstrar onde o painel personaldetails é validado ao clicar no botão Next. Caso todos os campos em personaldetails sejam validados, o painel feedback ficará visível.

Definir Propriedade de Visualização de Formulário

Se houver erros nos campos do painel personaldetails, eles serão exibidos no nível do campo ao clicar no botão Next e o painel feedback permanecerá invisível.

Definir Propriedade de Visualização de Formulário

Caso de uso: validar o campo.

Adicione o seguinte código na função personalizada conforme explicado na seção create-custom-function para validar o campo.

    /**
    * validateField
    * @name validateField
    * @param {object} field
    * @param {scope} globals
    */
    function validateField(field,globals)
    {

        globals.functions.validate(field);

    }

NOTE

Se nenhum argumento for passado na função validate(), ele validará o formulário.

Neste exemplo, um padrão de validação personalizado é aplicado ao campo contact. Os usuários precisam inserir um número de telefone começando com 10 seguido de 8 dígitos. Se o usuário digitar um número de telefone que não comece com 10 ou contenha mais ou menos de 8 dígitos, uma mensagem de erro de validação será exibida ao clicar no botão:

Padrão de Validação de Endereço de Email

Agora, a próxima etapa é criar uma regra para o botão Next que valide o campo contact no clique de botão.

Padrão de validação

Consulte a ilustração abaixo para demonstrar que, se o usuário digitar um número de telefone que não comece com 10, uma mensagem de erro será exibida no nível do campo:

Padrão de Validação de Endereço de Email

Se o usuário digitar um número de telefone válido e todos os campos no painel personaldetails forem validados, o painel feedback aparecerá na tela:

Padrão de Validação de Endereço de Email

Caso de uso: redefinir um painel

Adicione o seguinte código na função personalizada, como explicado na seção create-custom-function, para redefinir o painel.

    /**
    * resetField
    * @name  resetField
    * @param {string} input1
    * @param {object} field
    * @param {scope} globals
    */
    function  resetField(field,globals)
    {

        globals.functions.reset(field);

    }

NOTE

Se nenhum argumento for passado na função reset(), ele validará o formulário.

Neste exemplo, o painel personaldetails é redefinido ao clicar no botão Clear. A próxima etapa é criar uma regra para o botão Clear que redefina o painel no clique do botão.

Botão Limpar

Consulte a ilustração abaixo para mostrar que, se o usuário clicar no botão clear, o painel personaldetails será redefinido:

Redefinir Formulário

Caso de uso: para exibir uma mensagem personalizada no nível do campo e marcar o campo como inválido

Você pode usar a função markFieldAsInvalid() para definir um campo como inválido e definir uma mensagem de erro personalizada em nível de campo. O valor fieldIdentifier pode ser fieldId, field qualifiedName ou field dataRef. O valor do objeto nomeado option pode ser {useId: true}, {useQualifiedName: true} ou {useDataRef: true}.
As sintaxes usadas para marcar o campo como inválido e definir uma mensagem personalizada são:

globals.functions.markFieldAsInvalid(field.$id,"[custom message]",{useId: true});
globals.functions.markFieldAsInvalid(field.$qualifiedName, "[custom message]", {useQualifiedName: true});
globals.functions.markFieldAsInvalid(field.$dataRef, "[custom message]", {useDataRef: true});

Adicione o seguinte código na função personalizada conforme explicado na seção create-custom-function para habilitar a mensagem personalizada no nível do campo.

    /**
    * customMessage
    * @name customMessage
    * @param {object} field
    * @param {scope} globals
    */
    function customMessage(field, globals) {
    const minLength = 15;
    const comments = field.$value.trim();
    if (comments.length < minLength) {
        globals.functions.markFieldAsInvalid(field.$id, "Comments must be at least 15 characters long.", { useId: true });
    }
}

Neste exemplo, se o usuário inserir menos de 15 caracteres na caixa de texto comentários, uma mensagem personalizada será exibida no nível do campo.

A próxima etapa é criar uma regra para o campo comments:

Marcar campo como Inválido

Veja a demonstração abaixo para mostrar que inserir comentários negativos no campo comments aciona a exibição de uma mensagem personalizada no nível do campo:

Marcar campo como Formulário de visualização inválido

Se o usuário inserir mais de 15 caracteres na caixa de texto de comentários, o campo será validado e o formulário será enviado:

Marcar campo como formulário de Visualização válido

Caso de uso: enviar dados alterados para o servidor

A seguinte linha de código:
globals.functions.submitForm(globals.functions.exportData(), false); é usado para enviar os dados do formulário após manipulação.

O primeiro argumento diz respeito aos dados a apresentar.
O segundo argumento representa se o formulário deve ser validado antes do envio. Ele é optional e definido como true por padrão.
O terceiro argumento é o contentType do envio, que também é opcional com o valor padrão como multipart/form-data. Os outros valores podem ser application/json e application/x-www-form-urlencoded.

Adicione o seguinte código na função personalizada, conforme explicado na seção create-custom-function, para enviar os dados manipulados no servidor:

    /**
    * submitData
    * @name submitData
    * @param {object} field
    * @param {scope} globals
    */
    function submitData(globals)
    {

    var data = globals.functions.exportData();
    if(!data.comments) {
    data.comments = 'NA';
    }
    console.log('After update:{}',data);
    globals.functions.submitForm(data, false);
    }

Neste exemplo, se o usuário deixar a caixa de texto comments vazia, o NA será enviado ao servidor no envio do formulário.

Agora crie uma regra para o botão Submit que envia dados:

Enviar dados

Consulte a ilustração da console window abaixo para demonstrar que, se o usuário deixar a caixa de texto comments vazia, o valor como NA será enviado ao servidor:

Enviar dados na janela do console

Você também pode inspecionar a janela do console para visualizar os dados enviados para o servidor:

Inspecionar dados na janela do console

Suporte de cache para 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.

função personalizada com suporte a cache

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

Resolução de problemas

O usuário precisa garantir que o componente principal e a versão da especificação estejam definidos com a versão mais recente. No entanto, para projetos e formulários existentes do AEM, há etapas adicionais a seguir:
- Para o projeto AEM, o usuário deve substituir todas as instâncias de submitForm('custom:submitSuccess', 'custom:submitError') por submitForm() e implantar o projeto.
- Para formulários existentes, se os manipuladores de envio personalizados não estiverem funcionando corretamente, o usuário precisará abrir e salvar a regra submitForm no botão Enviar usando o Editor de Regras. Esta ação substitui a regra existente de submitForm('custom:submitSuccess', 'custom:submitError') por submitForm() no formulário.
Se o arquivo JavaScript que contém o código para funções personalizadas tiver um erro, as funções personalizadas não serão listadas no editor de regras de um Formulário adaptável. Para verificar a lista de funções personalizadas, você pode navegar até o arquivo error.log para localizar o erro. No caso de um erro, a lista de funções personalizadas aparece vazia:

Caso não haja erro, as funções personalizadas são buscadas e aparecem no arquivo error.log. Uma mensagem como Fetched following custom functions list aparece no arquivo error.log:

Considerações

O parameter type e o return type não dão suporte a None.
As funções não suportadas na lista de funções personalizadas são:
- Funções geradoras
- Funções assíncronas/Await
- Definições de método
- Métodos de classe
- Parâmetros padrão
- Parâmetros rest

recommendation-more-help

Funções personalizadas nos Componentes principais do Forms adaptável

Introdução

Usos de funções personalizadas

Anotações do JavaScript compatíveis com a função personalizada

Nome

Parâmetro

Tipo de retorno

Privado

Diretrizes ao criar funções personalizadas

Instrução Function com ou sem comentários jsdoc

Função de seta com anotações ou comentários obrigatórios do JavaScript

Expressão de função com anotações ou comentários obrigatórios do JavaScript

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

Criar uma função personalizada

Criar uma biblioteca do cliente usando o Arquétipo de projeto do AEM

Criar e implantar funções personalizadas por meio do CRXDE

Adicionar biblioteca do cliente em um Formulário adaptável

Utilização da função personalizada em um formulário adaptável

Suporte para funções assíncronas em funções personalizadas

Vários recursos para funções personalizadas

Objetos de escopo de campo e global em funções personalizadas

Caso de uso: mostrar um painel usando a regra SetProperty

Caso de uso: validar o campo.

Caso de uso: redefinir um painel

Caso de uso: para exibir uma mensagem personalizada no nível do campo e marcar o campo como inválido

Caso de uso: enviar dados alterados para o servidor

Suporte de cache para função personalizada

Resolução de problemas

Considerações

Caso de uso: mostrar um painel usando a regra `SetProperty`