Utilizzo di funzioni asincrone in un modulo adattivo basato su componenti core

L'editor di regole in Adaptive Forms supporta funzioni asincrone, consentendo di integrare e gestire le operazioni che richiedono l'attesa di processi esterni o il recupero dei dati senza interrompere l'interazione dell'utente con il modulo.

Quali fattori determinano l'uso di funzioni asincrone o sincrone?

Gestire l’interazione dell’utente in modo efficace è fondamentale per creare un’esperienza fluida. Due approcci comuni per la gestione delle operazioni sono le funzioni sincrone e asincrone.

Le funzioni sincrone eseguono attività una dopo l'altra, facendo in modo che l'applicazione attenda il completamento di ogni operazione prima di procedere. Questo può portare a ritardi e a un’esperienza utente meno coinvolgente, soprattutto quando le attività richiedono l’attesa di risorse esterne, come il caricamento di file o il recupero di dati.

Ad esempio, si consideri uno scenario in cui un utente carica un’immagine, l’intero modulo si interrompe, in attesa del completamento del caricamento. Questa pausa impedisce all’utente di interagire con altri campi, causando frustrazione e ritardi. In attesa che l’immagine venga elaborata, qualsiasi informazione immessa potrebbe andare persa se il visitatore si allontana o perde la pazienza, rendendo l’esperienza difficile e inefficiente.

Le funzioni asincrone, invece, consentono l'esecuzione simultanea di attività. Ciò significa che gli utenti possono continuare a interagire con l’applicazione durante l’esecuzione dei processi in background. Le operazioni asincrone migliorano la reattività, consentendo agli utenti di ricevere feedback immediati e mantenere il coinvolgimento senza interruzioni.

Al contrario, con un approccio asincrono, gli utenti possono caricare immagini in background continuando a compilare il resto del modulo senza problemi. L’interfaccia rimane reattiva e consente aggiornamenti in tempo reale e feedback immediati man mano che il caricamento procede. Migliora il coinvolgimento degli utenti, garantendo un’esperienza fluida senza interruzioni.

{align="center"}

Implementazione di funzioni asincrone per Forms adattivo

Puoi implementare le funzioni asincrone per Adaptive Forms utilizzando i seguenti tipi di regole nell’editor di regole:

Come si utilizza il tipo di regola Chiamata funzione asincrona?

È possibile scrivere le funzioni personalizzate per le operazioni asincrone e configurare le funzioni asincrone utilizzando il tipo di regola Chiamata funzione asincrona nell'editor di regole.

Esplorazione del tipo di regola della chiamata di funzione asincrona tramite un caso d’uso

Considerare un modulo di registrazione su un sito Web in cui gli utenti immettono una password monouso (OTP). Il pannello per l’aggiunta dei dettagli utente viene visualizzato solo dopo l’immissione dell’OTP corretto. Se OTP non è corretto, il pannello rimane nascosto e sullo schermo viene visualizzato un messaggio di errore.

In un modulo di registrazione, quando l'utente fa clic sul pulsante Conferma, la funzione matchOTP() viene chiamata in modo asincrono per verificare l'OTP immesso. La funzione matchOTP() è implementata come funzione personalizzata. Utilizzando il tipo di regola Chiamata funzione asincrona nell'editor di regole, puoi configurare la funzione matchOTP() nell'editor di regole di un modulo adattivo. Puoi anche implementare i callback di esito positivo e negativo nell’editor di regole.

La figura seguente illustra i passaggi per utilizzare il tipo di regola Chiamata funzione asincrona per richiamare funzioni asincrone per Forms adattivo:

{align="center" width="50%,"}

1. Scrivere una funzione personalizzata per l’operazione asincrona nel file JS

La funzione matchOTP() è implementata come funzione personalizzata. Il codice seguente viene aggiunto al file JS della funzione personalizzata:

/**
 * generates the otp for success use case
 * @param {string} otp
 * @return {PROMISE}
 */
function matchOTP(otp) {
     return new Promise((resolve, reject) => {
        // Perform some asynchronous operation here
         asyncOperationForOTPMatch(otp, (error, result) => {
            if (error) {
                // On failure, call reject(error)
                reject(error);
            } else {
                // On success, call resolve(result)
                resolve(result);
            }
        });
    });
}

/**
 * generates the otp
 */
function asyncOperationForOTPMatch(otp, callback) {
    setTimeout(() => {
        if(otp === '111') {
            callback( null, {'valid':'true'});
        } else {
            callback( {'valid':'false'}, null);
        }
    }, 1000);
}

Il codice definisce una funzione matchOTP() che genera una promessa di convalida di una password monouso (OTP) in modo asincrono. Utilizza una funzione asyncOperationForOTPMatch() per simulare il processo di corrispondenza OTP. La funzione controlla se l'OTP fornito è uguale a 111. Se l'OTP immesso è corretto, chiama il callback con null per l'errore e un oggetto che indica che l'OTP è valido ({'valid':'true'}). Se l'OTP non è valido, chiama il callback con un oggetto errore ({'valid':'false'}) e null per il risultato.

2. Configurare la funzione asincrona nell’editor di regole

Per configurare la funzione asincrona nell’editor di regole, effettua le seguenti operazioni:

2.1 Creare una regola per utilizzare la funzione asincrona utilizzando il tipo di regola di chiamata della funzione asincrona

Per creare una regola per l'utilizzo di un'operazione asincrona, utilizzare il tipo di regola Chiamata funzione asincrona, eseguire la procedura seguente:

La schermata seguente mostra la regola:

Ora è possibile procedere con l'implementazione dei callback: Success e Failure per la funzione matchOTP.

2.2 Implementare i callback per la funzione asincrona

Implementa i metodi di callback di esito positivo e negativo per la funzione asincrona utilizzando l’editor di regole visive.

Crea una regola per il metodo Add Success callback

Creiamo una regola per visualizzare il pannello userdetails, se l'OTP corrisponde al valore 111.

{width="50%,"}

Fare riferimento alla schermata seguente, in cui l'utente immette OTP come 111 e il pannello User Details viene visualizzato quando si fa clic sul pulsante Confirm.

Crea una regola per il metodo Add Failure callback

Creiamo una regola per visualizzare un messaggio di errore se il valore OTP non corrisponde a 111.

{width="50%,"}

Fare riferimento alla schermata seguente, in cui l'utente immette OTP come 123 e il messaggio di errore viene visualizzato quando si fa clic sul pulsante Confirm.

La schermata seguente mostra la regola completa per l'utilizzo di Chiamata funzione asincrona per implementare una funzione asincrona:

Puoi anche modificare i callback facendo clic su Modifica callback riuscito e Modifica callback non riuscito.

Come si utilizza il tipo di regola Output funzione?

È inoltre possibile chiamare le funzioni asincrone indirettamente utilizzando le funzioni sincrone. Le funzioni sincrone vengono eseguite utilizzando il tipo di regola Output funzione nell'editor di regole di un modulo adattivo.

Osservare il codice seguente per vedere come richiamare funzioni asincrone utilizzando il tipo di regola Output funzione:

    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);
    });
}

Nell'esempio precedente, la funzione asyncFunction è un asynchronous function. Esegue un'operazione asincrona effettuando una richiesta GET a https://petstore.swagger.io/v2/store/inventory. Attende la risposta utilizzando await, analizza il corpo della risposta come JSON utilizzando response.json(), quindi restituisce i dati. La funzione callAsyncFunction è una funzione personalizzata sincrona che richiama la funzione asyncFunction e visualizza i dati di risposta nella console. Sebbene la funzione callAsyncFunction sia sincrona, chiama la funzione asyncFunction asincrona e gestisce il risultato con then e catch istruzioni.

Per vedere come funziona, aggiungiamo un pulsante e creiamo una regola per il pulsante che richiama la funzione asincrona al clic di un pulsante.

{width="50%"}

Fare riferimento alla schermata della finestra della console seguente per dimostrare che quando l'utente fa clic sul pulsante Fetch, viene richiamata la funzione personalizzata callAsyncFunction, che a sua volta chiama una funzione asincrona asyncFunction. Ispeziona la finestra della console per visualizzare la risposta al clic del pulsante:

Consulta anche