Formulaires

AEM propose un service de formulaires qui ingère les données envoyées dans un document Microsoft Excel ou Google Sheet.

Les données envoyées par le biais de formulaires sur votre site web se propagent directement dans des feuilles de calcul, ce qui les rend facilement accessibles aux utilisateurs professionnels. Ces données peuvent également interagir avec des workflows automatisés plus complexes, car Google Sheets ainsi que Microsoft Excel et SharePoint offrent un accès à un écosystème dynamique et à des API robustes.

Préparation d’une feuille pour l’ingestion de données

  1. Créez un classeur Excel ou une feuille Google n’importe où sous votre répertoire de projet. Ce document utilise une feuille dans OneDrive appelée email-form.xlsx à la racine d’un projet AEM.

  2. Assurez-vous que l’utilisateur AEM (par exemple, helix@adobe.com) configuré pour votre projet comporte modifier l’autorisation sur la feuille.

  3. Ouvrez le classeur créé et renommez la feuille par défaut en . incoming.


    Remarque : AEM n’enverra aucune donnée à ce classeur si incoming la feuille n’existe pas.

  4. Prévisualisez la feuille dans le sidekick.
    Remarque : Même si une feuille a déjà été prévisualisée, elle doit l’être à nouveau après avoir créé incoming feuille pour la première fois.

  5. Configurez la feuille avec les en-têtes qui correspondent aux données ingérées. Vous pouvez le faire manuellement ou en envoyant une demande du POST à l’itinéraire de formulaire dans le service AEM Admin. Le service d’administration examinera les données du corps du POST et créera les en-têtes/tableaux et feuilles nécessaires à l’ingestion des données et à l’exploitation optimale du service Forms.
    Pour plus d’informations sur le format de la demande du POST pour configurer votre feuille, voir la API Admin ainsi que l’exemple suivant :

    Requête :

    code language-none
    POST /form/{owner}/{repo}/{ref}/en/email-form.json HTTP/1.1
    {"data":{"firstName":"test"}}
    

    Réponse :

    code language-none
    HTTP/1.1 200 OK
    {"rowCount":2,"columns":["firstName"]}
    

    Vous pouvez utiliser un outil tel que curl ou Postman pour effectuer cette requête de POST. Par exemple :

    code language-none
    curl -s -i -X POST 'https://admin.hlx.page/form/{owner}/{repo}/{ref}/en/email-form.json' \
    --header 'Content-Type: application/json' \
    --data '{"data":{"firstName":"test"}}'
    

    Par le biais de la requête de POST ci-dessus, nous fournissons des exemples de données, c’est-à-dire les champs de formulaire et les valeurs d’exemple qui seront utilisés par le service d’administration pour configurer le formulaire.
    Le service Admin est recommandé pour configurer votre feuille, mais si vous souhaitez créer les en-têtes manuellement, reportez-vous au document Configuration manuelle de la feuille de Forms.

  6. Après avoir envoyé le POST requête au service d’administration : les modifications suivantes ont été apportées à votre classeur.

    1. Une feuille nommée helix-default est créé. Les données de cette feuille sont celles qui seront renvoyées lorsqu’une GET la demande est effectuée sur la feuille. C’est un excellent endroit pour utiliser des formules de feuille de calcul pour résumer les données du incoming feuille destinée à être consommée ailleurs

      Remarque : Le helix-default La fiche ne doit jamais contenir d'informations d'identification personnelle ou d'autres données que vous n'êtes pas d'accord pour être accessible au public.

    2. Une feuille nommée slack a été créé. Vous pouvez configurer des notifications automatiques vers un canal de Slack chaque fois que des données sont ingérées dans votre feuille de calcul. Actuellement, AEM ne prend en charge que les notifications destinées à l’organisation AEM Engineering SLACK et à l’organisation de support aux entreprises d’Adobe.

      1. Pour configurer les notifications de Slack, saisissez le teamId de l’espace de travail du Slack et channel nom ou ID. Tu peux aussi demander au slack-bot (avec debug ) pour le teamId et le channel ID. Utilisation de channel Il est préférable de choisir l’identifiant plutôt que le nom, car il survit aux changements de nom de canal.

        Remarque : Les formulaires plus anciens n’avaient pas la teamId colonne. Le teamId a été inclus dans channel colonne, séparée par un # ou /.
      2. Enter any titre vous voulez et sous champs saisissez les noms des champs que vous souhaitez afficher dans la notification du Slack. Chaque titre doit être séparé par une virgule (p. ex. name, email).

Envoi de données à votre feuille

La feuille est maintenant prête pour l’ingestion de données et vous pouvez envoyer POST requêtes directement à la feuille sur hlx.page, hlx.live ou votre domaine de production.

POST https://ref–repo–owner.hlx.(page|live)/email-form
POST https://my-domain.com/email-form

Remarque : L’URL ne doit pas inclure le .json extension. La feuille doit être publiée pour POST opérations sur lesquelles agir .live ou sur le domaine de production.

Vous pouvez formater les données de formulaire de différentes manières dans le POST corps.

  • Sous la forme d’un tableau de paires nom/valeur
    https://gist.github.com/dylandepass/9ba6b83700dfce1fa90a47bde62c2e9
  • En tant qu’objet avec des paires clé/valeur
    <script src=“https://gist.github.com/dylandepass/2b5f694723dfdb3d304fcafc613d6595.js”></script>
  • As x-www-form-urlencoded corps (content-type l’en-tête doit être défini sur . application/x-www-form-urlencoded)
    <script src=“https://gist.github.com/dylandepass/b72b2e30313bc80beb02e12b1d7201ff.js”></script>

C’est tout ! Le service Forms s’exécute toutes les minutes afin que vous puissiez rapidement voir vos données ingérées dans la feuille.

Forms créé par l’auteur

Dans de nombreux cas, il est préférable que les auteurs créent des formulaires et décident quels champs de formulaire doivent être présentés au visiteur de votre site web. Il est courant d’utiliser le helix-default feuille de la même feuille de calcul que celle utilisée pour l’envoi du formulaire comme emplacement où l’auteur doit définir ses formulaires.

En règle générale, un bloc de formulaires prend une référence à la feuille de calcul et effectue le rendu du formulaire et gère le flux de l’utilisateur lors de l’envoi.

Un exemple simple d’une telle form bloc trouvé ici et le bloc de Forms adaptatif est disponible ici.

Lorsque vous avez besoin de formulaires dotés de fonctionnalités telles que reCAPTCHA, l’accessibilité, les chargements de fichiers, les validations de champ, la signature électronique, la surveillance des performances, les règles basées sur des feuilles de calcul, le document d’enregistrement (DE), etc., utilisez le 🔗 Bloc de Forms adaptatif. Il prend en charge un large éventail de formulaires, des formulaires simples collectant des informations de base (telles que des formulaires de contact ou des demandes de service) aux formulaires complexes comportant plusieurs sections, règles et intégrations à Adobe Sign, Adobe Workfront et des systèmes externes. Vous pouvez même l’utiliser pour envoyer des données à des feuilles de calcul ou vous connecter à des systèmes externes pour les formulaires au niveau de l’entreprise. Pour plus d’informations, consultez 🔗 Documentation AEM Forms Edge Delivery Services.

Consultez l’exemple suivant illustrant à quoi pourrait ressembler la feuille de calcul pour la définition de formulaire.

Les champs de formulaire pris en charge sont extensibles et les form doit être considéré comme un exemple qui vous donne un point de départ.

À titre d’exemple, un formulaire entièrement fonctionnel a été ajouté à cette page, à l’aide de la base de code répertoriée précédemment en ajoutant simplement le bloc suivant dans le document Google :

N’hésitez pas à l’essayer et à voir le flux de données du formulaire dans le feuille entrante. Le passage du service de formulaire à la feuille de calcul peut prendre une minute.

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec