Creare una funzione personalizzata per un modulo adattivo basato su componenti core

I Forms adattivi basati sui componenti core offrono esperienze utente dinamiche regolando il contenuto e il comportamento in base all’input dell’utente. Le funzioni personalizzate consentono agli sviluppatori di estendere le funzionalità, garantendo che i moduli soddisfino requisiti specifici. Integrando funzioni personalizzate, gli sviluppatori possono implementare logiche complesse, automatizzare i processi e introdurre interazioni univoche in linea con requisiti aziendali specifici o aspettative degli utenti. Essa garantisce che i moduli non solo si adattino a condizioni diverse, ma forniscano anche una soluzione più precisa ed efficace per casi d’uso diversi.
Questo articolo illustra i passaggi necessari per creare funzioni personalizzate per Adaptive Forms utilizzando i componenti core.

Considerazioni

Prerequisiti per creare una funzione personalizzata

Prima di iniziare ad aggiungere una funzione personalizzata al Forms adattivo, verifica di disporre dei seguenti elementi:

Software:

Creare una funzione personalizzata

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

I passaggi per creare funzioni personalizzate sono i seguenti:

Creare una libreria client create-client-library

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

Clona l'archivio

Clona il tuo archivio as a Cloud Service di AEM Forms:

Con questo comando viene scaricato l'archivio e viene creata una cartella locale dell'archivio clonato nel computer. In questa guida questa cartella viene indicata come [directory del progetto AEMaaCS].

Aggiungi una cartella della libreria client

Per aggiungere una nuova cartella della libreria client alla directory di progetto [AEMaaCS], eseguire la procedura seguente:

Aggiungi file e cartelle alla cartella Libreria client

Aggiungi quanto segue alla cartella della libreria client aggiunta:

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

Includi la nuova cartella nel file filter.xml:

Distribuisci la cartella della libreria client appena creata nell'ambiente AEM

Distribuisci la directory del progetto AEM as a Cloud Service [AEMaaCS] nell'ambiente di Cloud Service. Per eseguire l’implementazione nell’ambiente di Cloud Service:

Se non hai già configurato una pipeline, consulta la guida su come impostare una pipeline per AEM Forms as a Cloud Service.

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

Aggiungere una libreria client a 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

Puoi utilizzare la funzione personalizzata nell'editor di regole di un modulo adattivo utilizzando le annotazioni di JavaScript.

Utilizzo di una funzione personalizzata in un modulo adattivo

In un modulo adattivo, puoi utilizzare funzioni personalizzate all'interno dell'editor di regole. Aggiungiamo il codice seguente al file JavaScript (Function.js file) per calcolare l'età in base alla data di nascita (AAAA-MM-GG). Creare una funzione personalizzata come calculateAge() che utilizza come input la data di nascita e restituisce l'età:

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

Nell'esempio precedente, quando l'utente immette la data di nascita nel formato (AAAA-MM-GG), la funzione personalizzata calculateAge viene richiamata e restituisce l'età.

Visualizziamo in anteprima il modulo per osservare come le funzioni personalizzate vengono implementate tramite l’editor di regole:

Funzioni delle funzioni personalizzate

Le funzioni personalizzate nei moduli AEM offrono una soluzione solida per estendere e personalizzare la funzionalità dei moduli. Puoi utilizzare le funzioni personalizzate per soddisfare le esigenze specifiche della tua organizzazione.

Queste funzioni supportano varie funzionalità, tra cui l’utilizzo di campi specifici, l’utilizzo di campi globali, le operazioni asincrone e l’incorporazione di meccanismi di caching. Questa flessibilità assicura che i moduli possano adattarsi a requisiti complessi e fornire un’esperienza utente efficiente e personalizzata. Sfruttando queste funzioni avanzate, puoi migliorare le interazioni dei moduli e ottimizzare le prestazioni, rendendo i moduli AEM più funzionali e reattivi.

Approfondiamo le funzioni personalizzate.

Supporto asincrono nelle funzioni personalizzate support-of-async-functions

Puoi implementare funzioni asincrone nell’editor di regole utilizzando funzioni personalizzate. Per istruzioni su come eseguire questa operazione, consulta l'articolo Utilizzo di funzioni asincrone in un modulo adattivo.

Supporto di oggetti di ambito Field e Global nelle funzioni personalizzate support-field-and-global-objects

Gli oggetti Field fanno riferimento ai singoli componenti o elementi di un modulo, ad esempio campi di testo e caselle di controllo. L'oggetto Globals contiene variabili di sola lettura quali l'istanza del modulo, l'istanza del campo di destinazione e i metodi per apportare modifiche al modulo nelle funzioni personalizzate.

Per ulteriori informazioni sugli oggetti ambito, vedere l'articolo Oggetti ambito nelle funzioni personalizzate.

Supporto della memorizzazione in cache nella funzione personalizzata

Forms adattivo implementa il caching per le funzioni personalizzate per migliorare il tempo di risposta durante il recupero dell’elenco delle funzioni personalizzate nell’editor di regole. Nel file error.log viene visualizzato il messaggio Fetched following custom functions list from cache.

Se le funzioni personalizzate vengono modificate, la memorizzazione in cache viene invalidata e analizzata.

Risoluzione dei problemi

Passaggio successivo

Vediamo ora vari esempi di funzioni personalizzate per un modulo adattivo basato su componenti core.

Consulta anche