Verwenden asynchroner Funktionen in einem auf Kernkomponenten basierenden adaptiven Formular

Der Regeleditor in adaptiven Formularen unterstützt asynchrone Funktionen, sodass Sie Vorgänge integrieren und verwalten können, bei denen auf externe Prozesse oder Datenabrufe gewartet werden muss, ohne dabei die Interaktion der Benutzenden mit dem Formular zu unterbrechen.

Welche Faktoren bestimmen die Verwendung asynchroner oder synchroner Funktionen?

Das effektive Verwalten von Benutzerinteraktionen ist für ein reibungsloses Erlebnis von entscheidender Bedeutung. Zwei gängige Ansätze zur Verarbeitung von Vorgängen sind synchrone und asynchrone Funktionen.

Synchrone Funktionen führen Aufgaben nacheinander aus, sodass die Anwendung auf den Abschluss jedes einzelnen Vorgangs wartet, bevor fortgefahren wird. Dies kann zu Verzögerungen und einem weniger ansprechenden Anwendererlebnis führen. Dies gilt insbesondere dann, wenn bei Aufgaben auf externe Ressourcen gewartet werden muss, z. B. bei Datei-Uploads oder Datenabrufen.

Angenommen, eine Person lädt ein Bild hoch und das gesamte Formular wird angehalten, bis der Upload abgeschlossen ist. Durch diese Pause kann die Person nicht mit anderen Feldern interagieren, was Frustration und Verzögerungen bedeutet. Während sie wartet, bis das Bild verarbeitet wird, können alle eingegebenen Informationen verloren gehen, wenn sie die Geduld verliert oder das Formular verlässt. So wird das Ganze zu einem umständlichen und ineffizienten Erlebnis.

Asynchrone Funktionen ermöglichen dagegen eine gleichzeitige Ausführung von Aufgaben. Dies bedeutet, dass Benutzende während der Ausführung von Hintergrundprozessen weiterhin mit der Anwendung interagieren können. Asynchrone Vorgänge verbessern die Reaktionsfähigkeit und ermöglichen es Benutzenden, sofortiges Feedback zu erhalten und die Interaktion ohne Unterbrechungen aufrechtzuerhalten.

Umgekehrt können Benutzende bei einem asynchronen Ansatz Bilder im Hintergrund hochladen und gleichzeitig den Rest des Formulars nahtlos ausfüllen. Die Benutzeroberfläche bleibt responsiv und lässt Echtzeitaktualisierungen und sofortiges Feedback während des Uploads zu. Die Benutzerinteraktion wird verbessert und ein reibungsloses Erlebnis ohne Unterbrechungen sichergestellt.

{align="center"}

Implementieren asynchroner Funktionen für adaptive Formulare

Sie können die asynchronen Funktionen für adaptive Formulare mithilfe der folgenden Regeltypen im Regeleditor implementieren:

Wie wird der Regeltyp für asynchrone Funktionsaufrufe verwendet?

Sie können die benutzerdefinierten Funktionen für asynchrone Vorgänge schreiben und die asynchronen Funktionen mithilfe des Regeltyps für asynchrone Funktionsaufrufe im Regeleditor konfigurieren.

Erkunden des Regeltyps für asynchrone Funktionsaufrufe durch einen Anwendungsfall

Stellen Sie sich ein Registrierungsformular auf einer Website vor, auf der Benutzende ein Einmalpasswort (One-Time Password, OTP) eingeben. Das Panel zum Hinzufügen von Benutzerdetails wird erst nach der Eingabe des richtigen OTP angezeigt. Wenn das OTP falsch ist, bleibt das Panel ausgeblendet und es wird eine Fehlermeldung auf dem Bildschirm angezeigt.

Wenn die Benutzenden in einem Registrierungsformular auf die Schaltfläche Bestätigen klicken, wird die matchOTP()-Funktion asynchron aufgerufen, um das eingegebene OTP zu überprüfen. Die matchOTP()-Funktion wird als benutzerdefinierte Funktion implementiert. Mithilfe des Regeltyps für asynchrone Funktionsaufrufe im Regeleditor können Sie die matchOTP()-Funktion im Regeleditor eines adaptiven Formulars konfigurieren. Sie können die Rückrufe bei Erfolg und Fehler ebenfalls im Regeleditor implementieren.

Die folgende Abbildung zeigt die Schritte zum Verwenden des Regeltyps für asynchrone Funktionsaufrufe in adaptiven Formularen:

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

1. Schreiben einer benutzerdefinierten Funktion für den asynchronen Vorgang in die JS-Datei

Die matchOTP()-Funktion wird als benutzerdefinierte Funktion implementiert. Der folgende Code wird in der JS-Datei der benutzerdefinierten Funktion hinzugefügt:

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

Der Code definiert eine matchOTP()-Funktion, die eine Zusage zur asynchronen Validierung eines OTP generiert. Zur Simulation des Abgleichvorgangs für das OTP wird eine asyncOperationForOTPMatch()-Funktion verwendet. Die Funktion prüft, ob das angegebene OTP gleich 111 ist. Wenn das eingegebene OTP korrekt ist, erfolgt ein Rückruf mit null für den Fehler und einem Objekt ({'valid':'true'}), das angibt, dass das OTP gültig ist. Wenn das OTP ungültig ist, erfolgt ein Rückruf mit einem Fehlerobjekt ({'valid':'false'}) und null für das Ergebnis.

2. Konfigurieren der asynchronen Funktion im Regeleditor

Führen Sie die folgenden Schritte aus, um die asynchrone Funktion im Regeleditor zu konfigurieren:

2.1 Erstellen einer Regel zur Verwendung einer asynchronen Funktion mithilfe des Regeltyps für asynchrone Funktionsaufrufe

Führen Sie die folgenden Schritte aus, um eine Regel zur Verwendung eines asynchronen Vorgangs mit dem Regeltyp für asynchrone Funktionsaufrufe zu erstellen:

Im folgenden Screenshot wird die Regel angezeigt:

Nun können Sie mit der Implementierung der Rückrufe fortfahren: Success und Failure für die matchOTP-Funktion.

2.2 Implementieren der Rückrufe für die asynchrone Funktion

Implementieren Sie die Rückrufmethoden bei Erfolg und Fehler für die asynchrone Funktion mit dem visuellen Regeleditor.

Erstellen einer Regel für die Methode Add Success callback

Erstellen wir nun eine Regel, um das Panel userdetails anzuzeigen, wenn das OTP mit dem Wert 111 übereinstimmt.

{width="50%,"}

Im folgenden Screenshot ist zu sehen, wie eine Person 111 als OTP eingibt. Das Panel User Details wird angezeigt, wenn auf die Schaltfläche Confirm geklickt wird.

Erstellen einer Regel für die Methode Add Failure callback

Erstellen wir nun eine Regel, um eine Fehlermeldung anzuzeigen, wenn das OTP nicht mit dem Wert 111 übereinstimmt.

{width="50%,"}

Im folgenden Screenshot ist zu sehen, wie eine Person 123 als OTP eingibt. Die Fehlermeldung wird angezeigt, wenn auf die Schaltfläche Confirm geklickt wird.

Der folgende Screenshot zeigt die vollständige Regel für die Verwendung eines asynchronen Funktionsaufrufs zum Implementieren einer asynchronen Funktion:

Sie können die Rückrufe auch bearbeiten, indem Sie auf Rückruf bei Erfolg bearbeiten und Rückruf bei Fehler bearbeiten klicken.

Wie wird der Regeltyp für die Funktionsausgabe verwendet?

Sie können die asynchronen Funktionen auch indirekt über die synchronen Funktionen aufrufen. Die synchronen Funktionen werden mit dem Regeltyp für die Funktionsausgabe im Regeleditor eines adaptiven Formulars ausgeführt.

Sehen Sie sich den folgenden Code an, um zu erfahren, wie Sie asynchrone Funktionen mit dem Regeltyp für die Funktionsausgabe aufrufen können:

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

Im obigen Beispiel ist die Funktion „asyncFunction“ eine asynchronous function. Sie führt einen asynchronen Vorgang durch, indem eine GET-Anfrage an https://petstore.swagger.io/v2/store/inventory gesendet wird. Sie wartet mit await auf die Antwort, analysiert den Antworttext mithilfe der response.json() als JSON und gibt dann die Daten zurück. Die Funktion callAsyncFunction ist eine synchrone benutzerdefinierte Funktion, die die Funktion asyncFunction aufruft und die Antwortdaten in der Konsole anzeigt. Obwohl die Funktion callAsyncFunction synchron ist, ruft sie die asynchrone Funktion „asyncFunction“ auf und verarbeitet ihr Ergebnis mit den Anweisungen then und catch.

Um ihre Funktionsweise zu sehen, fügen wir eine Schaltfläche hinzu und erstellen eine Regel für die Schaltfläche, die die asynchrone Funktion bei einem Klick auf eine Schaltfläche aufruft.

{width="50%"}

Im Screenshot des Konsolenfensters ist zu sehen, dass beim Klicken auf die Schaltfläche Fetch die benutzerdefinierte Funktion callAsyncFunction aufgerufen wird, die wiederum die asynchrone Funktion asyncFunction aufruft. Inspizieren Sie das Konsolenfenster, um die Antwort anzusehen, wenn Sie auf die Schaltfläche klicken:

Siehe auch