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

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é.

Prévisualisation en temps réel des modifications non sauvegardées

Exemple — Maison Verte SARL Le comptable de Maison Verte SARL modifie le format d'impression de ses factures pour ajouter un champ personnalisé "Conditions de paiement". Il ajuste la position du champ dans le constructeur et voit immédiatement le résultat dans la prévisualisation, sans avoir besoin d'enregistrer le format. Une fois satisfait du rendu, il enregistre ses modifications en un clic.

Le constructeur de format d'impression propose désormais une prévisualisation en temps réel des modifications non sauvegardées. Cette fonctionnalité permet de voir le rendu final de votre document avant même de l'enregistrer, éliminant ainsi les allers-retours entre édition et prévisualisation.

Fonctionnement :

• Toutes les modifications apportées au format (ajout/suppression de champs, ajustement des styles, réorganisation des sections) sont immédiatement reflétées dans la prévisualisation.
• La prévisualisation utilise le même moteur de rendu que l'impression finale, garantissant une parfaite cohérence entre ce que vous voyez et ce que vous imprimez.
• Les valeurs des champs sont récupérées directement depuis le serveur via l'endpoint get_formatted, assurant que les données affichées (montants formatés, liens, valeurs de champs enfants) sont identiques à celles du document imprimé.

Comment l'utiliser :

1. Ouvrez un Format d'impression et activez le mode constructeur.
2. Effectuez vos modifications dans le canevas ou via le panneau latéral Inspecteur.
3. Observez le rendu en temps réel dans la zone de prévisualisation à droite.
4. Une fois satisfait du résultat, cliquez sur Enregistrer pour sauvegarder vos modifications.

      
flowchart TD
    A[Modifier le format dans le constructeur] --> B[Voir les changements en temps réel dans la prévisualisation]
    B --> C{Le rendu est-il satisfaisant ?}
    C -->|Non| A
    C -->|Oui| D[Enregistrer le format]

    

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 l'en-tête s'affiche désormais sur chaque page du PDF généré.

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, que ce soit via le navigateur ou lors de la génération d'un PDF téléchargeable.

Comment activer la répétition :

1. Allez dans Paramètres > Paramètres d'impression.
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.

Affichage des deux-points après les étiquettes

Exemple — Bureau Moderne Bureau Moderne souhaite que ses étiquettes de champ affichent un deux-points après le libellé (ex. : "Montant total : 100 €"). Depuis les Paramètres d'impression, il active l'option Afficher un deux-points après les étiquettes, et le changement s'applique immédiatement à tous les formats d'impression.

Vous pouvez configurer l'affichage d'un deux-points après chaque étiquette de champ :

1. Allez dans Paramètres > Paramètres d'impression.
2. Activez l'option Afficher un deux-points après les étiquettes.
3. Enregistrez les paramètres.

Bannière "BROUILLON" ou "ANNULÉ" sur les documents

Exemple — Tribu SCOP Tribu SCOP souhaite que ses devis en statut "Brouillon" affichent clairement ce statut sur les impressions. Avec le constructeur moderne, une bannière "BROUILLON" apparaît automatiquement en haut de chaque page du PDF lorsque le document n'est pas soumis.

Le constructeur moderne affiche automatiquement une bannière BROUILLON ou ANNULÉ en haut des documents imprimés lorsque le document est dans l'un de ces statuts. Cette bannière est visible dans l'aperçu et sur le PDF généré.

Fonctionnement :

• BROUILLON : affichée si le document est en statut "Brouillon" (docstatus = 0).
• ANNULÉ : affichée si le document est en statut "Annulé" (docstatus = 2).

Pruning des colonnes vides dans les tableaux

Exemple — Maison Verte SARL Maison Verte utilise un modèle de facture avec plusieurs colonnes optionnelles (ex. : "Remise", "Numéro de lot"). Avec le constructeur moderne, les colonnes vides n'apparaissent plus sur les impressions, ce qui rend le tableau plus lisible et compact.

Le constructeur moderne supprime automatiquement les colonnes vides dans les tableaux répétiteurs (ex. : tableau des articles) lors de la génération du PDF. Une colonne est considérée comme vide si toutes ses cellules sont vides pour toutes les lignes du tableau.

Fonctionnement :

• Les colonnes vides sont identifiées lors de la génération du PDF.
• Elles sont supprimées du rendu final.
• Les en-têtes de colonne correspondants sont également masqués.

Migration des formats classiques vers le constructeur moderne

Processus de migration

Lors de la mise à jour vers Dokos v16, tous les formats d'impression créés avec le constructeur classique sont automatiquement migrés vers le constructeur moderne. Ce processus :

1. Conserve l'intégralité du format original dans le champ classic_format_data du format d'impression.
2. Convertit la structure classique en une structure compatible avec le constructeur moderne.
3. Préserve les permissions : les champs restreints par niveau de permission restent masqués pour les utilisateurs sans accès.
4. Est réversible : en cas de problème, vous pouvez restaurer le format original depuis le champ classic_format_data.

Vérification post-migration

Après la migration, il est recommandé de vérifier que vos formats d'impression s'affichent correctement :

1. Ouvrez un Format d'impression migré.
2. Cliquez sur Aperçu pour générer un PDF.
3. Vérifiez que :
   • Tous les champs sont présents et correctement positionnés.
   • Les styles (couleurs, polices) sont conservés.
   • Les tableaux et répétiteurs s'affichent correctement.
   • Les en-têtes et pieds de page sont répétés si l'option est activée.

Si vous rencontrez des problèmes avec un format spécifique, vous pouvez :

1. Restaurer le format original :
   • Ouvrez le format d'impression concerné.
   • Copiez le contenu du champ classic_format_data dans le champ format_data.
   • Enregistrez le format.
2. Recréer le format manuellement :
   • Créez un nouveau format d'impression.
   • Utilisez le constructeur moderne pour reproduire la structure du format original.

Limitations connues

Certaines fonctionnalités du constructeur classique ne sont pas directement transposables dans le constructeur moderne :

• Scripts personnalisés : les scripts JavaScript intégrés dans les formats classiques ne sont pas migrés. Vous devrez les réimplémenter manuellement si nécessaire.
• Styles CSS complexes : certains styles CSS avancés peuvent nécessiter des ajustements pour fonctionner avec le moteur Chrome.
• Macros HTML : les macros HTML personnalisées doivent être réécrites pour être compatibles avec le nouveau moteur de rendu.

Bonnes pratiques pour les formats d'impression modernes

Optimiser la mise en page pour le moteur Chrome

Le constructeur moderne utilise le moteur Chrome pour générer les PDF, ce qui offre une meilleure compatibilité avec les standards web modernes. Voici quelques bonnes pratiques pour optimiser vos formats :

1. Utilisez des unités relatives : privilégiez les unités em, rem ou % plutôt que px pour les tailles de police et les espacements.
2. Évitez les positions absolues : utilisez les outils de disposition du constructeur plutôt que des règles CSS position: absolute.
3. Testez avec différents documents : certains champs peuvent avoir des valeurs longues ou vides. Utilisez la visibilité conditionnelle pour gérer ces cas.
4. Prévisualisez régulièrement : utilisez le bouton Aperçu pour vérifier le rendu avant d'enregistrer.

Gérer les documents longs

Pour les documents qui s'étendent sur plusieurs pages :

1. Activez la répétition de l'en-tête dans les Paramètres d'impression pour que l'en-tête de lettre apparaisse sur chaque page.
2. Utilisez des sauts de page intelligents : placez des sauts de page avant les sections importantes pour éviter les coupures malencontreuses.
3. Optimisez l'espace : utilisez l'option Masquer le titre pour les répétiteurs afin de gagner de la place.
4. Testez avec des données réelles : générez un aperçu avec un document contenant de nombreux articles pour vérifier le comportement.

Personnalisation avancée

Pour aller plus loin dans la personnalisation :

1. Utilisez les styles personnalisés pour appliquer des règles CSS spécifiques à certaines sections ou champs.
2. Choisissez une police adaptée : utilisez le sélecteur de police pour sélectionner une police qui correspond à votre charte graphique.
3. Personnalisez les couleurs : utilisez les sélecteurs de couleur pour appliquer votre palette de couleurs aux étiquettes, valeurs et sections.
4. Ajoutez des images et codes-barres : utilisez les blocs Image et Code-barres pour enrichir vos documents.

Résolution des problèmes courants

Problèmes de mise en page

Symptôme : Les éléments ne s'affichent pas comme prévu dans le PDF.

Solutions possibles :

1. Vérifiez le moteur PDF : assurez-vous que le moteur Chrome est sélectionné dans les Paramètres d'impression ou sur le format d'impression.
2. Simplifiez la structure : réduisez le nombre de sections imbriquées ou de styles personnalisés.
3. Testez dans le navigateur : utilisez l'aperçu dans le navigateur pour identifier si le problème vient du rendu HTML ou de la génération PDF.
4. Vérifiez les marges : ajustez les marges des sections pour éviter les débordements.

Problèmes de prévisualisation en temps réel

Symptôme : La prévisualisation ne reflète pas les modifications ou affiche des erreurs.

Solutions possibles :

1. Vérifiez la connexion au serveur : assurez-vous que le serveur Dokos est accessible et que l'endpoint get_formatted fonctionne correctement.
2. Actualisez la page : rechargez la page pour réinitialiser le constructeur.
3. Vérifiez les permissions : assurez-vous que vous avez accès à tous les champs utilisés dans le format.
4. Consultez la console du navigateur : ouvrez les outils de développement (F12) pour identifier d'éventuelles erreurs JavaScript.

Problèmes de migration

Symptôme : Un format migré ne s'affiche pas correctement.

Solutions possibles :

1. Restaurez le format original depuis le champ classic_format_data et recréez-le manuellement.
2. Vérifiez les permissions : assurez-vous que tous les champs du format sont accessibles à l'utilisateur qui génère le PDF.
3. Contactez le support : si le problème persiste, contactez le support Dokos avec une capture d'écran de l'aperçu et du PDF généré.

Problèmes de performance

Symptôme : La génération du PDF est lente ou échoue.

Solutions possibles :

1. Réduisez la complexité : simplifiez le format en réduisant le nombre de sections ou de champs.
2. Optimisez les images : utilisez des images de petite taille et au format SVG lorsque possible.
3. Vérifiez les ressources serveur : assurez-vous que le serveur dispose de suffisamment de mémoire et de CPU pour exécuter Chromium.
4. Désactivez les fonctionnalités avancées : désactivez temporairement les styles personnalisés ou les codes-barres pour identifier la source du problème.

FAQ

Puis-je encore utiliser le constructeur classique ?

Non. Le constructeur classique a été définitivement retiré dans Dokos v16. Tous les formats d'impression doivent désormais être créés ou modifiés avec le constructeur moderne.

Comment migrer un format classique vers le constructeur moderne ?

La migration est automatique lors de la mise à jour vers Dokos v16. Si vous avez besoin de migrer un format manuellement :

1. Ouvrez le format d'impression concerné.
2. Activez le mode constructeur.
3. Le système vous proposera de migrer le format. Confirmez pour lancer la conversion.

Puis-je restaurer un format classique après migration ?

Oui. Le format original est conservé dans le champ classic_format_data du format d'impression. Pour le restaurer :

1. Ouvrez le format d'impression.
2. Copiez le contenu du champ classic_format_data dans le champ format_data.
3. Enregistrez le format.

Pourquoi mon PDF ne ressemble-t-il pas à l'aperçu dans le navigateur ?

Plusieurs raisons possibles :

• Le moteur PDF sélectionné n'est pas Chrome.
• Certains styles CSS ne sont pas supportés par le moteur de rendu.
• Les marges ou les sauts de page ne sont pas configurés correctement.

Pour résoudre ce problème :

1. Vérifiez que le moteur Chrome est sélectionné.
2. Simplifiez les styles CSS personnalisés.
3. Ajustez les marges et les sauts de page dans le constructeur.

Comment ajouter un logo ou un code-barres à mon format d'impression ?

Utilisez les nouveaux blocs Image et Code-barres dans le constructeur :

1. Ouvrez le format d'impression en mode constructeur.
2. Glissez-déposez un bloc Image ou Code-barres dans la section souhaitée.
3. Configurez le bloc dans le panneau latéral Inspecteur.
4. Prévisualisez et enregistrez le format.

Puis-je personnaliser l'apparence des tableaux ?

Oui. Le constructeur moderne offre plusieurs options pour personnaliser les tableaux :

• Rembourrage des cellules : ajustez l'espacement interne.
• Rayon de bordure : arrondissez les coins.
• Style d'en-tête : choisissez entre "Coloré", "Simple" ou "Aucun".
• Disposition tableau : activez pour des bordures visibles.
• Bordures : choisissez entre "Toutes", "Lignes" ou "Colonnes".

Comment masquer un champ ou une section sous certaines conditions ?

Utilisez la visibilité conditionnelle dans le constructeur :

1. Sélectionnez le champ ou la section.
2. Dans l'onglet Visibilité, activez Conditionnel.
3. Saisissez une expression JavaScript dans Visible si (ex. : doc.total > 100).
4. Testez avec différents documents pour vérifier le comportement.

Puis-je utiliser une police personnalisée dans mes formats d'impression ?

Oui. Le constructeur moderne propose un sélecteur de police avec les polices standard et les Google Fonts intégrées à Dokos. Pour utiliser une police personnalisée :

1. Sélectionnez un élément ou ouvrez l'onglet Format pour une application globale.
2. Dans l'onglet Style, cliquez sur le sélecteur Police.
3. Recherchez ou sélectionnez une police dans la liste.

Pour ajouter une police personnalisée non disponible dans le sélecteur, vous devrez l'ajouter manuellement via CSS dans le champ Style personnalisé de l'en-tête de lettre ou du format d'impression.

Comment répéter l'en-tête de lettre sur toutes les pages ?

Activez l'option Répéter l'en-tête et le pied de page sur toutes les pages dans les Paramètres d'impression :

1. Allez dans Paramètres > Paramètres d'impression.
2. Activez l'option.
3. Enregistrez les paramètres.

Puis-je utiliser le constructeur moderne pour modifier un format Standard ?

Oui. Le constructeur moderne peut être utilisé pour modifier à la fois les formats Standard et Personnalisés. Cependant, les formats Standard sont généralement fournis par les applications et peuvent être écrasés lors des mises à jour. Pour éviter cela :

1. Dupliquez le format Standard que vous souhaitez modifier.
2. Renommez la copie (ex. : "Facture Standard - Personnalisée").
3. Modifiez la copie avec le constructeur moderne.

Comment ajouter un saut de page avant une section spécifique ?

Le constructeur moderne ne propose pas d'option directe pour ajouter des sauts de page. Cependant, vous pouvez utiliser le champ Style personnalisé pour forcer un saut de page :

1. Sélectionnez la section avant laquelle vous souhaitez insérer un saut de page.
2. Dans l'onglet Style, développez Style personnalisé.
3. Ajoutez la règle CSS suivante :

   page-break-before: always;
   

4. Prévisualisez pour vérifier le résultat.

La prévisualisation en temps réel fonctionne-t-elle avec tous les types de champs ?

Oui. La prévisualisation en temps réel prend en charge tous les types de champs, y compris :

• Les champs parents et enfants (ex. : articles dans une facture).
• Les champs de type tableau (répétiteurs).
• Les champs fusionnés ou multisélect.
• Les champs HTML.
• Les champs de type code-barres ou image.

Les valeurs sont récupérées directement depuis le serveur via l'endpoint get_formatted, garantissant une parfaite cohérence avec le rendu final.

Puis-je prévisualiser un format qui n'a jamais été enregistré ?

Oui. La prévisualisation en temps réel fonctionne même pour les formats qui n'ont jamais été enregistrés. Vous pouvez créer un nouveau format d'impression, l'éditer dans le constructeur et voir le rendu en temps réel avant de l'enregistrer pour la première fois.

Que faire si la prévisualisation affiche une erreur ?

Si la prévisualisation affiche une erreur (ex. : "Could not generate preview"), voici les étapes à suivre :

1. Vérifiez la connexion au serveur : assurez-vous que le serveur Dokos est accessible.
2. Actualisez la page : rechargez la page pour réinitialiser le constructeur.
3. Vérifiez les permissions : assurez-vous que vous avez accès à tous les champs utilisés dans le format.
4. Simplifiez le format : réduisez le nombre de sections ou de champs pour identifier la source du problème.
5. Consultez la console du navigateur : ouvrez les outils de développement (F12) pour identifier d'éventuelles erreurs JavaScript.
6. Contactez le support : si le problème persiste, contactez le support Dokos avec les détails de l'erreur.

La prévisualisation en temps réel est-elle disponible pour les formats classiques ?

Non. La prévisualisation en temps réel est une fonctionnalité exclusive du constructeur moderne. Les formats classiques ne bénéficient pas de cette fonctionnalité et doivent être migrés vers le constructeur moderne pour en profiter.

Puis-je utiliser la prévisualisation en temps réel pour déboguer un format ?

Oui. La prévisualisation en temps réel est un outil puissant pour déboguer vos formats d'impression :

• Elle affiche les erreurs de rendu directement dans l'aperçu.
• Elle permet de tester rapidement différentes configurations sans enregistrer.
• Elle montre comment les règles de visibilité conditionnelle affectent le rendu.
• Elle reflète les permissions de l'utilisateur, aidant à identifier les problèmes d'accès aux champs.

Pour déboguer un format :

1. Ouvrez le format dans le constructeur.
2. Effectuez les modifications nécessaires.
3. Observez le rendu en temps réel dans la prévisualisation.
4. Ajustez jusqu'à obtenir le résultat souhaité.