Utilisation de fonctions asynchrones dans un formulaire adaptatif basé sur les composants principaux

L’éditeur de règles ​ d’Adaptive Forms prend en charge les fonctions asynchrones, ce qui vous permet d’intégrer et de gérer les opérations qui nécessitent d’attendre des processus externes ou la récupération de données sans interrompre l’interaction de l’utilisateur avec le formulaire.

Quels facteurs déterminent l’utilisation des fonctions asynchrones ou synchrones ?

Une gestion efficace des interactions utilisateur est essentielle pour créer une expérience fluide. Les fonctions synchrones et asynchrones constituent deux approches courantes de la gestion des opérations.

Fonctions synchrones exécutent des tâches l’une après l’autre, ce qui entraîne l’attente de l’application pour chaque opération avant de continuer. Cela peut entraîner des retards et une expérience utilisateur moins attrayante, en particulier lorsque les tâches impliquent l’attente de ressources externes, telles que le chargement de fichiers ou la récupération de données.

Supposons, par exemple, qu’un utilisateur charge une image et que l’ensemble du formulaire s’arrête en attendant la fin du chargement. Cette interruption empêche l’utilisateur d’interagir avec d’autres champs, ce qui entraîne une frustration et des retards. En attendant que l’image soit traitée, toute information saisie peut être perdue si la personne quitte la zone ou perd patience, ce qui rend l’expérience lourde et inefficace.

Les fonctions asynchrones, en revanche, permettent l’exécution simultanée de tâches. Cela signifie que les utilisateurs peuvent continuer à interagir avec l’application pendant l’exécution des processus en arrière-plan. Les opérations asynchrones améliorent la réactivité, ce qui permet aux utilisateurs de recevoir des commentaires immédiats et de maintenir l’engagement sans interruption.

Inversement, avec une approche asynchrone, les utilisateurs peuvent charger des images en arrière-plan tout en continuant à remplir le reste du formulaire de manière transparente. L’interface reste réactive, ce qui permet des mises à jour en temps réel et des commentaires immédiats au fur et à mesure de la progression du chargement. Il améliore l’interaction client, assurant ainsi une expérience fluide et sans interruptions.

{align="center"}

Mise en œuvre de fonctions asynchrones pour le Forms adaptatif

Vous pouvez implémenter les fonctions asynchrones pour le Forms adaptatif à l’aide des types de règles suivants dans l’éditeur de règles :

Comment utiliser le type de règle Appel de fonction asynchrone ?

Vous pouvez écrire les fonctions personnalisées pour les opérations asynchrones et configurer les fonctions asynchrones à l’aide du type de règle Appel de fonction asynchrone dans l’éditeur de règles.

Exploration du type de règle Appel de fonction asynchrone via un cas d’utilisation

Prenons l’exemple d’un formulaire d’enregistrement sur un site web dans lequel les utilisateurs saisissent un mot de passe à usage unique (OTP). Le panneau permettant d’ajouter des détails utilisateur ne s’affiche qu’après avoir saisi le mot de passe à usage unique approprié. Si le mot de passe à usage unique est incorrect, le panneau reste masqué et un message d’erreur apparaît à l’écran.

Dans un formulaire d’enregistrement, lorsque l’utilisateur clique sur le bouton Confirmer, la fonction matchOTP() est appelée de manière asynchrone pour vérifier le mot de passe à usage unique saisi. La fonction matchOTP() est implémentée en tant que ​ fonction personnalisée ​. À l’aide du type de règle Appel de fonction asynchrone dans l’éditeur de règles, vous pouvez configurer la fonction matchOTP() dans l’éditeur de règles d’un formulaire adaptatif. Vous pouvez également implémenter les rappels de succès et d’échec dans l’éditeur de règles.

La figure suivante illustre les étapes à suivre pour utiliser le type de règle Appel de fonction asynchrone afin d’appeler des fonctions asynchrones pour le Forms adaptatif :

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

1. Écrivez une fonction personnalisée pour l’opération asynchrone dans le fichier JS

La fonction matchOTP() est implémentée en tant que fonction personnalisée. Le code ci-dessous est ajouté dans le fichier JS de la fonction personnalisée :

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

Le code définit une matchOTP() de fonction qui génère une promesse de validation d’un mot de passe à usage unique (OTP) de manière asynchrone. Il utilise une fonction asyncOperationForOTPMatch() pour simuler le processus de correspondance OTP. La fonction vérifie si le mot de passe à usage unique fourni est égal à 111. Si le mot de passe à usage unique entré est correct, il appelle le rappel avec la valeur null pour l’erreur et un objet indiquant que le mot de passe à usage unique est valide ({'valid':'true'}). Si le mot de passe à usage unique n’est pas valide, il appelle le rappel avec un objet d’erreur ({'valid':'false'}) et la valeur null pour le résultat.

2. Configuration de la fonction asynchrone dans l’éditeur de règles

Pour configurer la fonction asynchrone dans l’éditeur de règles, procédez comme suit :

2.1 Créer une règle pour utiliser la fonction asynchrone à l’aide du type de règle d’appel de fonction asynchrone

Pour créer une règle permettant d’utiliser une opération asynchrone à l’aide du type de règle Appel de fonction asynchrone, procédez comme suit :

La capture d’écran ci-dessous affiche la règle :

Vous pouvez maintenant procéder à l’implémentation des rappels : Success et Failure pour la fonction matchOTP .

2.2 Implémenter les rappels pour la fonction asynchrone

Implémentez les méthodes de rappel de succès et d’échec pour la fonction asynchrone à l’aide de l’éditeur de règles visuel.

Créer une règle pour Add Success callback méthode

Créons une règle pour afficher le panneau userdetails, si le mot de passe à usage unique correspond à la valeur 111.

{width="50%,"}

Reportez-vous à la capture d’écran ci-dessous, dans laquelle l’utilisateur saisit le mot de passe à usage unique comme 111, et le panneau User Details s’affiche lorsque l’on clique sur le bouton Confirm.

Créer une règle pour Add Failure callback méthode

Créons une règle pour afficher un message d’échec si le mot de passe à usage unique ne correspond pas à la valeur 111.

{width="50%,"}

Reportez-vous à la capture d’écran ci-dessous, dans laquelle l’utilisateur saisit le mot de passe à usage unique comme 123, et le message d’erreur s’affiche lorsque l’utilisateur clique sur le bouton Confirm.

La capture d’écran ci-dessous affiche la règle complète pour utiliser Appel de fonction asynchrone afin d’implémenter une fonction asynchrone :

Vous pouvez également modifier les rappels en cliquant sur Modifier le rappel de succès et Modifier le rappel d’échec.

Comment utiliser le type de règle Sortie de fonction ?

Vous pouvez également appeler les fonctions asynchrones indirectement à l’aide des fonctions synchrones. Les fonctions synchrones sont exécutées à l’aide du type de règle Sortie de fonction dans l’éditeur de règles d’un formulaire adaptatif.

Consultez le code ci-dessous pour savoir comment appeler des fonctions asynchrones à l’aide du type de règle Sortie de fonction :

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

Dans l’exemple ci-dessus, la fonction asyncFunction est une asynchronous function. Elle effectue une opération asynchrone en effectuant une requête GET vers https://petstore.swagger.io/v2/store/inventory. Elle attend la réponse avec await, analyse le corps de la réponse en tant que JSON à l’aide de response.json(), puis renvoie les données. La fonction callAsyncFunction est une fonction personnalisée synchrone qui appelle la fonction asyncFunction et affiche les données de réponse dans la console. Bien que la fonction callAsyncFunction soit synchrone, elle appelle la fonction asynchrone asyncFunction et gère son résultat avec des instructions then et catch.

Pour voir s’il fonctionne, nous allons ajouter un bouton et créer une règle pour le bouton qui appelle la fonction asynchrone lors d’un clic sur un bouton.

{width="50%"}

Reportez-vous à la capture d’écran de la fenêtre de la console ci-dessous pour démontrer que lorsque l’utilisateur clique sur le bouton Fetch , le callAsyncFunction de fonction personnalisée est appelé, ce qui appelle à son tour un asyncFunction de fonction asynchrone. Inspectez la fenêtre de la console pour afficher la réponse au clic sur le bouton :

Voir également