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 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 désormais 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).
• Afficher un deux-points après les étiquettes : Déplacé vers le format d'impression (voir section ci-dessous).
• 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 un 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évisualisez 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]

    

Améliorations ergonomiques

Le constructeur inclut plusieurs améliorations pour faciliter son utilisation :

• Icônes dans la barre d'en-tête : Les actions Aperçu (👁️) et Paramètres d'impression (⚙️) sont désormais accessibles via des icônes dédiées dans la barre d'en-tête, à côté du menu ⋯.
• Rappel du dernier onglet utilisé : Le constructeur rouvre automatiquement le dernier onglet utilisé (ex. : Contour, Style, Disposition) lors de la réouverture.
• Sélecteur de colonnes de tableau amélioré : Le sélecteur de colonnes pour les tableaux est désormais positionné au-dessus de la liste des colonnes, facilitant la navigation.
• Nom du format dans la barre de titre : Le nom du format d'impression est affiché en permanence dans la barre de titre du 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é.

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 le constructeur, il configure cette option directement dans le Format d'impression pour chaque format.

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

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 un deux-points après les étiquettes.
4. Enregistrez le format.

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

Comment configurer l'option "Afficher un deux-points après les étiquettes" pour un format existant ?

L'option a été déplacée des Paramètres d'impression vers chaque Format d'impression. Pour la configurer :

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

Comment utiliser l'aperçu ancré pour valider mes modifications ?

L'aperçu ancré permet de visualiser les modifications en temps réel :

1. Activez l'aperçu en cliquant sur l'icône Aperçu (👁️) dans la barre d'en-tête.
2. Ajustez la taille de la barre latérale en faisant glisser sa bordure gauche.
3. Basculez entre les modes Flux (rafraîchissement automatique) et Pages (rendu fidèle avec sauts de page).
4. Modifiez le format dans le canevas et observez le résultat dans l'aperçu.

Comment accéder aux paramètres d'impression depuis le constructeur ?

Les paramètres d'impression sont désormais accessibles via une icône dédiée dans la barre d'en-tête du constructeur :

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.

Comment arrondir les coins d'une section ?

Le constructeur permet d'arrondir les coins des sections via 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évisualisez le résultat et ajustez si nécessaire.