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
-
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. -
Assurez-vous que l’utilisateur AEM (par exemple, helix@adobe.com) configuré pour votre projet comporte modifier l’autorisation sur la feuille.
-
Ouvrez le classeur créé et renommez la feuille par défaut en .
incoming
.
Remarque : AEM n’enverra aucune donnée à ce classeur siincoming
la feuille n’existe pas. -
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. -
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. -
Après avoir envoyé le
POST
requête au service d’administration : les modifications suivantes ont été apportées à votre classeur.-
Une feuille nommée
helix-default
est créé. Les données de cette feuille sont celles qui seront renvoyées lorsqu’uneGET
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 duincoming
feuille destinée à être consommée ailleurs
Remarque : Lehelix-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. -
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.- Pour configurer les notifications de Slack, saisissez le
teamId
de l’espace de travail du Slack etchannel
nom ou ID. Tu peux aussi demander au slack-bot (avecdebug
) pour leteamId
et lechannel
ID. Utilisation dechannel
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 lateamId
colonne. LeteamId
a été inclus danschannel
colonne, séparée par un#
ou/
. - 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
).
- Pour configurer les notifications de Slack, saisissez le
-
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.