Använda asynkrona funktioner i ett adaptivt formulär som bygger på kärnkomponenter

Regelredigeraren i Adaptiv Forms har stöd för asynkrona funktioner, vilket gör att du kan integrera och hantera åtgärder som kräver väntan på externa processer eller datahämtning utan att användaren behöver avbryta interaktionen med formuläret.

Vilka faktorer avgör hur asynkrona eller synkrona funktioner används?

Effektiv hantering av användarinteraktionen är avgörande för att skapa en smidig upplevelse. Två vanliga sätt att hantera åtgärder är synkrona och asynkrona funktioner.

Synkrona funktioner kör uppgifter efter varandra, vilket gör att programmet väntar på att varje åtgärd ska slutföras innan du fortsätter. Detta kan leda till förseningar och en mindre engagerande användarupplevelse, särskilt när det handlar om att vänta på externa resurser, som filöverföringar eller datahämtning.

Tänk dig till exempel ett scenario där en användare överför en bild stannar hela formuläret och väntar på att överföringen ska slutföras. Denna paus gör att användaren inte kan interagera med andra fält, vilket kan skapa frustration och fördröjningar. När de väntar på att bilden ska bearbetas kan all information som anges gå förlorad om de navigerar bort eller tappar tålamodet, vilket gör upplevelsen krånglig och ineffektiv.

Asynkrona funktioner å andra sidan tillåter att aktiviteter körs samtidigt. Detta innebär att användare kan fortsätta att interagera med programmet medan bakgrundsprocesserna körs. Asynkrona åtgärder ger snabbare svarstider, vilket gör det möjligt för användarna att få omedelbar feedback och upprätthålla engagemanget utan avbrott.

Med en asynkron metod kan användare tvärtom överföra bilder i bakgrunden och samtidigt fylla i resten av formuläret sömlöst. Gränssnittet förblir responsivt, vilket gör att det går att uppdatera i realtid och få omedelbar feedback allt eftersom överföringen fortskrider. Det förbättrar användarengagemanget och ger en smidig upplevelse utan avbrott.

{align="center"}

Implementera asynkrona funktioner för Adaptive Forms

Du kan implementera asynkrona funktioner för Adaptiv Forms med följande regeltyper i regelredigeraren:

Hur använder man regeltypen Async Function Call?

Du kan skriva anpassade funktioner för asynkrona åtgärder och konfigurera asynkrona funktioner med regeltypen Async Function Call i regelredigeraren.

Utforska regeltypen Async Function Call via ett användningsfall

Ta till exempel ett registreringsformulär på en webbplats där användarna anger ett engångslösenord. Panelen för att lägga till användarinformation visas först när du har angett korrekt engångslösenord. Om engångslösenordet är felaktigt döljs panelen och ett felmeddelande visas på skärmen.

När användaren klickar på knappen Bekräfta i ett registreringsformulär anropas funktionen matchOTP() asynkront för att verifiera den angivna engångslösenordet. Funktionen matchOTP() implementeras som en anpassad funktion. Med regeltypen Async Function Call i regelredigeraren kan du konfigurera funktionen matchOTP() i regelredigeraren i ett anpassat formulär. Du kan också implementera återanrop om lyckade och misslyckade i regelredigeraren.

I följande bild visas stegen som används för att använda regeltypen Async Function Call för att anropa asynkrona funktioner för Adaptiv Forms:

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

1. Skriv en anpassad funktion för den asynkrona åtgärden i JS-filen.

Funktionen matchOTP() implementeras som en anpassad funktion. Koden nedan läggs till i JS-filen för den anpassade funktionen:

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

Koden definierar funktionen matchOTP() som genererar ett löfte att validera ett engångslösenord asynkront. Den använder funktionen asyncOperationForOTPMatch() för att simulera matchningsprocessen för engångslösenord. Funktionen kontrollerar om angiven engångslösenord är lika med 111. Om den angivna engångslösenordet är korrekt anropas återanropet med null för felet och ett objekt som anger att engångslösenordet är giltigt ({'valid':'true'}). Om engångslösenordet inte är giltigt anropas återanropet med felobjektet ({'valid':'false'}) och null för resultatet.

2. Konfigurera den asynkrona funktionen i regelredigeraren

Utför följande steg för att konfigurera asynkron funktion i regelredigeraren:

2.1 Skapa en regel som ska använda asynkron funktion med anropsregeltypen Async Function

Så här skapar du en regel som ska använda asynkron åtgärd med regeltypen Async Function Call:

Skärmbilden nedan visar regeln:

Nu kan du fortsätta med implementeringen av återanropen: Success och Failure för funktionen matchOTP.

2.2 Implementera återanrop för den asynkrona funktionen

Implementera callback-metoderna för lyckade och misslyckade för den asynkrona funktionen med den visuella regelredigeraren.

Skapa en regel för Add Success callback method

Låt oss skapa en regel som visar panelen userdetails om engångslösenordet matchar värdet 111.

{width="50%,"}

Se skärmbilden nedan, där användaren anger engångslösenordet som 111, och User Details-panelen visas när användaren klickar på knappen Confirm.

Skapa en regel för Add Failure callback method

Låt oss skapa en regel för att visa ett felmeddelande om engångslösenordet inte matchar värdet 111.

{width="50%,"}

Se skärmbilden nedan där användaren anger engångslösenordet som 123 och felmeddelandet visas när användaren klickar på knappen Confirm.

På skärmbilden nedan visas den fullständiga regeln för hur Async Function Call används för att implementera en asynkron funktion:

Du kan också redigera återanropen genom att klicka på Edit success callback och Edit failure callback.

Hur du använder funktionens utdataregeltyp?

Du kan också anropa de asynkrona funktionerna indirekt med synkrona funktioner. De synkrona funktionerna körs med regeltypen Function Output i regelredigeraren i ett anpassat formulär.

Titta på koden nedan för att se hur du anropar asynkrona funktioner med regeltypen Function Output:

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

I ovanstående exempel är funktionen asyncFunction en asynchronous function. Den utför en asynkron åtgärd genom att göra en GET-begäran till https://petstore.swagger.io/v2/store/inventory. Det väntar på svar med await, tolkar svarstexten som JSON med response.json() och returnerar sedan data. Funktionen callAsyncFunction är en synkron anpassad funktion som anropar funktionen asyncFunction och visar svarsdata i konsolen. Även om funktionen callAsyncFunction är synkron anropar den asynkrona funktionen asyncFunction och hanterar resultatet med programsatserna then och catch.

För att se hur den fungerar lägger vi till en knapp och skapar en regel för knappen som anropar den asynkrona funktionen när en knapp klickas.

{width="50%"}

Titta på skärmbilden i konsolfönstret nedan för att visa att när användaren klickar på knappen Fetch anropas den anpassade funktionen callAsyncFunction, som i sin tur anropar en asynkron funktion asyncFunction. Kontrollera konsolfönstret för att se svaret på knappen genom att klicka:

Se även