Listes

DocPayload prend en charge les listes ordonnées (numérotées) et non ordonnées (à puces). Chaque élément de liste accepte n'importe quel nœud de contenu — paragraphes, titres, tableaux, colonnes, images, canevas, voire listes imbriquées — suivant la sémantique de contenu de flux HTML5 <li>. Les listes peuvent également être remplies dynamiquement à partir de données.

Listes ordonnées

Utilisez ol pour créer une liste numérotée.

{
  "ol": {
    "li": [
      { "p": "Verify package dimensions and weight." },
      { "p": "Print the shipping label." },
      { "p": "Drop off at the nearest collection point." }
    ]
  }
}

Listes non ordonnées

Utilisez ul pour créer une liste à puces.

{
  "ul": {
    "li": [
      { "p": "Real-time shipment tracking" },
      { "p": "Multi-carrier rate comparison" },
      { "p": "Automated customs documentation" }
    ]
  }
}

Propriétés

Propriété	Type	Requis	Description
`ol` ou `ul`	object	Oui	Le conteneur de liste
`li`	array	Oui	Tableau des éléments de contenu de liste
`symbol`	string	Non	Style de numérotation pour les listes ordonnées, ou puce personnalisée pour les listes non ordonnées
`style`	string	Non	Style nommé à appliquer à tous les éléments de liste

Styles de numérotation

Contrôlez la façon dont les éléments de liste ordonnée sont numérotés à l'aide de la propriété symbol.

Symbole	Sortie	Description
`"1"`	1. 2. 3.	Nombres décimaux (par défaut)
`"a"`	a. b. c.	Lettres minuscules
`"A"`	A. B. C.	Lettres majuscules
`"i"`	i. ii. iii.	Chiffres romains minuscules
`"I"`	I. II. III.	Chiffres romains majuscules
`"α"`	α. β. γ.	Grec minuscule
`"Α"`	Α. Β. Γ.	Grec majuscule

{
  "ol": {
    "symbol": "A",
    "li": [
      { "p": "First item" },
      { "p": "Second item" },
      { "p": "Third item" }
    ]
  }
}

{
  "ol": {
    "symbol": "i",
    "li": [
      { "p": "Section one" },
      { "p": "Section two" },
      { "p": "Section three" }
    ]
  }
}

Symbole de puce personnalisé

Remplacez le caractère de puce par défaut pour les listes non ordonnées à l'aide de la propriété symbol. N'importe quelle valeur de chaîne est acceptée.

{
  "ul": {
    "symbol": "-",
    "li": [
      { "p": "Chicago hub" },
      { "p": "Denver hub" },
      { "p": "Dallas hub" }
    ]
  }
}

Listes de style

Appliquez un style nommé pour formater tous les éléments d'une liste.

{
  "ul": {
    "li": [
      { "p": "Express delivery: 1-2 days" },
      { "p": "Standard delivery: 3-5 days" },
      { "p": "Economy delivery: 7-10 days" }
    ]
  },
  "style": "bodyText"
}

Les éléments de liste individuels peuvent également référencer leurs propres styles :

{
  "ul": {
    "li": [
      { "p": "[b]Express delivery[/b]: 1-2 days", "style": "highlight" },
      { "p": "Standard delivery: 3-5 days" },
      { "p": "Economy delivery: 7-10 days" }
    ]
  }
}

Listes imbriquées

Placez une liste dans un élément de liste pour créer une imbrication multi-niveaux.

{
  "ol": {
    "li": [
      { "p": "Prepare shipment" },
      {
        "ul": {
          "li": [
            { "p": "Verify dimensions" },
            { "p": "Weigh the package" },
            { "p": "Apply fragile stickers if needed" }
          ]
        }
      },
      { "p": "Generate shipping label" },
      { "p": "Schedule pickup" }
    ]
  }
}

Listes dans les cellules de tableau

Les listes fonctionnent dans les cellules de tableau pour les mises en page structurées.

{
  "table": {
    "widths": [1, 2],
    "rows": [
      [
        { "p": "[b]Included Services[/b]" },
        {
          "ul": {
            "li": [
              { "p": "Door-to-door delivery" },
              { "p": "Package insurance up to $5,000" },
              { "p": "SMS delivery notifications" }
            ]
          }
        }
      ],
      [
        { "p": "[b]Setup Steps[/b]" },
        {
          "ol": {
            "li": [
              { "p": "Create an account" },
              { "p": "Add your warehouse address" },
              { "p": "Configure carrier preferences" }
            ]
          }
        }
      ]
    ]
  }
}

Listes pilotées par les données

Les listes peuvent être remplies à partir de tableaux de données à l'aide de source. Le tableau li de la liste peut être laissé vide — les éléments sont ajoutés à partir des données.

Tableaux de chaînes simples

Quand la source de données est un tableau de chaînes, chaque chaîne devient directement un élément de liste :

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

Avec des données { "notes": ["Payment due in 30 days", "Late fees apply", "Contact billing@acme.com"] }, cela rend trois éléments à puces.

Pour les listes ordonnées :

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

Une liste est soit créée (vous tapez ses éléments via li) soit pilotée par les données (les éléments proviennent de source). Les deux sont des alternatives — vous ne les combinez pas :

Créée — fournissez li avec les éléments que vous souhaitez.
Pilotée par les données — fournissez source (et optionnellement map pour façonner chaque élément). Pas de li nécessaire.

symbol fonctionne de la même manière dans les deux modes — définissez-le sur la liste pour choisir le style du marqueur (A, a, I, i, 1, caractère de puce personnalisé, etc.). Voir Styles de numérotation pour l'ensemble complet.

Modèles `$item.*` dans la carte

map est optionnel. Sans elle, une source de tableau de chaînes rend chaque chaîne directement comme un élément. Utilisez map quand la source est un tableau d'objets et que vous souhaitez sélectionner des champs ou composer des modèles à partir d'eux :

{
  "ul": {
    "source": "$data.deliveries",
    "map": "$item.date — $item.items ($item.warehouse)"
  }
}

Avec des données :

{
  "deliveries": [
    { "date": "Jan 15", "items": "Electronics", "warehouse": "Chicago" },
    { "date": "Jan 18", "items": "Furniture", "warehouse": "Denver" }
  ]
}

Cela rend :

Jan 15 — Electronics (Chicago)
Jan 18 — Furniture (Denver)

Remarque : pour les listes, map est une chaîne de modèle unique (contrairement aux tableaux) car chaque élément de liste est une ligne.

Exemple complet : liste de contrôle d'intégration

Modèle :

{
  "document": {
    "styles": {
      "title": { "fontSize": 16, "fontWeight": "bold", "marginBottom": 6 },
      "section": { "fontSize": 12, "fontWeight": "bold", "marginTop": 12, "marginBottom": 4 }
    },
    "content": [
      { "p": "Onboarding Checklist — $data.employee.name", "style": "title" },
      { "p": "Start date: $data.employee.startDate" },

      { "p": "Required Training", "style": "section" },
      {
        "ol": {
          "source": "$data.training",
          "map": "$item.course — Due by $item.deadline"
        }
      },

      { "p": "Equipment to Collect", "style": "section" },
      {
        "ul": { "source": "$data.equipment" }
      },

      { "p": "Key Contacts", "style": "section" },
      {
        "ul": {
          "source": "$data.contacts",
          "map": "$item.name ($item.role) — $item.email"
        }
      }
    ]
  }
}

Données :

{
  "employee": { "name": "James Walker", "startDate": "March 3, 2026" },
  "training": [
    { "course": "Security Awareness", "deadline": "Week 1" },
    { "course": "Code of Conduct", "deadline": "Week 1" },
    { "course": "Platform Overview", "deadline": "Week 2" }
  ],
  "equipment": ["Laptop", "Monitor", "Security badge", "Parking pass"],
  "contacts": [
    { "name": "Emily Chen", "role": "Manager", "email": "emily@acme.com" },
    { "name": "David Park", "role": "IT Support", "email": "david@acme.com" },
    { "name": "Rachel Torres", "role": "HR", "email": "rachel@acme.com" }
  ]
}

Résultat attendu :

Formation requise (commandée) :

Security Awareness — Due by Week 1
Code of Conduct — Due by Week 1
Platform Overview — Due by Week 2

Équipement à collecter (non commandé, chaînes simples) :

Laptop
Monitor
Security badge
Parking pass

Contacts clés (non commandé, $item.* composé) :

Emily Chen (Manager) — emily@acme.com
David Park (IT Support) — david@acme.com
Rachel Torres (HR) — rachel@acme.com

Voir Source de données pour plus d'informations sur le contenu piloté par les données.

Mise en forme en ligne dans les éléments de liste

Les éléments de liste prennent en charge la pleine gamme de balises de mise en forme en ligne.

{
  "ul": {
    "li": [
      { "p": "[color, #27AE60][b]Active[/b][/color] -- Chicago Distribution Center" },
      { "p": "[color, #E74C3C][b]Offline[/b][/color] -- Seattle Warehouse" },
      { "p": "[color, #F39C12][b]Maintenance[/b][/color] -- Dallas Sorting Facility" }
    ]
  }
}

Listes ordonnées​

Listes non ordonnées​

Propriétés​

Styles de numérotation​

Symbole de puce personnalisé​

Listes de style​

Listes imbriquées​

Listes dans les cellules de tableau​

Listes pilotées par les données​

Tableaux de chaînes simples​

Modèles $item.* dans la carte​

Exemple complet : liste de contrôle d'intégration​

Mise en forme en ligne dans les éléments de liste​