Funzioni personalizzate in Forms adattivo (componenti core)

Introduzione

AEM Forms supporta funzioni personalizzate che consentono agli utenti di definire funzioni JavaScript per l’implementazione di regole di business complesse. Queste funzioni personalizzate estendono le funzionalità dei moduli facilitando la manipolazione e l’elaborazione dei dati immessi per soddisfare requisiti specifici. Consentono inoltre di modificare dinamicamente il comportamento delle forme in base a criteri predefiniti.
In Adaptive Forms, puoi utilizzare funzioni personalizzate all’interno del editor di regole di un modulo adattivo per creare regole di convalida specifiche per i campi modulo.

Comprendiamo l’utilizzo della funzione personalizzata, in cui gli utenti immettono l’indirizzo e-mail e desideri che l’indirizzo e-mail inserito segua un formato specifico (contiene il simbolo "@" e un nome di dominio). Crea una funzione personalizzata come "ValidateEmail" che accetta l’indirizzo e-mail come input e restituisce true se è valido, altrimenti restituisce false.

function ValidateEmail(inputText)
{
    var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(inputText.value.match(email))
        {
            alert("Valid email address!");
            return true;
        }
    else
    {
        alert("Invalid email address!");
        return false;
    }
}

Nell’esempio precedente, quando l’utente tenta di inviare il modulo, viene richiamata la funzione personalizzata "ValidateEmail" per verificare se l’indirizzo e-mail inserito è valido.

Utilizzo di funzioni personalizzate uses-of-custom-function

L’utilizzo di funzioni personalizzate in Adaptive Forms offre i seguenti vantaggi:

  • Manipolazione dei dati: le funzioni personalizzate manipolano ed elaborano i dati immessi nei campi dei moduli.
  • Convalida dei dati: le funzioni personalizzate ti consentono di eseguire controlli personalizzati sugli input dei moduli e fornire messaggi di errore specifici.
  • Comportamento dinamico: le funzioni personalizzate consentono di controllare il comportamento dinamico dei moduli in base a condizioni specifiche. Ad esempio, è possibile visualizzare/nascondere campi, modificare i valori dei campi o modificare dinamicamente la logica del modulo.
  • Integrazione: puoi utilizzare funzioni personalizzate da integrare con API o servizi esterni. Consente di recuperare dati da origini esterne, inviare dati agli endpoint Rest esterni o eseguire azioni personalizzate basate su eventi esterni.

Note JS supportate

Assicurati che la funzione personalizzata che scrivi sia accompagnata dai jsdoc sopra di esso.

Supportato jsdoc tag:

  • Privato
    Sintassi: @private
    Una funzione privata non è inclusa come funzione personalizzata.

  • Nome
    Sintassi: @name funcName <Function Name>
    In alternativa , puoi utilizzare: @function funcName <Function Name> o @func funcName <Function Name>.
    funcName è il nome della funzione (non sono consentiti spazi).
    <Function Name> è il nome visualizzato della funzione.

  • Parametro
    Sintassi: @param {type} name <Parameter Description>
    In alternativa, puoi utilizzare: @argument {type} name <Parameter Description> o @arg {type} name <Parameter Description>.
    Mostra i parametri utilizzati dalla funzione. Una funzione può avere più tag di parametri, uno per ogni parametro in ordine di occorrenza.
    {type} rappresenta il tipo di parametro. I tipi di parametri consentiti sono:

    1. stringa
    2. numero
    3. booleano
    4. ambito
    5. stringa[]
    6. numero[]
    7. booleano[]
    8. data
    9. data[]
    10. array
    11. oggetto

    scope fa riferimento a uno speciale oggetto globals fornito da forms runtime. Deve essere l’ultimo parametro e non è visibile all’utente nell’editor di regole. È possibile utilizzare l'ambito per accedere a un modulo leggibile e a un oggetto proxy di campo per leggere le proprietà, l'evento che ha attivato la regola e un set di funzioni per manipolare il modulo.

    object Il tipo viene utilizzato per passare un oggetto campo leggibile nel parametro a una funzione personalizzata invece di passare il valore.

    Tutti i tipi di parametri sono classificati in una delle categorie precedenti. Nessuno non è supportato. Accertati di selezionare uno dei tipi riportati sopra. I tipi non fanno distinzione tra maiuscole e minuscole. Il nome del parametro non può contenere spazi. La descrizione del parametro può contenere più parole.

  • Parametro facoltativo
    Sintassi: @param {type=} name <Parameter Description>
    In alternativa, puoi utilizzare: @param {type} [name] <Parameter Description>
    Per impostazione predefinita, tutti i parametri sono obbligatori. Per contrassegnare un parametro come facoltativo, aggiungi = nel tipo del parametro o inserendo il nome del parametro tra parentesi quadre.
    Ad esempio, dichiariamo Input1 come parametro facoltativo:

    • @param {type=} Input1
    • @param {type} [Input1]
  • Tipo restituito
    Sintassi: @return {type}
    In alternativa, puoi utilizzare @returns {type}.
    Aggiunge informazioni sulla funzione, ad esempio l'obiettivo.
    {type} rappresenta il tipo restituito della funzione. I tipi restituiti consentiti sono:

    1. stringa
    2. numero
    3. booleano
    4. stringa[]
    5. numero[]
    6. booleano[]
    7. data
    8. data[]
    9. array
    10. oggetto

Tutti gli altri tipi di reso sono classificati in una delle categorie precedenti. Nessuno non è supportato. Accertati di selezionare uno dei tipi riportati sopra. I tipi restituiti non fanno distinzione tra maiuscole e minuscole.

Considerazioni durante la creazione di funzioni personalizzate considerations

Per elencare le funzioni personalizzate nell’editor delle regole, puoi dichiararle in uno dei seguenti formati:

  • Istruzione function con o senza commenti jsdoc

Puoi creare una funzione personalizzata con o senza commenti jsdoc.

    function functionName(parameters)
        {
            // code to be executed
        }
  • Espressione di funzione con commento jsdoc obbligatorio

Per elencare le funzioni personalizzate nell’editor di regole di un modulo adattivo, crea funzioni personalizzate nel formato seguente:

    /**
    * test function
    * @name testFunction test function
    * @param {string} input1 parameter description
    * @param {string} input2 another parameter description
    * @return {string}
    */
    testFunction = function(input1,input2)
        {
            // code to be executed
        }
NOTE
Puoi controllare la error.log per eventuali errori, ad esempio se le funzioni personalizzate non sono elencate nell’editor di regole.

Creare una funzione personalizzata create-custom-function

Crea una libreria client per chiamare funzioni personalizzate nell’editor di regole. Per ulteriori informazioni, consulta Utilizzo delle librerie lato client.

I passaggi per creare funzioni personalizzate sono i seguenti:

Creare una libreria client create-client-library

Puoi aggiungere funzioni personalizzate aggiungendo la libreria client. Per creare una libreria client, effettua le seguenti operazioni:

  1. Clonare l’archivio as a Cloud Service di AEM Forms.

  2. Creare una cartella in [AEM Forms as a Cloud Service repository folder]/apps/ cartella. Ad esempio, crea una cartella denominata come experience-league.

  3. Accedi a [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/experience-league/ e creare un ClientLibraryFolder. Ad esempio, crea una cartella della libreria client come customclientlibs.

  4. Aggiungi una proprietà categories con valore di tipo stringa. Ad esempio, assegna il valore customfunctionscategory al categories proprietà per customclientlibs cartella.

    note note
    NOTE
    Puoi scegliere un nome qualsiasi per client library folder e categories proprietà.
  5. Crea una cartella denominata js.

  6. Accedi a [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/customclientlibs/js cartella.

  7. Aggiungi un file JavaScript, ad esempio: function.js. Il file contiene il codice per la funzione personalizzata.

    note note
    NOTE
    Se il file JavaScript contenente il codice per le funzioni personalizzate presenta un errore, le funzioni personalizzate non sono elencate nell’editor di regole di un modulo adattivo. È inoltre possibile controllare error.log file per l’errore.
  8. Salva il function.js file.

  9. Accedi a [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/customclientlibs/js cartella.

  10. Aggiungi un file di testo come js.txt. Il file contiene:

    code language-javascript
        #base=js
        functions.js
    
  11. Salva il js.txt file.

  12. Aggiungi, esegui il commit e invia le modifiche nell’archivio utilizzando i seguenti comandi:

    code language-javascript
        git add .
        git commit -a -m "Adding custom functions"
        git push
    
  13. Esegui la pipeline.

Una volta eseguita correttamente la pipeline, la funzione personalizzata aggiunta nella libreria client diventa disponibile nel Editor di regole per moduli adattivi.

Aggiungere una libreria client in un modulo adattivo use-custom-function

Dopo aver implementato la libreria client nell’ambiente Forms CS, utilizzane le funzionalità nel modulo adattivo. Per aggiungere la libreria client al modulo adattivo

  1. Apri il modulo in modalità di modifica. Per aprire un modulo in modalità di modifica, selezionare un modulo e selezionare Modifica.

  2. Apri il browser Contenuto e seleziona la Contenitore guida componente del modulo adattivo.

  3. Fai clic sulle proprietà Contenitore guida Proprietà guida icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

  4. Apri Base e seleziona il nome del categoria libreria client dall’elenco a discesa (in questo caso, seleziona customfunctionscategory).

    Aggiunta della libreria client della funzione personalizzata

  5. Clic Fine .

Ora puoi creare una regola per utilizzare funzioni personalizzate nell’editor di regole.

Consulta anche see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab