Aller au contenu principal

Source de données

La propriété source remplit les tableaux et les listes à partir de tableaux de votre objet de données. C'est ainsi que vous générez du contenu de longueur dynamique -- des tableaux avec un nombre de lignes variable, ou des listes avec un nombre d'éléments variable.

Source de données du tableau

Propriétés

PropriétéTypeDescription
sourcestringChemin $data pointant vers un tableau d'objets
mapstring[]Tableau de clés d'objets, mappées aux colonnes de gauche à droite

Fonctionnement

  1. Définissez le tableau avec ses widths et une ligne d'en-tête dans rows.
  2. Définissez source sur un chemin $data pointant vers un tableau d'objets.
  3. Définissez map pour spécifier quelles clés d'objets correspondent à quelles colonnes.
  4. Au moment de la génération, une ligne est ajoutée pour chaque élément du tableau, avec les valeurs extraites des clés listées dans map.

La ligne d'en-tête que vous définissez dans rows est préservée. Les lignes de données sont ajoutées après.

Modèle

{
"table": {
"source": "$data.items",
"map": ["description", "qty", "amount"],
"widths": [3, 1, 1],
"rows": [
[
{ "p": "[b]Description[/b]" },
{ "p": "[b]Qty[/b]" },
{ "p": "[b]Amount[/b]" }
]
]
}
}

Données

{
"items": [
{ "description": "Cloud migration", "qty": "120", "amount": "$18,000" },
{ "description": "Security audit", "qty": "40", "amount": "$6,000" },
{ "description": "Training sessions", "qty": "16", "amount": "$2,400" }
]
}

Résultat

Le tableau s'affiche avec la ligne d'en-tête plus trois lignes de données :

DescriptionQtéMontant
Migration cloud120$18 000
Audit de sécurité40$6 000
Sessions de formation16$2 400

Mappage des colonnes

Le tableau map mappe les clés d'objets aux colonnes de manière positionnelle :

  • map[0] mappe à la première colonne
  • map[1] mappe à la deuxième colonne
  • map[2] mappe à la troisième colonne

Le nombre d'entrées dans map doit correspondre au nombre de colonnes défini dans widths.

Source de données de liste

Une liste pilotée par les données utilise source (et optionnellement map). Pour un tableau de chaînes, chaque chaîne devient directement un élément de liste. Pour un tableau d'objets, fournissez map avec un modèle $item.*.

Propriétés

PropriétéTypeDescription
sourcestringChemin $data pointant vers un tableau
mapstringModèle optionnel pour chaque élément (par ex. "$item.name — $item.role")

Fonctionnement

  1. Définissez la liste (ul ou ol) avec source à l'intérieur.
  2. Définissez source sur un chemin $data pointant vers un tableau.
  3. Au moment de la génération, un élément de liste est créé pour chaque entrée du tableau.

Lorsque source est fourni, omettez li — les éléments sont produits à partir des données.

Liste non ordonnée

{
"ul": {
"source": "$data.notes"
}
}

Liste ordonnée

{
"ol": {
"source": "$data.paymentTerms"
}
}

Données

{
"notes": [
"Payment due within 30 days",
"Late fees apply after due date",
"Contact billing@acme.com for questions"
],
"paymentTerms": [
"Wire transfer to ShipForge Ltd account",
"Reference: INV-SF-2026-0329",
"Net 30 days from invoice date"
]
}

Exemple combiné : tableau et liste

Cet exemple utilise à la fois une source de tableau pour les articles de ligne et une source de liste pour les conditions de paiement dans un seul document.

Modèle

{
"document": {
"styles": {
"title": { "fontSize": 20, "fontWeight": "bold" },
"subtitle": { "fontSize": 12, "fontStyle": "italic", "color": "#555555" },
"total": { "fontWeight": "bold", "fontSize": 14 }
},
"content": [
{ "p": "$data.document.title", "style": "title" },
{ "p": "Prepared for $data.client.companyName on $data.document.date", "style": "subtitle" },
{
"hr": {
"borderStyle": "solid",
"height": 1,
"color": "#000000"
}
},
{
"table": {
"source": "$data.lineItems",
"map": ["service", "hours", "rate", "total"],
"widths": [4, 1, 1, 1],
"rows": [
[
{ "p": "[b]Service[/b]" },
{ "p": "[b]Hours[/b]" },
{ "p": "[b]Rate[/b]" },
{ "p": "[b]Total[/b]" }
]
]
}
},
{ "p": "Grand Total: $data.invoice.grandTotal", "style": "total" },
{ "p": "Payment Terms:" },
{
"ol": {
"source": "$data.paymentTerms"
}
},
{ "p": "Thank you for your business, $data.client.contactName." }
]
}
}

Données

{
"document": {
"title": "Professional Services Invoice",
"date": "March 29, 2026"
},
"client": {
"companyName": "Meridian Logistics",
"contactName": "Sarah Mitchell"
},
"lineItems": [
{ "service": "Platform setup", "hours": "80", "rate": "$150", "total": "$12,000" },
{ "service": "API integration", "hours": "40", "rate": "$175", "total": "$7,000" },
{ "service": "User training", "hours": "16", "rate": "$125", "total": "$2,000" }
],
"invoice": {
"grandTotal": "$21,000"
},
"paymentTerms": [
"Wire transfer to ShipForge Ltd account",
"Reference: INV-SF-2026-0329",
"Net 30 days from invoice date"
]
}

Résultat

Le PDF généré contient :

  1. Un titre « Facture de services professionnels » avec le sous-titre « Préparé pour Meridian Logistics le 29 mars 2026 »
  2. Un tableau avec une ligne d'en-tête et trois lignes de données pour les articles de ligne
  3. Le total général « Total général : $21 000 »
  4. Une liste numérotée des conditions de paiement
  5. Une ligne de fermeture « Merci de votre confiance, Sarah Mitchell. »

Points clés

  • source et map sont placés en tant que propriétés sœurs aux côtés de l'objet table ou ul/ol, pas à l'intérieur.
  • La ligne d'en-tête dans un tableau est préservée ; les lignes de données sont ajoutées après.
  • Pour les listes, le tableau li doit être vide lors de l'utilisation de source -- les éléments sont générés à partir du tableau de données.
  • Les valeurs source sont des chemins $data, tout comme les références scalaires.
  • Vous pouvez combiner les références scalaires $data et source dans le même document.