Constructeur de format d'impression

Exemple — Bureau Moderne Le responsable administratif de Bureau Moderne souhaite créer un format de bon de commande avec le logo en en-tête, les colonnes articles à gauche et le total à droite. Il ouvre le constructeur, glisse les champs dans les sections, ajuste l'alignement des colonnes depuis l'onglet latéral et enregistre avec Ctrl+S — sans écrire une seule ligne de HTML.

Le constructeur de format d'impression (Print Format Builder) est un éditeur visuel intégré à Dokos qui permet de créer et modifier des formats d'impression sans connaissance technique. Il est accessible depuis le formulaire d'un Format d'impression en activant le mode constructeur.

Nouveautés du constructeur moderne

Aperçu en modale

Exemple — Maison Verte SARL Le comptable de Maison Verte souhaite ajuster le format de facture tout en voyant immédiatement l'impact de ses modifications. Il clique sur l'icône Aperçu (👁️) dans la barre d'en-tête du constructeur et l'aperçu s'ouvre dans une modale centrée, lui permettant de valider le résultat avant impression sans quitter l'éditeur.

Le constructeur propose désormais un aperçu en modale qui s'affiche au centre de l'écran, offrant une vue plus large et plus immersive du rendu final.

Fonctionnalités clés de l'aperçu en modale :

• Ouverture rapide : Cliquez sur l'icône Aperçu (👁️) dans la barre d'en-tête du constructeur pour ouvrir la modale.
• Fermeture intuitive : Fermez la modale avec la touche Échap, en cliquant sur la croix (✕) ou en cliquant en dehors de la modale.
• Mode plein écran : Utilisez le bouton Plein écran (⛶) pour agrandir l'aperçu et visualiser les détails.
• Inspecteur accessible : L'inspecteur des champs reste disponible dans la barre latérale droite pendant que l'aperçu est ouvert, permettant des ajustements sans fermer la modale.
• Modes de prévisualisation : Basculez entre les modes Flux (rafraîchissement automatique) et Pages (rendu fidèle avec sauts de page) directement depuis la modale.

Comment utiliser l'aperçu en modale :

1. Ouvrez un Format d'impression et activez le mode constructeur.
2. Cliquez sur l'icône Aperçu (👁️) dans la barre d'en-tête du constructeur.
3. La modale s'ouvre, affichant le rendu actuel du format.
4. Ajustez les éléments dans le canevas ou via l'inspecteur, et observez les changements en temps réel dans la modale.
5. Utilisez le bouton Plein écran pour une vue détaillée, ou fermez la modale pour revenir à l'éditeur.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Cliquer sur l'icône Aperçu]
    B --> C[Modale s'ouvre]
    C --> D[Modifier le format]
    D --> E[Observer les changements en temps réel]
    E --> F[Fermer la modale ou passer en plein écran]

    

Aperçu ancré et modes de prévisualisation

Exemple — Maison Verte SARL Le comptable de Maison Verte souhaite ajuster le format de facture tout en voyant immédiatement l'impact de ses modifications. Il active le mode Aperçu ancré et bascule entre les modes Flux (rafraîchissement automatique) et Pages (rendu fidèle avec sauts de page) pour valider le résultat avant impression.

Le constructeur propose un aperçu ancré qui s'affiche à côté du canevas d'édition, permettant de visualiser les modifications en temps réel sans quitter l'éditeur.

Fonctionnalités clés de l'aperçu ancré :

• Positionnement : L'aperçu s'affiche dans une barre latérale à droite du canevas, partageant l'espace avec l'inspecteur. La taille de la barre est ajustable et mémorisée entre les sessions.
• Modes de prévisualisation :
  • Flux : Rafraîchissement automatique (avec un délai de 1 seconde) après chaque modification. Idéal pour les ajustements rapides.
  • Pages : Rendu fidèle via Chromium pour visualiser les sauts de page exacts. Utilise la fonction download_builder_preview_pdf pour générer un PDF à partir du format non enregistré.
• Navigation : L'aperçu s'adapte automatiquement à la taille de la barre latérale et utilise un seul ascenseur pour le contenu.

Comment activer l'aperçu ancré :

1. Ouvrez un Format d'impression et activez le mode constructeur.
2. Cliquez sur l'icône Aperçu (👁️) dans la barre d'en-tête du constructeur.
3. Ajustez la taille de la barre latérale en faisant glisser la bordure gauche.
4. Basculez entre les modes Flux et Pages via les onglets en haut de l'aperçu.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Cliquer sur l'icône Aperçu]
    B --> C[Ajuster la taille de la barre latérale]
    C --> D[Basculer entre Flux/Pages]
    D --> E[Modifier le format et observer le résultat]

    

Paramètres d'impression dans une fenêtre modale

Exemple — Bureau Moderne Le responsable des achats de Bureau Moderne souhaite ajuster les paramètres d'impression pour un format de bon de commande spécifique. Il clique sur l'icône Paramètres d'impression (⚙️) dans la barre d'en-tête du constructeur et modifie les options sans quitter l'éditeur.

Les paramètres d'impression sont désormais accessibles via une fenêtre modale directement depuis le constructeur, évitant de naviguer vers un autre formulaire et de perdre les modifications non enregistrées.

Fonctionnalités clés :

• Accès rapide : L'icône Paramètres d'impression (⚙️) est disponible dans la barre d'en-tête du constructeur, à côté du menu ⋯.
• Dialogue intégré : Les paramètres s'ouvrent dans une fenêtre modale construite dynamiquement à partir des métadonnées du doctype Print Settings.
• Sauvegarde contextuelle : Les modifications sont appliquées immédiatement au format en cours d'édition.

Paramètres disponibles :

• Moteur PDF : Choix entre Chrome (par défaut) et WKHTMLTOPDF.
• Répéter l'en-tête et le pied de page : Active la répétition sur toutes les pages (nécessite Chrome).
• Orientation : Paysage ou portrait.
• Taille de page : A4, Letter, etc.

Comment accéder aux paramètres d'impression :

1. Ouvrez un Format d'impression en mode constructeur.
2. Cliquez sur l'icône Paramètres d'impression (⚙️) dans la barre d'en-tête.
3. Modifiez les paramètres souhaités dans la fenêtre modale.
4. Cliquez sur Enregistrer pour appliquer les changements.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Cliquer sur l'icône Paramètres]
    B --> C[Modifier les paramètres dans la modale]
    C --> D[Enregistrer les changements]
    D --> E[Prévisualiser le résultat]

    

Option de deux-points après les étiquettes déplacée vers le format d'impression

Exemple — Maison Verte SARL Maison Verte utilise deux formats de facture : un pour les clients français (avec deux-points après les étiquettes) et un pour les clients internationaux (sans deux-points). Depuis cette mise à jour, elle configure cette option directement dans chaque format d'impression, sans affecter les autres formats.

L'option Afficher un deux-points après les étiquettes a été déplacée des Paramètres d'impression (globaux) vers le Format d'impression (par format), permettant une personnalisation plus fine.

Fonctionnalités clés :

• Portée par format : Chaque format d'impression peut désormais définir si les étiquettes doivent afficher un deux-points.
• Prise en compte immédiate : Le canevas du constructeur et le rendu PDF respectent cette option.
• Migration automatique : Lors de la mise à jour, la valeur globale des Paramètres d'impression est copiée dans chaque format existant (nécessite l'exécution du script de migration).

Comment configurer l'option :

1. Ouvrez un Format d'impression en mode constructeur.
2. Dans la barre latérale, ouvrez l'onglet Format.
3. Activez ou désactivez l'option Afficher deux-points après les étiquettes.
4. Prévisualisez et enregistrez le format.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Onglet Format]
    B --> C[Configurer l'option Deux-points]
    C --> D[Prévisualiser]
    D --> E[Enregistrer]

    

Rayon de bordure pour les sections

Exemple — Bureau Moderne Bureau Moderne souhaite moderniser l'apparence de ses bons de commande en arrondissant les coins des sections. Depuis le constructeur, il ajuste le rayon de bordure de chaque section à 8 pixels et prévisualise immédiatement le résultat.

Les sections du constructeur supportent désormais un rayon de bordure, permettant d'arrondir les coins des boîtes pour un rendu plus moderne.

Fonctionnalités clés :

• Contrôle visuel : Le rayon de bordure est configurable via un sélecteur dans l'onglet Style du panneau latéral.
• Prévisualisation en temps réel : Les modifications sont visibles immédiatement dans le canevas et l'aperçu.
• Compatibilité : Fonctionne avec tous les moteurs de rendu.

Comment configurer le rayon de bordure :

1. Sélectionnez une section dans le canevas.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Style.
3. Utilisez le contrôle Rayon de bordure pour définir une valeur en pixels (0 pour des coins carrés).
4. Prévisualiser le résultat et ajustez si nécessaire.

      
flowchart TD
    A[Sélectionner une section] --> B[Onglet Style]
    B --> C[Définir le rayon de bordure]
    C --> D[Prévisualiser]
    D --> E[Enregistrer]

    

Nouveaux blocs Image et Code-barres

Exemple — Maison Verte SARL Maison Verte SARL souhaite ajouter son logo et un QR code contenant le lien vers sa facture en ligne sur ses impressions. Depuis le constructeur, elle ajoute un bloc Image pour le logo et un bloc Code-barres configuré avec le champ name et le format QR. Les deux éléments sont désormais intégrés à toutes ses factures PDF.

Le constructeur propose désormais deux nouveaux blocs pour enrichir vos documents :

• Bloc Image : insérez une image statique (logo, signature, illustration) dans vos impressions. Vous pouvez téléverser une image depuis votre ordinateur et ajuster sa largeur.
• Bloc Code-barres : générez un code-barres ou un QR code à partir d'un champ du document ou d'un texte statique. Les formats supportés incluent CODE128, EAN-13, UPC-A et QR.

Comment les utiliser :

1. Ouvrez un Format d'impression et activez le mode constructeur.
2. Dans la palette de blocs à gauche, sélectionnez Image ou Code-barres et faites-le glisser dans la section souhaitée.
3. Cliquez sur le bloc dans le canevas pour configurer ses propriétés dans le panneau latéral Inspecteur.
4. Pour le bloc Image : téléversez une image et ajustez sa largeur.
5. Pour le bloc Code-barres : choisissez une source (champ du document ou texte statique), sélectionnez un format et ajustez la largeur.
6. Prévisualisez le rendu et enregistrez le format.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Glisser-déposer le bloc Image/Code-barres]
    B --> C[Configurer les propriétés dans l'inspecteur]
    C --> D[Téléverser une image ou configurer la source du code-barres]
    D --> E[Ajuster la largeur]
    E --> F[Prévisualiser et enregistrer]

    

Personnalisation avancée des couleurs

Exemple — Maison Verte SARL Maison Verte SARL souhaite que les étiquettes des champs sur ses factures soient en bleu foncé et les valeurs en gris anthracite. Depuis le constructeur, elle sélectionne les couleurs directement via un sélecteur visuel et applique le style à l'ensemble du format — sans écrire de CSS.

Le constructeur permet désormais de personnaliser les couleurs des éléments clés de vos documents :

• Couleur des étiquettes : définissez une couleur par défaut pour toutes les étiquettes de champ.
• Couleur des valeurs : définissez une couleur par défaut pour toutes les valeurs de champ.
• Couleur de fond des sections : choisissez une couleur de fond pour chaque section du document.
• Couleurs des colonnes de répétiteur : personnalisez la couleur de fond et le style (muted, mono, secondary, primary) des colonnes dans les tableaux répétiteurs.

Comment configurer les couleurs :

1. Ouvrez un Format d'impression et activez le mode constructeur.
2. Dans la barre latérale, ouvrez l'onglet Format.
3. Utilisez les sélecteurs de couleur Couleur des étiquettes et Couleur des valeurs pour définir les couleurs par défaut.
4. Pour personnaliser une section, sélectionnez-la dans le canevas, puis utilisez le sélecteur Couleur de fond dans l'onglet Style du panneau latéral.
5. Pour personnaliser une colonne dans un répétiteur (ex. : tableau d'articles), sélectionnez la colonne, puis utilisez les contrôles Couleur de fond et Style de colonne dans l'onglet Style.
6. Prévisualisez le rendu pour valider les changements.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Onglet Format]
    B --> C[Définir couleur étiquettes/valeurs]
    A --> D[Sélectionner une section]
    D --> E[Onglet Style]
    E --> F[Définir couleur de fond]
    A --> G[Sélectionner une colonne de répétiteur]
    G --> H[Onglet Style]
    H --> I[Définir couleur/style de colonne]
    C --> J[Prévisualiser]
    F --> J
    I --> J

    

Styles avancés pour les tableaux

Exemple — Maison Verte SARL Maison Verte SARL souhaite que ses factures imprimées présentent un tableau des articles avec des bordures visibles, un espacement entre les cellules et des en-têtes de colonne personnalisés. Depuis le constructeur, elle active le mode "Disposition tableau", ajuste le rembourrage des cellules, définit un rayon de bordure et choisit un style d'en-tête "Coloré" — le tout sans écrire de CSS.

Le constructeur permet de personnaliser finement l'apparence des tableaux :

• Rembourrage des cellules : ajustez l'espacement interne des cellules.
• Rayon de bordure : arrondissez les coins des tableaux.
• Style des en-têtes de colonne : choisissez entre trois styles (Coloré, Simple, Aucun).
• Libellés des colonnes : modifiez directement le texte des en-têtes.
• Disposition en grille : activez le mode "Disposition tableau" pour des bordures visibles.
• Largeur des colonnes : définissez une largeur personnalisée pour chaque colonne.
• Bordures des tableaux : choisissez entre bordures complètes, horizontales ou verticales.

Comment configurer les styles de tableau :

1. Sélectionnez une section contenant un tableau ou un champ de type tableau.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Style.
3. Utilisez les contrôles suivants :
   • Rembourrage des cellules : ajustez la valeur en pixels.
   • Rayon de bordure : définissez un rayon pour arrondir les coins.
   • Style d'en-tête : choisissez entre "Coloré", "Simple" ou "Aucun".
   • Disposition tableau : activez cette option pour appliquer un style de grille.
   • Bordures : choisissez entre "Toutes", "Lignes" ou "Colonnes".
   • Largeur des colonnes : définissez une largeur pour chaque colonne.
4. Pour modifier le libellé d'une colonne, cliquez directement sur l'en-tête dans le canevas.
5. Prévisualisez le rendu pour valider les changements.

      
flowchart TD
    A[Sélectionner une section tableau] --> B[Ouvrir l'onglet Style]
    B --> C{Rembourrage des cellules}
    B --> D{Rayon de bordure}
    B --> E{Style d'en-tête}
    B --> F{Disposition tableau}
    B --> G{Bordures}
    B --> H[Modifier les libellés de colonne]
    B --> I{Largeur des colonnes}
    C --> J[Prévisualiser]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

    

Personnalisation des marges des sections

Exemple — Maison Verte SARL Maison Verte SARL souhaite ajouter un espacement uniforme autour de l'en-tête de ses factures. Depuis le constructeur, elle ajuste les marges supérieure, inférieure, gauche et droite de la section d'en-tête à 15 pixels chacune, et prévisualise immédiatement le résultat.

Le constructeur permet de contrôler précisément les marges des sections :

Comment configurer les marges :

1. Sélectionnez une section dans le canevas.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Style.
3. Développez la section Espacement.
4. Utilisez les contrôles Marge pour définir les valeurs souhaitées pour chaque côté.
5. Prévisualisez le rendu pour valider les changements.

      
flowchart TD
    A[Sélectionner une section] --> B[Ouvrir l'onglet Style]
    B --> C[Développer la section Espacement]
    C --> D[Définir les marges haut/droite/bas/gauche]
    D --> E[Prévisualiser]

    

Visibilité conditionnelle des champs et sections

Exemple — Maison Verte SARL Maison Verte SARL souhaite masquer le champ "Remise spéciale" sur les factures dont le montant total est inférieur à 100 €. Grâce à la visibilité conditionnelle, elle configure une règle doc.total < 100 sur le champ, et celui-ci n'apparaît plus sur les impressions concernées.

Vous pouvez définir des règles de visibilité conditionnelle pour masquer dynamiquement des éléments :

Comment configurer la visibilité conditionnelle :

1. Sélectionnez un champ ou une section.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Visibilité.
3. Activez l'option Conditionnel.
4. Saisissez une expression JavaScript simple dans le champ Visible si (exemple : doc.statut === "Payé").
5. Testez le rendu en prévisualisant le format avec différents documents.

Exemples d'expressions utiles :

• doc.total > 1000 → Affiche le champ uniquement si le montant total dépasse 1000 €.
• doc.items.length > 5 → Affiche la section uniquement si le document contient plus de 5 articles.
• doc.custom_field === "VIP" → Affiche le champ uniquement pour les clients VIP.

Contrôle de l'espacement entre étiquettes et valeurs

Exemple — Bureau Moderne Bureau Moderne souhaite réduire l'espacement entre les étiquettes et les valeurs sur ses bons de commande. Depuis le constructeur, il ajuste l'espacement à 5 pixels et enregistre le format — le changement est immédiat.

Pour les champs en orientation Étiquette à gauche / Valeur à droite, vous pouvez contrôler l'espacement horizontal :

1. Sélectionnez un champ en orientation Gauche-Droite.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Disposition.
3. Utilisez le sélecteur Espacement étiquette-valeur pour choisir une valeur.

Affichage du titre des répétiteurs

Exemple — Bureau Moderne Bureau Moderne souhaite masquer le titre "Articles" au-dessus du tableau des articles sur ses bons de commande. Depuis le constructeur, il désactive l'option Afficher le titre et enregistre le format — le titre disparaît immédiatement.

Vous pouvez contrôler l'affichage du titre des sections répétiteurs :

1. Sélectionnez une section de type répétiteur.
2. Dans le panneau latéral Inspecteur, ouvrez l'onglet Disposition.
3. Utilisez l'option Afficher le titre pour activer ou désactiver l'affichage.
4. Si le titre est affiché, ajustez l'Espacement du titre pour contrôler l'espace entre le titre et le tableau.

Styles personnalisés, sélecteur de police et masquage des titres

Exemple — Maison Verte SARL Maison Verte souhaite appliquer un style personnalisé à la section "Total" (fond gris clair, texte en gras), utiliser la police "Roboto", et masquer le titre "Articles". Depuis le constructeur, elle configure ces options en quelques clics :

1. Sélectionne la section "Total" et saisit background: #f5f5f5; font-weight: bold; dans Style personnalisé.
2. Ouvre l'onglet Format et choisit "Roboto" dans le sélecteur Police.
3. Sélectionne la section répétiteur et désactive Afficher le titre.

Le constructeur intègre trois fonctionnalités majeures :

• Styles personnalisés : appliquez des règles CSS brutes aux sections, champs, tableaux et répétiteurs.
• Sélecteur de police : choisissez une police pour l'ensemble du document ou pour un élément spécifique.
• Masquage des titres : contrôlez l'affichage des titres des sections répétiteurs.

Comment utiliser ces fonctionnalités :

1. Styles personnalisés :
   • Sélectionnez un élément.
   • Dans l'onglet Style, développez Style personnalisé.
   • Saisissez vos règles CSS.
2. Sélecteur de police :
   • Sélectionnez un élément ou ouvrez l'onglet Format pour une application globale.
   • Dans l'onglet Style, cliquez sur le sélecteur Police.
   • Recherchez ou sélectionnez une police.
3. Masquage des titres :
   • Sélectionnez une section répétiteur.
   • Dans l'onglet Disposition, désactivez Afficher le titre.

      
flowchart TD
    A[Sélectionner un élément] --> B[Onglet Style]
    B --> C[Style personnalisé]
    B --> D[Sélecteur de police]
    A --> E[Sélectionner une section répétiteur]
    E --> F[Onglet Disposition]
    F --> G[Désactiver Afficher le titre]
    C --> H[Prévisualiser et enregistrer]
    D --> H
    G --> H

    

Autres améliorations UX

Le constructeur inclut plusieurs améliorations ergonomiques :

• Nom du format dans la barre de titre : affiché en permanence pour faciliter la navigation.
• Alignement des champs : appliqué à l'ensemble étiquette + valeur.
• Champs masqués grisés : affichés en grisé dans le constructeur pour faciliter l'édition.
• Persistance des règles de visibilité : sauvegardées et restaurées lors de l'édition.
• Actions des sections : regroupées dans une pastille en haut à droite.
• Onglets latéraux simplifiés : affichent uniquement du texte pour une meilleure lisibilité.
• Sections réduites par défaut : les sections Arrière-plan et Espacement sont réduites.
• Raccourcis clavier : Ctrl+Z (annuler) et Ctrl+Y (refaire) disponibles.

Fonctionnalités clés du constructeur moderne

Répétition de l'en-tête et du pied de page

Exemple — Maison Verte SARL Maison Verte souhaite que son en-tête de lettre (logo + adresse) apparaisse sur chaque page de ses factures PDF. Depuis les Paramètres d'impression, elle active l'option Répéter l'en-tête et le pied de page sur toutes les pages, et le rendu PDF affiche désormais l'en-tête sur chaque page.

Le constructeur moderne permet de répéter l'en-tête et le pied de page sur toutes les pages d'un document PDF, garantissant une cohérence visuelle sur les documents multi-pages.

Fonctionnalités clés :

• Activation simple : L'option est disponible dans les Paramètres d'impression (accessibles via le menu de recherche ou depuis le constructeur).
• Compatibilité : Fonctionne uniquement avec le moteur PDF Chrome (par défaut).
• Personnalisation : Les sections En-tête et Pied de page du constructeur sont automatiquement répétées.

Comment activer la répétition :

1. Accédez aux Paramètres d'impression via le menu de recherche (Ctrl+K).
2. Activez l'option Répéter l'en-tête et le pied de page sur toutes les pages.
3. Enregistrez les paramètres.
4. Ouvrez un Format d'impression et ajoutez les éléments souhaités dans les sections En-tête et Pied de page.
5. Générez un PDF pour valider le rendu.

      
flowchart TD
    A[Accéder aux Paramètres d'impression] --> B[Activer l'option Répéter]
    B --> C[Enregistrer les paramètres]
    C --> D[Personnaliser l'en-tête/pied de page]
    D --> E[Générer un PDF]

    

Constructeur moderne vs constructeur classique

Depuis la version 16 de Dokos, le constructeur moderne est le seul éditeur disponible pour créer et modifier des formats d'impression. Le constructeur classique a été définitivement retiré.

Exemples d'utilisation

Créer un format de facture personnalisé

Scénario — Maison Verte SARL Maison Verte souhaite créer un format de facture personnalisé avec son logo, les coordonnées du client à gauche, les articles au centre et le total à droite. Elle utilise le constructeur pour glisser-déposer les champs, ajuster les couleurs et prévisualiser le résultat avant impression.

Étapes suivies par Maison Verte :

1. Créer un nouveau format d'impression :
   • Accédez à la liste des Formats d'impression via le menu de recherche (Ctrl+K).
   • Cliquez sur Nouveau.
   • Saisissez un nom (ex. : "Facture Maison Verte").
   • Sélectionnez le doctype Facture de vente.
   • Activez l'option Utiliser le constructeur.
   • Enregistrez le format.
2. Ajouter les sections principales :
   • Dans le constructeur, cliquez sur Ajouter une section et choisissez En-tête.
   • Ajoutez une section Corps pour les détails du client et des articles.
   • Ajoutez une section Pied de page pour le total et les mentions légales.
3. Personnaliser l'en-tête :
   • Dans la section En-tête, ajoutez un bloc Image et téléversez le logo de l'entreprise.
   • Ajoutez un bloc Texte pour le nom de l'entreprise et ses coordonnées.
   • Ajustez la taille et l'alignement des éléments.
4. Configurer les détails du client :
   • Dans la section Corps, ajoutez les champs Nom du client, Adresse, Numéro de facture et Date.
   • Utilisez l'orientation Gauche-Droite pour aligner les étiquettes et les valeurs.
   • Ajustez l'espacement entre les champs.
5. Ajouter le tableau des articles :
   • Ajoutez une section Répétiteur pour les articles.
   • Sélectionnez le champ items comme source.
   • Personnalisez les colonnes (ex. : Nom de l'article, Quantité, Prix unitaire, Montant).
   • Activez le mode Disposition tableau pour des bordures visibles.
   • Ajustez le style des en-têtes de colonne (ex. : "Coloré").
6. Configurer le total :
   • Dans la section Pied de page, ajoutez les champs Total net, Montant de la taxe et Total général.
   • Utilisez le sélecteur de couleur pour mettre en valeur le Total général (ex. : texte en gras, couleur rouge).
   • Ajoutez un bloc Texte pour les mentions légales (ex. : "TVA applicable selon l'article 293B du CGI").
7. Prévisualiser et enregistrer :
   • Cliquez sur l'icône Aperçu (👁️) pour ouvrir la modale et valider le rendu.
   • Basculez entre les modes Flux et Pages pour vérifier les sauts de page.
   • Enregistrez le format avec Ctrl+S.
8. Imprimer une facture :
   • Ouvrez une Facture de vente.
   • Cliquez sur Imprimer et sélectionnez le format "Facture Maison Verte".
   • Générez un PDF ou imprimez directement.

      
flowchart TD
    A[Créer un nouveau format] --> B[Ajouter des sections]
    B --> C[Personnaliser l'en-tête]
    C --> D[Configurer les détails client]
    D --> E[Ajouter le tableau des articles]
    E --> F[Configurer le total]
    F --> G[Prévisualiser]
    G --> H[Enregistrer et utiliser]

    

Personnaliser un format existant

Scénario — Bureau Moderne Bureau Moderne utilise le format standard "Modern" pour ses devis, mais souhaite ajouter un QR code contenant le lien vers le devis en ligne. Il duplique le format, ajoute un bloc Code-barres et enregistre les modifications.

Étapes suivies par Bureau Moderne :

1. Dupliquer le format existant :
   • Accédez à la liste des Formats d'impression.
   • Sélectionnez le format "Modern" pour le doctype Devis.
   • Cliquez sur Dupliquer et renommez-le (ex. : "Modern avec QR").
2. Ouvrir le constructeur :
   • Ouvrez le format dupliqué.
   • Cliquez sur Modifier pour activer le constructeur.
3. Ajouter un QR code :
   • Dans la section Pied de page, ajoutez un bloc Code-barres.
   • Configurez la source avec le champ name (numéro du devis).
   • Sélectionnez le format QR.
   • Ajustez la largeur du QR code.
4. Ajouter une légende :
   • Ajoutez un bloc Texte sous le QR code avec le texte "Scannez pour accéder au devis en ligne".
   • Ajustez la taille et l'alignement du texte.
5. Prévisualiser et enregistrer :
   • Cliquez sur l'icône Aperçu (👁️) pour valider le rendu.
   • Enregistrez le format avec Ctrl+S.
6. Utiliser le nouveau format :
   • Ouvrez un Devis.
   • Cliquez sur Imprimer et sélectionnez le format "Modern avec QR".
   • Générez un PDF et envoyez-le au client.

      
flowchart TD
    A[Dupliquer le format] --> B[Ouvrir le constructeur]
    B --> C[Ajouter un QR code]
    C --> D[Ajouter une légende]
    D --> E[Prévisualiser]
    E --> F[Enregistrer et utiliser]

    

Résoudre les problèmes courants

L'aperçu ne s'affiche pas

Symptôme : Après avoir cliqué sur l'icône Aperçu (👁️), la modale ne s'ouvre pas ou reste vide.

Solutions possibles :

1. Vérifiez le mode de prévisualisation :
   • Assurez-vous que le mode Flux ou Pages est sélectionné dans la modale.
   • Si le mode Pages est lent, basculez vers le mode Flux pour un rafraîchissement plus rapide.
2. Actualisez la page :
   • Rechargez la page du navigateur (F5) pour réinitialiser le constructeur.
3. Vérifiez les erreurs JavaScript :
   • Ouvrez les outils de développement du navigateur (F12).
   • Consultez l'onglet Console pour identifier d'éventuelles erreurs.
   • Si une erreur est liée à un champ personnalisé, vérifiez que le champ existe bien dans le doctype.
4. Testez avec un autre navigateur :
   • Essayez d'ouvrir le constructeur dans un autre navigateur (ex. : Chrome, Firefox, Edge).
5. Vérifiez les permissions :
   • Assurez-vous que votre rôle dispose des permissions nécessaires pour accéder au doctype Format d'impression et au constructeur.

Les modifications ne sont pas visibles dans l'aperçu

Symptôme : Les changements apportés dans le constructeur ne sont pas reflétés dans l'aperçu.

Solutions possibles :

1. Attendez le rafraîchissement automatique :
   • En mode Flux, l'aperçu se rafraîchit automatiquement après 1 seconde. Attendez quelques instants pour voir les changements.
2. Forcez le rafraîchissement :
   • Cliquez sur l'icône Rafraîchir (🔄) dans la modale d'aperçu pour forcer la mise à jour.
3. Vérifiez les règles de visibilité :
   • Si un champ ou une section ne s'affiche pas, vérifiez qu'il n'est pas masqué par une règle de visibilité conditionnelle.
   • Sélectionnez l'élément et consultez l'onglet Visibilité dans l'inspecteur.
4. Testez avec un autre document :
   • Ouvrez un autre document du même doctype et prévisualisez le format pour vérifier si le problème persiste.
5. Vérifiez les styles personnalisés :
   • Si un élément est masqué par un style personnalisé (ex. : display: none;), modifiez ou supprimez la règle CSS dans l'onglet Style.

Le PDF généré ne correspond pas à l'aperçu

Symptôme : Le rendu PDF diffère de l'aperçu dans le constructeur (ex. : sauts de page incorrects, éléments manquants).

Solutions possibles :

1. Utilisez le mode Pages :
   • Basculez vers le mode Pages dans la modale d'aperçu pour un rendu plus fidèle au PDF.
   • Ce mode utilise Chromium pour générer un aperçu identique au PDF final.
2. Vérifiez le moteur PDF :
   • Accédez aux Paramètres d'impression et assurez-vous que le moteur Chrome est sélectionné.
   • Si vous utilisez WKHTMLTOPDF, certains styles avancés (ex. : ombres, dégradés) peuvent ne pas être pris en charge.
3. Ajustez les sauts de page :
   • Si un saut de page coupe un tableau ou une section, ajoutez une règle CSS page-break-inside: avoid; dans le Style personnalisé de l'élément.
4. Vérifiez les polices :
   • Si le texte du PDF utilise une police différente de l'aperçu, assurez-vous que la police sélectionnée est disponible sur le serveur.
   • Utilisez des polices standard (ex. : Arial, Times New Roman) pour une compatibilité maximale.
5. Testez avec un autre format :
   • Générez un PDF avec un format standard (ex. : "Standard") pour vérifier si le problème est lié au format personnalisé.

Les champs personnalisés ne s'affichent pas

Symptôme : Les champs personnalisés ajoutés à un doctype n'apparaissent pas dans la liste des champs disponibles dans le constructeur.

Solutions possibles :

1. Actualisez les métadonnées :
   • Accédez au menu de recherche (Ctrl+K) et saisissez "Actualiser les métadonnées".
   • Exécutez la commande pour recharger les métadonnées des doctypes.
2. Vérifiez les permissions :
   • Assurez-vous que votre rôle dispose des permissions nécessaires pour accéder aux champs personnalisés.
   • Accédez à Utilisateurs et permissions > Rôles et vérifiez les permissions pour le doctype concerné.
3. Redémarrez le serveur :
   • Si les champs personnalisés ont été ajoutés récemment, redémarrez le serveur Dokos pour prendre en compte les changements.
   • Exécutez la commande bench restart depuis le terminal.
4. Vérifiez le doctype :
   • Assurez-vous que le champ personnalisé est bien associé au doctype du format d'impression.
   • Ouvrez le doctype dans Développement > Doctype et vérifiez que le champ est présent.
5. Testez avec un autre format :
   • Créez un nouveau format d'impression pour le même doctype et vérifiez si le champ personnalisé apparaît.

Bonnes pratiques

Organiser les sections

Pour des documents clairs et professionnels, structurez vos formats d'impression avec des sections logiques :

• En-tête : Logo, nom de l'entreprise, coordonnées, numéro et date du document.
• Corps : Détails du client, objet du document, tableau des articles ou services.
• Pied de page : Total, mentions légales, conditions de paiement, QR code ou signature.

Exemple de structure pour une facture :

[En-tête]
- Logo (bloc Image)
- Nom de l'entreprise (bloc Texte)
- Adresse, téléphone, email (bloc Texte)
- Numéro de facture (champ)
- Date (champ)

[Corps]
- Nom du client (champ)
- Adresse du client (champ)
- Tableau des articles (section Répétiteur)
  - Nom de l'article (colonne)
  - Quantité (colonne)
  - Prix unitaire (colonne)
  - Montant (colonne)

[Pied de page]
- Total net (champ)
- Montant de la taxe (champ)
- Total général (champ)
- Mentions légales (bloc Texte)
- QR code (bloc Code-barres)

Optimiser les sauts de page

Pour éviter que les tableaux ou les sections ne soient coupés en bas de page :

1. Utilisez le mode Pages : Vérifiez le rendu avec le mode Pages pour identifier les sauts de page problématiques.
2. Ajustez les marges : Augmentez les marges inférieure et supérieure des sections pour forcer un saut de page avant.
3. Utilisez des règles CSS : Ajoutez page-break-inside: avoid; dans le Style personnalisé des sections ou tableaux critiques.
4. Réduisez la taille des tableaux : Si un tableau est trop long, divisez-le en plusieurs sections ou réduisez la taille de la police.

Personnaliser les couleurs et polices

Pour un rendu professionnel et cohérent avec votre charte graphique :

1. Définissez une palette de couleurs :
   • Utilisez le sélecteur de couleur dans l'onglet Format pour définir des couleurs par défaut pour les étiquettes et les valeurs.
   • Appliquez des couleurs de fond aux sections pour les mettre en valeur (ex. : en-tête en bleu, total en gris clair).
2. Choisissez une police adaptée :
   • Sélectionnez une police lisible pour les documents imprimés (ex. : Arial, Helvetica, Roboto).
   • Évitez les polices fantaisistes ou trop fines pour les petits textes.
   • Utilisez le sélecteur de police dans l'onglet Format pour une application globale.
3. Utilisez des styles cohérents :
   • Appliquez les mêmes styles (couleurs, polices, tailles) à tous vos formats d'impression pour une identité visuelle uniforme.
   • Créez un format "Modèle" avec vos styles par défaut et dupliquez-le pour créer de nouveaux formats.

Utiliser les blocs Image et Code-barres

Pour enrichir vos documents :

1. Bloc Image :
   • Utilisez des images au format SVG ou PNG avec fond transparent pour un rendu optimal.
   • Ajustez la largeur de l'image pour qu'elle s'intègre harmonieusement dans le document.
   • Placez le logo de l'entreprise dans l'en-tête et les signatures dans le pied de page.
2. Bloc Code-barres :
   • Utilisez des QR codes pour les liens vers les documents en ligne (ex. : facture, devis).
   • Configurez la source avec un champ unique (ex. : name, numero_de_facture).
   • Pour les codes-barres linéaires (ex. : CODE128), utilisez des champs numériques ou alphanumériques courts.
   • Testez le rendu avec différents lecteurs de codes-barres pour garantir la lisibilité.

Automatiser avec les règles de visibilité

Pour des documents dynamiques et adaptés au contexte :

1. Masquer les champs vides :
   • Utilisez des règles comme doc.champ !== "" pour masquer les champs vides.
2. Adapter le contenu au statut :
   • Affichez des mentions spécifiques en fonction du statut du document (ex. : doc.statut === "Payé").
3. Personnaliser pour les clients :
   • Affichez des informations supplémentaires pour certains clients (ex. : doc.client === "Maison Verte SARL").
4. Gérer les devises :
   • Affichez les montants dans la devise du client (ex. : doc.devise === "EUR").

Exemple de règles utiles :

• doc.total > 1000 → Affiche une mention "Remise spéciale appliquée" pour les gros montants.
• doc.items.length > 10 → Affiche un tableau récapitulatif pour les commandes avec de nombreux articles.
• doc.statut === "Annulé" → Affiche un filigrane "ANNULÉ" en arrière-plan.

Références

Raccourcis clavier

Icônes du constructeur

Champs disponibles pour les codes-barres

Formats de codes-barres supportés

Polices disponibles

Le constructeur propose une sélection de polices standard pour garantir une compatibilité maximale avec les moteurs de rendu PDF :

• Arial
• Courier New
• Georgia
• Times New Roman
• Verdana
• Helvetica
• Roboto
• DejaVu Sans
• Noto Sans
• Open Sans

Pour utiliser une police personnalisée, contactez votre administrateur système pour l'installer sur le serveur Dokos.

Glossaire