DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Prise en main - Tutoriel pour l’équipe de développement

Last update: Mon Sep 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration
  • Développeur

À l’ère numérique actuelle, la création de formulaires conviviaux est essentielle pour toute entreprise. Edge Delivery Services (EDS) pour AEM Forms vous permet de créer des formulaires à l’aide d’outils courants tels que Google Docs et Microsoft Office.

Ces formulaires envoient directement les données vers un fichier Microsoft Excel ou Google Sheets, ce qui vous permet d’utiliser l’écosystème dynamique et les API robustes de Google Sheets, Microsoft Excel et Microsoft SharePoint pour traiter facilement les données envoyées ou pour démarrer un workflow d’entreprise existant.

AEM Forms fournit un bloc, appelé bloc de formulaires adaptatifs, qui vous permet de créer facilement des formulaires pour capturer les données et stocker les données capturées. Vous pouvez créer un projet AEM préconfiguré avec le bloc de formulaires adaptatifs ou ajouter le bloc de formulaires adaptatifs à un projet AEM existant.

Ce tutoriel AEM Forms vous guide tout au long des étapes de création, de prévisualisation et de publication de votre propre formulaire personnalisé avec un nouveau projet Adobe Experience Manager (AEM) Forms.

Prérequis

  • Vous disposez d’un compte GitHub et vous comprenez les concepts de base de Git.
  • Vous disposez d’un compte Google ou Microsoft SharePoint.
  • Vous comprenez les principes de base du HTML, du CSS et du JavaScript.
  • Node/npm est installé pour le développement local.

Attention. Ce tutoriel utilise macOS, Chrome et Visual Studio Code. Bien que les étapes puissent être adaptées à d’autres configurations, les captures d’écran et des éléments spécifiques de l’interface utilisateur peuvent différer en fonction du système d’exploitation, du navigateur et de l’éditeur de code que vous avez choisi d’utiliser.

Créer un projet AEM préconfiguré avec le bloc de formulaires adaptatifs

Le modèle standard AEM Forms vous permet de prendre rapidement en main un projet AEM préconfiguré avec le bloc de formulaires adaptatifs. Il s’agit de la méthode la plus rapide et la plus simple pour respecter les bonnes pratiques relatives à AEM et passer directement à la création de vos formulaires.

Prise en main du modèle de référentiel standard AEM Forms

  1. Créez un référentiel GitHub pour votre projet AEM. Pour créer un référentiel :

    1. Accédez à https://github.com/adobe-rnd/aem-boilerplate-forms.

      Modèle standard AEM Forms

    2. Cliquez sur l’option Utiliser ce modèle et sélectionnez l’option Créer un référentiel. L’écran Créer un référentiel s’affiche.

      Création d’un référentiel à l’aide du modèle standard AEM Forms

    3. Dans l’écran de création d’un référentiel, sélectionnez la personne propriétaire et spécifiez le Nom du référentiel. Adobe recommande que le référentiel soit défini sur Public. Ainsi, sélectionnez l’option public puis cliquez sur Créer un référentiel.

    Définition du référentiel sur public

  2. Installez l’application GitHub AEM Code Sync sur votre référentiel. Pour l’installer :

    1. Accédez à https://github.com/apps/aem-code-sync/installations/new.
    2. Sur l’écran Installer AEM Code Sync, sélectionnez l’option Sélectionner uniquement les référentiels et sélectionnez le référentiel nouvellement créé. Cliquez sur Enregistrer.

    Définition du référentiel sur public

    note note
    NOTE
    Si vous utilisez GitHub Enterprise avec le filtrage d’adresses IP, vous pouvez ajouter l’adresse IP suivante à la liste autorisée : 3.227.118.73.

    Félicitations. Vous avez désormais un nouveau site web en cours d’exécution dans https://<branch>--<repo>--<owner>.hlx.page/.

    • <branch> fait référence à la branche de votre référentiel GitHub.
    • <repository> indique votre référentiel GitHub.
    • <owner> fait référence au nom d’utilisateur ou d’utilisatrice de votre compte GitHub qui héberge votre référentiel GitHub.

    Par exemple, si le nom de la branche est main, le référentiel est wefinance, et la personne propriétaire est wkndforms, le site web serait opérationnel à l’adresse https://main—wefinance—wkndforms.hlx.page/.

Lier votre propre source de contenu

Votre référentiel GitHub nouvellement créé pointe vers un exemple de contenu stocké dans un dossier Google Drive. Ce contenu en lecture seule constitue un excellent point de départ pour vos formulaires. N’hésitez pas à le copier dans votre propre Google Drive et à le personnaliser en fonction de vos besoins.

Exemple de contenu sur Google Drive

Pour copier l’exemple de contenu dans votre propre dossier de contenu et pointer votre référentiel GitHub vers votre propre dossier de contenu :

  1. Créez un dossier spécifique pour votre contenu AEM dans Google Drive ou Microsoft SharePoint. Ce document utilise un dossier créé sur Microsoft SharePoint.

  2. Partagez le dossier avec l’utilisateur ou l’utilisatrice Adobe Experience Manager (helix@adobe.com).

    Utilisation de l’option Gérer l’accès pour partager un dossier avec un utilisateur ou une utilisatrice AEM - SharePoint

    Utilisation de l’option Gérer l’accès pour partager un dossier avec un utilisateur ou une utilisatrice AEM - Google Drive

    Assurez-vous que vous avez accordé des droits de modification sur le dossier à l’utilisateur ou à l’utilisatrice Adobe Experience Manager.

    Partage d’un dossier avec un utilisateur ou une utilisatrice AEM et octroi des droits de modification - SharePoint

    Partage d’un dossier avec un utilisateur ou une utilisatrice AEM et octroi des droits de modification - Google Drive

  3. Copiez l’exemple de contenu stocké dans le dossier Google Drive dans votre dossier. Pour le copier :

    1. Téléchargez les fichiers regroupés ensemble ou téléchargez des fichiers individuels.

      Téléchargement de l’exemple de contenu

      Les fichiers nav et footer définissent la disposition de base de vos pages et changent rarement au cours d’un projet. Ils ont également une structure spécifique différente de la plupart des autres fichiers de contenu. En examinant ces fichiers, vous pouvez observer comment le contenu est organisé dans des projets AEM.

    2. Chargez ces fichiers dans le dossier Microsoft SharePoint ou le dossier Google Drive.

      Exemple de contenu sur Google Drive

      Assurez-vous de copier la feuille enquiry de l’exemple de contenu dans votre dossier Google Drive ou Microsoft SharePoint. Elle contient la structure d’un exemple de formulaire.

  4. Maintenant que votre dossier de contenu est configuré, il est temps de le lier à votre projet sur GitHub que vous avez créé plus tôt à l’aide du modèle standard AEM Forms. Pour le connecter :

    1. Accédez au référentiel GitHub que vous avez créé plus tôt à l’aide du modèle standard AEM Forms.

    2. Ouvrez fstab.yaml pour édition.

    3. Remplacez la référence existante par le chemin d’accès au dossier que vous avez partagé avec l’utilisateur ou l’utilisatrice AEM (helix@adobe.com).

      Exemple de contenu sur Google Drive

      Si vous utilisez Microsoft SharePoint, le chemin d’accès au dossier utilise le format suivant :

      code language-html 
      https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

      par exemple,

      code language-html 
      https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

      Pour plus d’informations sur la gestion des fichiers avec Microsoft SharePoint, consultez Utilisation d’Adobe SharePoint.

    4. Validez le fichier fsatb.yaml mis à jour une fois que vous avez mis à jour la référence et que tout semble correct. Si vous rencontrez des problèmes de génération, consultez Résolution des problèmes de génération dans GitHub.

      Validation du fichier fsatab.yaml mis à jour

      Cela connecte votre dossier de contenu à votre site web. Après la mise à jour de la référence, vous pouvez au départ rencontrer des erreurs « 404 Not Found ». Celles-ci se produisent parce que votre contenu n’a pas encore été prévisualisé. La section suivante explique comment commencer à créer et à prévisualiser votre contenu.

Prévisualiser et publier votre contenu

Une fois la dernière étape terminée, votre nouvelle source de contenu n’est pas vide, mais elle ne sera pas visible sur votre site web tant qu’elle n’aura pas été transférée à l’état de prévisualisation ou à l’état actif. Actuellement, cela peut entraîner des erreurs 404.

Pour prévisualiser du contenu non publié :

  1. Installez l’extension Chrome AEM Sidekick.

    Installation d’AEM Sidekick

    Après l’installation de l’extension dans Chrome, n’oubliez pas de l’épingler. Cela permet de la retrouver plus facilement.

    Épinglage d’AEM Sidekick

  2. Pour configurer l’extension Chrome Sidekick, accédez à votre dossier Google Drive ou Microsoft SharePoint précédemment partagé, puis cliquez avec le bouton droit de la souris sur l’icône de l’extension dans la barre d’outils du navigateur et sélectionnez Add this project.

    AEM Sidekick - Ajout d’un projet

    Une fois l’extension installée et votre projet ajouté, vous êtes en mesure de prévisualiser et de publier votre contenu à partir de votre Google Drive.

  3. Sélectionnez tous les documents du dossier Microsoft SharePoint ou Google Drive. Vous pouvez sélectionner plusieurs documents en maintenant la touche Ctrl (Windows/Linux) ou Cmd (Mac) enfoncée tout en cliquant.

    Sélection de tous les fichiers

  4. Cliquez sur l’icône d’AEM Sidekick épinglée à votre barre d’extensions Chrome. Une barre d’outils s’affiche à l’écran. Vous pouvez choisir de prévisualiser ou de publier votre contenu.

    Si vous avez copié les fichiers index, nav, footer et enquiry, il s’agit de documents distincts possédant chacun leurs propres cycles de prévisualisation et de publication. Veillez donc à tous les prévisualiser (et à les publier).

    Lors de la prévisualisation des fichiers, de nouveaux onglets dans le navigateur affichent les documents. Pour prévisualiser l’exemple de formulaire, accédez à l’URL suivante :

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.live
    • <branch> fait référence à la branche de votre référentiel GitHub.
    • <repository> indique votre référentiel GitHub.
    • <owner> fait référence au nom d’utilisateur ou d’utilisatrice de votre compte GitHub qui héberge votre référentiel GitHub.

    URL https://<branch>--<repo>--<owner>.hlx.page/enquiry.

    Par exemple, si le référentiel de votre projet s’appelle « wefinance », que la personne propriétaire du compte est « wkndforms » et que vous utilisez la branche « main », l’URL est :

    https://main–wefinance–wkndforms.hlx.page.

Créer un formulaire

L’exemple de contenu inclut une feuille « demande » qui sert de modèle pour le formulaire « demande ». Chaque ligne de la feuille représente un champ de formulaire et les en-têtes de colonne définissent les propriétés des champs. Cet exemple de formulaire vous offre une base pour la création de votre formulaire.

Formulaire de demande

Commençons par mettre à jour un libellé de champ. Ouvrez la feuille « demande » pour effectuer des modifications, modifiez le libellé du bouton Envoyer en Let's Chat et utilisez AEM Sidekick pour prévisualiser et publier le fichier.

Formulaire de demande

Lorsque vous prévisualisez ou publiez le fichier, une version JSON du fichier s’affiche dans un nouvel onglet. Copiez l’URL de prévisualisation (.hlx.page) ou de publication (.hlx.live) du fichier.

JSON de la feuille de calcul du formulaire

Ouvrez le fichier enquiry et remplacez l’URL du bloc de formulaire par l’URL du fichier copié lors de l’étape précédente. Vérifiez que l’URL est un lien hypertexte.

Fichier de demande avec l’URL .json de l’URL de la feuille de calcul

Utilisez AEM Sidekick pour prévisualiser et publier le document de demande.

Fichier de demande avec l’URL .json de l’URL de la feuille de calcul

Pour prévisualiser le formulaire de demande mis à jour, accédez à l’URL suivante :

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

Le libellé du bouton Envoyer est remplacé par Let's Chat.

Formulaire de demande

Pour plus d’informations sur la création et la publication d’un nouveau formulaire, consultez le guide Créer un formulaire.

Commencer à développer le style et les fonctionnalités

Pour être rapidement capable d’opérer avec un environnement de développement AEM local :

  1. Installez l’interface de ligne de commande AEM : l’interface de ligne de commande AEM simplifie les tâches de développement. Installez-la globalement à l’aide de npm :

    code language-bash 
        npm install -g @adobe/aem-cli

  2. Clonez votre projet GitHub : clonez votre référentiel de projet à partir de GitHub à l’aide de la commande suivante, en remplaçant la personne propriétaire du référentiel et le nom du référentiel :

    code language-none 
    git clone https://github.com/<owner>/<repo>

  3. Démarrez votre environnement local : accédez à votre répertoire de projet et déclenchez votre instance d’AEM locale à l’aide d’une seule commande :

    code language-none 
    cd <repo>
aem up

Le dossier du bloc de formulaires adaptatifs blocks/form est votre espace réservé pour le style et le code de vos formulaires. Modifiez n’importe quel fichier .css ou .js dans ce répertoire et les modifications seront visibles instantanément dans votre navigateur.

Votre création est prête à être dévoilée ? Utilisez Git pour valider et envoyer vos modifications. Cela met à jour les environnements de prévisualisation et de production accessibles aux URL suivantes (remplacez les espaces réservés par les détails de votre projet) :

Prévisualisation : https://<branch>--<repo>--<owner>.hlx.page/
Production : https://<branch>--<repo>--<owner>.hlx.live/

Félicitations. Vous avez correctement configuré votre environnement de développement local et déployé vos modifications.

Ajouter un bloc de formulaires adaptatifs à votre projet AEM existant

https://video.tv.adobe.com/v/3427789

Si vous disposez déjà d’un projet AEM, vous pouvez intégrer le bloc de formulaires adaptatifs à votre projet actuel pour commencer à créer le formulaire.

NOTE
Cette étape s’applique aux projets créés à l’aide du modèle standard AEM. Si vous avez créé votre projet AEM à l’aide du modèle standard AEM Forms, vous pouvez ignorer cette étape.

Pour effectuer l’intégration :

  1. Clonez le référentiel du bloc de formulaires adaptatifs : https://github.com/adobe-rnd/aem-boilerplate-forms sur votre ordinateur.

  2. Dans le dossier téléchargé, recherchez le dossier blocks/form. Copiez ce dossier. Maintenant, accédez au dossier blocks local de votre projet AEM et collez le dossier de formulaire copié à cet emplacement.

  3. Validez et envoyez ces modifications vers votre projet AEM sur GitHub.

C’est terminé. Le bloc de formulaires adaptatifs fait désormais partie de votre projet AEM. Vous pouvez commencer à créer et ajouter des formulaires à vos pages AEM.

Résolution des problèmes de génération dans GitHub

Assurez-vous d’avoir un processus de génération GitHub fluide en résolvant les problèmes potentiels :

  • Résoudre l’erreur de chemin d’accès du module :
    si vous rencontrez l’erreur « Impossible de résoudre le chemin d’accès au module "…/…/scripts/lib-franklin.js" », accédez au fichier /blocks/forms/form.js du [Projet EDS]. Mettez à jour l’instruction d’import en remplaçant le fichier lib-franklin.js par le fichier aem.js.

  • Gérer les erreurs de lint :
    si vous rencontrez des erreurs de lint, vous avez la possibilité de les contourner. Ouvrez le fichier /package.json [Projet EDS] et modifiez le script « lint » de "lint": "npm run lint:js && npm run lint:css" en "lint": "echo 'skipping linting for now'". Enregistrez le fichier et validez les modifications apportées à votre projet GitHub.

Voir également

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab