Créer une fonction personnalisée pour un formulaire adaptatif basé sur les composants principaux

Les Forms adaptatives basées sur les composants principaux offrent des expériences utilisateur dynamiques en ajustant le contenu et le comportement en fonction des entrées de l’utilisateur. Les fonctions personnalisées permettent aux développeurs d’étendre les fonctionnalités, en s’assurant que les formulaires répondent à des exigences spécifiques. En intégrant des fonctions personnalisées, les développeurs peuvent implémenter une logique complexe, automatiser les processus et introduire des interactions uniques qui correspondent aux besoins spécifiques de l’entreprise ou aux attentes de l’utilisateur. Il permet de s’assurer que les formulaires s’adaptent non seulement à des conditions variées, mais qu’ils offrent également une solution plus précise et plus efficace pour divers cas d’utilisation.
Cet article vous guide tout au long des étapes de création de fonctions personnalisées pour le Forms adaptatif à l’aide des composants principaux.

Considérations

Conditions préalables pour créer une fonction personnalisée

Avant de commencer à ajouter une fonction personnalisée à votre Forms adaptatif, assurez-vous que vous disposez des éléments suivants :

Logiciel :

Création d’une fonction personnalisée

Créez une bibliothèque cliente pour appeler des fonctions personnalisées dans l’éditeur de règles. Pour plus d’informations, voir Utilisation des bibliothèques côté client.

Les étapes de création de fonctions personnalisées sont les suivantes :

Créez une bibliothèque cliente. create-client-library

Vous pouvez ajouter des fonctions personnalisées en ajoutant une bibliothèque cliente. Pour créer une bibliothèque cliente, procédez comme suit :

Cloner le référentiel

Cloner votre référentiel as a Cloud Service AEM Forms :

Cette commande télécharge le référentiel et crée un dossier local du référentiel cloné sur votre ordinateur. Dans ce guide, nous nous référons à ce dossier en tant que [répertoire de projet AEMaaCS].

Ajouter un dossier de bibliothèque cliente

Pour ajouter un nouveau dossier de bibliothèques clientes au [répertoire de projet AEMaaCS], procédez comme suit :

Ajouter des fichiers et des dossiers au dossier de bibliothèque cliente

Ajoutez ce qui suit au dossier de bibliothèque cliente ajouté :

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

Incluez le nouveau dossier dans filter.xml :

Déployez le dossier de bibliothèque cliente nouvellement créé dans votre environnement AEM

Déployez le [répertoire de projet AEMaaCS] d’AEM as a Cloud Service dans votre environnement de Cloud Service. Pour effectuer un déploiement sur votre environnement de Cloud Service :

Si vous n’avez pas encore configuré de pipeline, reportez-vous au guide sur la configuration d’un pipeline pour AEM Forms as a Cloud Service🔗.

Une fois le pipeline exécuté avec succès, la fonction personnalisée ajoutée à la bibliothèque cliente devient disponible dans votre éditeur de règles de formulaire adaptatif.

Ajout d’une bibliothèque cliente à un formulaire adaptatif use-custom-function

Une fois que vous avez déployé votre bibliothèque cliente dans votre environnement Forms CS, utilisez ses fonctionnalités dans votre formulaire adaptatif. Pour ajouter la bibliothèque cliente dans votre formulaire adaptatif

Vous pouvez utiliser la fonction personnalisée dans l’ éditeur de règles d’un formulaire adaptatif à l’aide des annotations JavaScript.

Utilisation d’une fonction personnalisée dans un formulaire adaptatif

Dans un formulaire adaptatif, vous pouvez utiliser des fonctions personnalisées dans l’éditeur de règles. Ajoutons le code suivant au fichier JavaScript (Function.js) pour calculer l’âge en fonction de la date de naissance (AAAA-MM-JJ). Créez une fonction personnalisée calculateAge() qui prend la date de naissance comme entrée et renvoie l’âge :

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

Dans l’exemple ci-dessus, lorsque la personne saisit la date de naissance au format (AAAA-MM-JJ), la fonction personnalisée calculateAge est appelée et renvoie l’âge.

Prévisualisons le formulaire pour observer comment les fonctions personnalisées sont implémentées par le biais de l’éditeur de règles :

Fonctions des fonctions personnalisées

Les fonctions personnalisées d’AEM forms offrent une solution robuste pour étendre et personnaliser les fonctionnalités de vos formulaires. Vous pouvez utiliser les fonctions personnalisées pour répondre aux besoins spécifiques de votre entreprise.

Ces fonctions prennent en charge diverses fonctionnalités, notamment l’utilisation de champs spécifiques, l’utilisation de champs globaux et d’opérations asynchrones, ainsi que l’incorporation de mécanismes de mise en cache. Cette flexibilité garantit que les formulaires peuvent s’adapter à des exigences complexes et offrir une expérience utilisateur efficace et personnalisée. En exploitant ces fonctionnalités avancées, vous pouvez améliorer les interactions des formulaires et optimiser les performances, rendant vos formulaires AEM plus fonctionnels et réactifs.

Explorons les fonctionnalités des fonctions personnalisées.

Prise en charge asynchrone dans les fonctions personnalisées support-of-async-functions

Vous pouvez implémenter des fonctions asynchrones dans l’éditeur de règles à l’aide de fonctions personnalisées. Pour plus d’informations sur la procédure à suivre, reportez-vous à l’article Utilisation de fonctions asynchrones dans un formulaire adaptatif.

Prise en charge des objets de champ et de portée globale dans les fonctions personnalisées support-field-and-global-objects

Les objets de champ font référence aux composants ou éléments individuels d’un formulaire, tels que les champs de texte et les cases à cocher. L’objet Globals contient des variables en lecture seule, telles que l’instance de formulaire, l’instance de champ cible et des méthodes permettant de modifier le formulaire dans des fonctions personnalisées.

Pour plus d’informations sur les objets de portée, consultez l’article Objets de portée dans les fonctions personnalisées .

Prise en charge de la mise en cache dans une fonction personnalisée

Les formulaires adaptatifs implémentent la mise en cache pour les fonctions personnalisées afin d’améliorer le temps de réponse lors de la récupération de la liste des fonctions personnalisées dans l’éditeur de règles. Un message Fetched following custom functions list from cache apparaît dans le fichier error.log.

Si les fonctions personnalisées sont modifiées, la mise en cache est invalidée et elle est analysée.

Résolution des problèmes

Étape suivante

Nous allons maintenant voir divers exemples de fonctions personnalisées pour un formulaire adaptatif basé sur les composants principaux.

Voir également