Prérequis fondamentaux

Guide complet pour créer des modèles et/ou des documents automatisés avec HTML, JSON et le SDK de génération de documents.

---

Toute automatisation nécessite exactement 3 fichiers :

Fichier	Description
HTML masque	Le HTML que l'utilisateur voit en remplissant le formulaire via le SDK
HTML complet	HTML servant à générer le PDF final, inclut les espaces pour les signatures
Objet JSON	Contrôle le comportement, définit les signataires et les questions

Flux général

Le processus commence toujours par la construction du HTML complet. Ce document doit contenir des espaces modifiables où l'utilisateur saisit les informations. Ce HTML dépendra des variables enregistrées dans le JSON, où chaque question possède un identifiant.

Par exemple :

1. HTML:

<p>Description : <span name="question_1">___________</span></p>

2. Question dans le JSON :

[
  ...,
{
  "name": "question_1",
  "description": "Saisissez le nom complet du représentant légal de l'entreprise employeuse",
  "type": "text"
},
  ...
]

3. Ce que l'utilisateur voit finalement :

---

Configuration

1. Pour commencer à générer les fichiers HTML, découvrez tout sur leur création dans Configuration HTML.
2. Pour commencer à générer le fichier JSON, consultez la référence complète dans Configuration JSON — elle couvre les 17 types de questions, les validations et la logique conditionnelle.
3. Pour les modèles qui doivent valider un code ou rechercher des données préremplies depuis votre propre service, consultez Type de requête.

Conseils et bonnes pratiques

1. Nommage cohérent : utilisez un snake_case descriptif pour les questions : buyer_name, seller_email.
2. Faire correspondre les types de champs à la sémantique : utilisez identification pour les pièces d'identité des signataires (et non text ou number), nit pour les numéros fiscaux colombiens, currency pour les montants, email pour les adresses e-mail.
3. Validation anticipée : indiquez les questions critiques dans le tableau sign.
4. Tirer parti des validations : déduisez subYears (âge), maxlength, regex, min/max à partir des exigences propres au document. Voir Propriétés de validation.
5. Convention des signataires : ancrez chaque signature avec <div name="X">, et non avec id. Si une signature apparaît à plusieurs endroits, répétez le même name — voir Placement des signatures.
6. Champs automatiques : ajoutez <span name="signDate"> à l'endroit où la date de signature doit apparaître. Voir Champs automatiques à la fin de la signature.
7. Identifications multiples : utilisez | dans signatureProfile.identification pour prendre en charge plusieurs types de documents pour un même signataire.
8. Contraintes du générateur de PDF : le générateur de PDF d'Auco ne prend pas en charge flexbox, CSS Grid ni les variables CSS dans le HTML complet. Voir Contraintes du générateur de PDF.
9. Tests : vérifiez que chaque option clausula s'affiche/se masque correctement et que l'option par défaut correspond à la value de la configuration.

---

Liste de vérification

Avant de déployer votre automatisation, vérifiez que :

• Vous disposez des 3 fichiers (HTML masque, HTML complet, JSON).
• Chaque question du JSON possède name, description et type.
• Chaque name du HTML correspond à une question du JSON — et inversement.
• Les questions clausula ont un <span name="{name}_{value}"> par option dans le HTML.
• La value par défaut d'une configuration clausula correspond au span sans l'attribut hidden.
• Les questions avec prereq référencent des questions de type clausula.
• Chaque signataire de signatureProfile a son <div name="X"> dans le HTML complet, avec X égal à son type.
• Les questions de sign référencent des noms de questions réels.
• Les questions d'identification des signataires utilisent type: "identification", les NIT utilisent type: "nit".
• Les questions check utilisent un tableau plat values: [...] (et non options).
• Le HTML n'utilise pas display: flex, CSS Grid ni les variables CSS.
• Les caractères UTF-8 (ñ, á) sont écrits directement, et non sous forme d'entités HTML.
• Si vous utilisez preBuild: true, vous avez inclus preBuildData.

---

Exemple intégré complet

JSON complet

{
  "name": "Contrat de vente",
  "preBuild": false,
  "sign": ["buyer_name", "buyer_email"],
  "config": [
    {
      "name": "buyer_name",
      "description": "Saisissez votre nom complet",
      "type": "name"
    },
    {
      "name": "identification_type",
      "description": "Sélectionnez votre type de pièce d'identité",
      "type": "clausula",
      "value": "id_card",
      "options": [
        { "name": "Carte d'identité nationale", "value": "id_card" },
        { "name": "Carte d'identité étrangère", "value": "foreign_id" }
      ]
    },
    {
      "name": "id_card_number",
      "description": "Saisissez votre numéro d'identification",
      "type": "number",
      "prereq": [{ "k": "identification_type", "v": "id_card" }]
    },
    {
      "name": "foreign_id_number",
      "description": "Saisissez votre numéro de pièce d'identité étrangère",
      "type": "number",
      "prereq": [{ "k": "identification_type", "v": "foreign_id" }]
    },
    {
      "name": "buyer_email",
      "description": "Saisissez votre adresse e-mail",
      "type": "email"
    },
    {
      "name": "buyer_phone",
      "description": "Saisissez votre numéro de téléphone",
      "type": "phone"
    },
    {
      "name": "transaction_value",
      "description": "Saisissez la valeur totale de l'achat",
      "type": "currency"
    },
    {
      "name": "transaction_date",
      "description": "Sélectionnez la date de la transaction",
      "type": "date"
    },
    {
      "name": "product_description",
      "description": "Décrivez brièvement le produit",
      "type": "text"
    }
  ],
  "signatureProfile": [
    {
      "name": "buyer_name",
      "identification": "id_card_number|foreign_id_number",
      "email": "buyer_email",
      "phone": "buyer_phone",
      "type": "buyer"
    }
  ]
}

HTML masque

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Contrat de vente</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
      }
      .section {
        margin-bottom: 30px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      h1 {
        text-align: center;
        color: #333;
      }
      label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
      }
      span {
        border-bottom: 1px solid #000;
        min-width: 200px;
        display: inline-block;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Contrat de vente</h1>

    <div class="section">
      <h2>Informations sur l'acheteur</h2>
      <label>Nom complet :</label>
      <span name="buyer_name">___________________</span>

      <label>Type de pièce d'identité :</label>
      <span name="identification_type_id_card">Carte d'identité</span>
      <span name="identification_type_foreign_id" hidden>Pièce d'identité étrangère</span>

      <label>Numéro d'identification :</label>
      <span name="id_card_number">___________________</span>
      <span name="foreign_id_number" hidden>___________________</span>

      <label>Adresse e-mail :</label>
      <span name="buyer_email">___________________</span>

      <label>Téléphone de contact :</label>
      <span name="buyer_phone">___________________</span>
    </div>

    <div class="section">
      <h2>Informations sur la transaction</h2>
      <label>Description du produit :</label>
      <span name="product_description">___________________</span>

      <label>Valeur totale :</label>
      <span name="transaction_value">___________________</span>

      <label>Date de la transaction :</label>
      <span name="transaction_date">___________________</span>
    </div>

    <p style="margin-top: 50px; text-align: center;">Signature de l'acheteur : ______________________</p>
  </body>
</html>

HTML complet

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Contrat de vente</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
      }
      .sign-margin {
        min-height: 100px;
        margin-top: 30px;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <h1>Contrat de vente</h1>

    <h2>Informations sur l'acheteur</h2>
    <p>
      Nom : <strong><span name="buyer_name">___________________</span></strong>
    </p>
    <p>
      Pièce d'identité :
      <strong
        ><span name="id_card_number">___________________</span
        ><span name="foreign_id_number" hidden>___________________</span></strong
      >
    </p>
    <p>
      E-mail : <strong><span name="buyer_email">___________________</span></strong>
    </p>

    <h2>Informations sur la transaction</h2>
    <p>
      Produit : <strong><span name="product_description">___________________</span></strong>
    </p>
    <p>
      Valeur : <strong><span name="transaction_value">___________________</span></strong>
    </p>
    <p>
      Date : <strong><span name="transaction_date">___________________</span></strong>
    </p>

    <h2>Signature</h2>
    <div name="buyer" class="sign-margin"></div>
  </body>
</html>