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

Panneau Calques (Layers) et réorganisation de l'inspecteur

Exemple — Maison Verte SARL Le comptable de Maison Verte souhaite réorganiser les sections de sa facture pour mettre en avant les informations de paiement. Il ouvre l'onglet Calques, fait glisser la section "Paiement" vers le haut de la liste, et voit immédiatement le résultat dans le canevas. En survolant chaque élément dans les calques, il identifie rapidement les sections correspondantes sur le document.

Le constructeur intègre désormais un panneau Calques (anciennement Contour) qui permet de visualiser et réorganiser la structure de votre document par simple glisser-déposer.

Fonctionnalités clés du panneau Calques :

• Réorganisation par glisser-déposer : Déplacez les sections et les champs entre les colonnes ou les sections pour modifier l'ordre d'affichage.
• Surlignage au survol : Passez la souris sur un élément dans les calques pour voir son emplacement exact sur le canevas.
• Sélection directe : Cliquez sur un élément dans les calques pour le sélectionner dans le canevas et afficher ses propriétés dans l'inspecteur.
• Simplification de l'arborescence : Les libellés de type de champ ont été supprimés pour une vue plus épurée.

Comment utiliser le panneau Calques :

1. Ouvrez un Format d'impression en mode constructeur.
2. Cliquez sur l'onglet Calques dans la barre latérale gauche.
3. Pour réorganiser un élément :
   • Faites-le glisser vers le haut ou le bas dans la liste.
   • Pour déplacer un champ vers une autre colonne, faites-le glisser sur la section ou la colonne cible.
4. Pour identifier un élément : survolez-le dans les calques pour le voir se surligner sur le canevas.
5. Pour sélectionner un élément : cliquez dessus dans les calques pour afficher ses propriétés dans l'inspecteur.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Onglet Calques]
    B --> C[Glisser-déposer pour réorganiser]
    B --> D[Survoler pour identifier]
    B --> E[Cliquer pour sélectionner]
    C --> F[Prévisualiser le résultat]
    D --> F
    E --> F

    

Réorganisation de l'inspecteur et suppression des onglets redondants

Exemple — Bureau Moderne Le responsable des achats de Bureau Moderne souhaite ajuster les marges et les paramètres d'impression de son bon de commande. Il sélectionne le canevas, voit immédiatement les Paramètres d'impression dans l'inspecteur, et modifie l'orientation et la taille de page sans quitter l'éditeur.

L'inspecteur a été réorganisé pour offrir une expérience plus intuitive :

• Paramètres d'impression intégrés : Les paramètres globaux (moteur PDF, orientation, taille de page, etc.) sont désormais accessibles directement dans l'inspecteur lorsque rien n'est sélectionné sur le canevas.
• Suppression de l'onglet Setting : Les paramètres d'impression ne nécessitent plus un onglet dédié.
• En-tête de l'inspecteur masqué : Lorsque vous visualisez les paramètres du canevas, l'en-tête de l'inspecteur est masqué pour maximiser l'espace disponible.
• Sélection après dépôt : Lorsqu'un champ est déposé sur le canevas, il est automatiquement sélectionné (auparavant, c'était sa section parente qui était sélectionnée).

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

1. Ouvrez un Format d'impression en mode constructeur.
2. Cliquez sur une zone vide du canevas (ou désélectionnez tout élément).
3. Les Paramètres d'impression s'affichent dans l'inspecteur.
4. Modifiez les options souhaitées (moteur PDF, orientation, taille de page, etc.).
5. Les changements sont appliqués immédiatement au format en cours d'édition.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Désélectionner tout élément]
    B --> C[Paramètres d'impression dans l'inspecteur]
    C --> D[Modifier les options]
    D --> E[Prévisualiser le résultat]

    

Suppression des options redondantes

Plusieurs options redondantes ont été supprimées pour simplifier l'interface :

• Bouton Gras (B) pour les champs : Cette option a été retirée car elle peut être remplacée par le Style personnalisé (ex. : font-weight: bold;).
• Option "Saut de page après" pour les sections : Cette option a été supprimée car elle est redondante avec le bloc "Saut de page" disponible dans la palette de blocs.

Comment remplacer ces options :

• Pour mettre un texte en gras :
  1. Sélectionnez le champ concerné.
  2. Dans l'onglet Style de l'inspecteur, développez Style personnalisé.
  3. Saisissez font-weight: bold; et validez.
• Pour ajouter un saut de page après une section :
  1. Dans la palette de blocs à gauche, sélectionnez le bloc "Saut de page".
  2. Faites-le glisser après la section concernée dans le canevas.

Amélioration des zones de dépôt vides

Exemple — Tribu SCOP Tribu SCOP souhaite ajouter un champ "Conditions générales" dans une colonne vide de son devis. Avec la nouvelle mise à jour, la zone de dépôt "Glisser des champs ici" reste bien alignée avec le contenu de la colonne, facilitant le positionnement précis des champs.

Les zones de dépôt vides (ex. : colonnes sans champ) ont été améliorées pour éviter les débordements :

• Alignement avec le contenu : Les zones de dépôt sont désormais limitées à la largeur du contenu de la colonne, évitant qu'elles ne débordent sur les marges.
• Visibilité accrue : Les zones de dépôt sont clairement délimitées et restent visibles même lorsque la colonne est vide.

Comment utiliser les zones de dépôt :

1. Ouvrez un Format d'impression en mode constructeur.
2. Identifiez une colonne vide dans une section.
3. Faites glisser un champ depuis la palette de blocs vers la zone de dépôt de la colonne.
4. Le champ est automatiquement aligné avec le contenu de la colonne.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Identifier une colonne vide]
    B --> C[Glisser un champ vers la zone de dépôt]
    C --> D[Champ aligné avec le contenu]
    D --> E[Prévisualiser le résultat]

    

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]

    

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