Utilisez un Objet pour regrouper les champs associés et un Array pour une liste. Cette structure permet à HTML de lire des valeurs individuelles et de créer du contenu pour chaque élément fourni au modèle.
Ce guide commence par les détails du destinataire, ajoute une liste d’éléments et affiche cette liste sous forme de lignes de tableau.
1. Regrouper les champs avec Objet
Dans Parameters → Schema, ajoutez recipient, choisissez Objet et ajoutez deux champs de texte : name et email.
Les données ressemblent à ceci :
{
"recipient": {
"name": "Tembuilder",
"email": "[email protected]"
}
}Lire les champs imbriqués avec la notation par points : {{ params.recipient.name }} et {{ params.recipient.email }}.
2. Déclarez une liste avec Array
Ajoutez items, choisissez Array et définissez sa structure d’éléments sur Object. Ajoutez un texte name et un numéro quantity à cette structure.
{
"items": [
{ "name": "Item A", "quantity": 2 },
{ "name": "Item B", "quantity": 1 }
]
}Déclarez une fois les champs de l’élément ; ils s’appliquent à chaque élément de la liste. Fournissez un tableau réel plutôt que de placer la liste entière JSON dans un champ Texte.
3. Générez des lignes de tableau avec chaque
Utilisez une boucle each dans la section HTML :
<table>
<thead><tr><th>Item</th><th>Quantity</th></tr></thead>
<tbody>
{{#each params.items}}
<tr><td>{{ name }}</td><td>{{ quantity }}</td></tr>
{{else}}
<tr><td colspan="2">No items yet</td></tr>
{{/each}}
</tbody>
</table>À l’intérieur de each, name et quantity appartiennent à l’élément actuel. La branche else s’affiche lorsque le tableau est vide.
Pour un tableau long, mettez l’en-tête dans <thead> et permettez à la section de se diviser sur plusieurs feuilles. Voir Tableaux longs et pagination.
{{#each params.items}} {{ name }} · {{ quantity }}{{else}} No items yet{{/each}}4. Listes sans champs imbriqués
Pour les valeurs simples, définissez le type d’élément d’un tableau sur Texte, Nombre ou Booléen au lieu d’Objet. Par exemple, tags est un tableau de Text :
{ "tags": ["Design", "Review", "Approved"] }Utilisez this pour lire l’élément lui-même à l’intérieur de la boucle :
{{#each params.tags}}
<span>{{ this }}</span>
{{/each}}Les données d’objet et de tableau apparaissent toutes deux dans Payload, prêtes à être copiées dans Run.
{ "tags": ["Design", "Review", "Approved"] }Consultez la référence de syntaxe Handlebars pour les conditions, la portée, les échappements et les exemples avancés.