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

Expérience de prévisualisation améliorée

Exemple — Maison Verte SARL Le comptable de Maison Verte souhaite valider le rendu exact de ses factures avant envoi. Il clique sur Aperçu dans le constructeur et voit immédiatement le PDF généré en plein écran, avec la possibilité de zoomer, naviguer entre les pages et imprimer directement depuis son navigateur.

Le constructeur propose désormais une prévisualisation en PDF natif dans une fenêtre modale en plein écran, offrant une expérience fidèle à l'impression finale.

Fonctionnalités clés :

• PDF natif : L'aperçu affiche le document tel qu'il sera imprimé, avec gestion des sauts de page et des marges.
• Barre d'outils native : Utilise la barre d'outils PDF intégrée du navigateur (zoom, navigation, téléchargement, impression).
• Fermeture intuitive : La fenêtre se ferme avec la touche Échap ou en cliquant en dehors de la modale.
• État de chargement : Affiche une carte de chargement opaque pendant la génération du PDF.

Comment utiliser la prévisualisation :

1. Ouvrez un Format d'impression en mode constructeur.
2. Cliquez sur l'icône Aperçu (👁️) dans la barre d'en-tête.
3. Attendez la génération du PDF (quelques secondes).
4. Utilisez les outils du navigateur pour zoomer, naviguer ou imprimer.
5. Fermez la fenêtre avec Échap ou en cliquant en dehors.

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Cliquer sur Aperçu]
    B --> C[Attendre la génération du PDF]
    C --> D[Utiliser les outils du navigateur]
    D --> E[Fermer la fenêtre]

    

Synchronisation visuelle entre le canevas et l'arborescence des calques

Exemple — Bureau Moderne Le responsable des achats de Bureau Moderne souhaite ajuster rapidement la position d'un champ dans un tableau. En survolant le champ dans le canevas, la ligne correspondante s'illumine dans l'arborescence des calques, lui permettant de l'identifier et de le sélectionner instantanément.

Le constructeur synchronise désormais les interactions entre le canevas et l'arborescence des calques pour une navigation plus intuitive.

Fonctionnalités clés :

• Survol synchronisé : Passer la souris sur un élément (section, colonne, champ) dans le canevas met en évidence la ligne correspondante dans l'arborescence.
• Sélection précise : Cliquer sur un élément dans l'arborescence fait défiler le canevas jusqu'à cet élément.
• Colonnes mises en évidence : Survoler une colonne dans le canevas encadre toute la colonne pour une meilleure visibilité.
• Simplification des sections à une colonne : Les sections avec une seule colonne n'affichent pas de ligne "Colonne 1" dans l'arborescence.

Comment utiliser la synchronisation :

1. Survolez un élément dans le canevas pour voir sa position dans l'arborescence.
2. Cliquez sur un élément dans l'arborescence pour le sélectionner dans le canevas.
3. Utilisez cette synchronisation pour naviguer rapidement dans les formats complexes.

      
flowchart TD
    A[Survoler un élément dans le canevas] --> B[Mise en évidence dans l'arborescence]
    C[Cliquer sur un élément dans l'arborescence] --> D[Défilement vers l'élément dans le canevas]

    

Sélection et déplacement en groupe

Exemple — Maison Verte SARL Le service comptable de Maison Verte souhaite réorganiser plusieurs champs dans l'en-tête de ses factures. Il sélectionne tous les champs concernés, puis les déplace d'un seul geste vers une nouvelle section — sans avoir à les repositionner un par un.

Le constructeur permet désormais de sélectionner et déplacer plusieurs éléments simultanément, simplifiant la réorganisation des formats.

Fonctionnalités clés :

• Sélection multiple : Maintenez la touche Ctrl (ou Cmd sur Mac) enfoncée pour sélectionner plusieurs éléments.
• Déplacement groupé : Déplacez un élément sélectionné pour déplacer tout le groupe.
• Outils masqués en mode groupe : Les barres d'outils individuelles (copier, dupliquer, supprimer) sont masquées pendant une sélection multiple.
• Actions groupées : Utilisez la barre d'outils du groupe pour copier, dupliquer ou supprimer tous les éléments sélectionnés.

Comment utiliser la sélection multiple :

1. Maintenez Ctrl (ou Cmd) enfoncée.
2. Cliquez sur les éléments à sélectionner dans le canevas.
3. Relâchez Ctrl/Cmd pour verrouiller la sélection.
4. Déplacez un élément du groupe pour déplacer tout le groupe.
5. Utilisez la barre d'outils du groupe pour appliquer des actions.

      
flowchart TD
    A[Maintenir Ctrl/Cmd] --> B[Cliquer sur les éléments à sélectionner]
    B --> C[Relâcher Ctrl/Cmd]
    C --> D[Déplacer un élément pour déplacer le groupe]
    D --> E[Utiliser la barre d'outils du groupe]

    

Indicateur d'état de sauvegarde

Exemple — Bureau Moderne Le responsable administratif de Bureau Moderne ajuste un format de bon de livraison et voit immédiatement l'indicateur Enregistrement... apparaître en haut du constructeur. Une fois la sauvegarde terminée, l'indicateur passe à Enregistré, lui confirmant que ses modifications sont sécurisées.

Le constructeur affiche désormais un indicateur d'état de sauvegarde en temps réel pour rassurer les utilisateurs.

Fonctionnalités clés :

• Visibilité permanente : L'indicateur est affiché en haut à droite du constructeur.
• États clairs : Affiche Enregistré (✓) ou Enregistrement... (⏳) selon l'état.
• Mises à jour automatiques : L'indicateur se met à jour dès que les modifications sont sauvegardées.

Comment interpréter l'indicateur :

• Enregistré : Toutes les modifications ont été sauvegardées.
• Enregistrement... : Les modifications sont en cours de sauvegarde.

Poignées de marge et de rembourrage améliorées

Exemple — Maison Verte SARL Le service marketing de Maison Verte souhaite ajouter un espacement autour de la section "Conditions générales" de ses devis. Il ajuste les poignées de marge et de rembourrage pour obtenir un espacement uniforme, même lorsque les valeurs sont à zéro.

Les poignées de marge et de rembourrage ont été repensées pour une manipulation plus intuitive.

Fonctionnalités clés :

• Visibilité permanente : Les poignées de marge et de rembourrage restent visibles même lorsque leur valeur est à zéro.
• Design épuré : Les poignées sont désormais des traits fins avec une zone de clic élargie.
• Séparation claire : La marge (extérieure) et le rembourrage (intérieur) sont toujours distincts.

Comment ajuster les espacements :

1. Sélectionnez une section dans le canevas.
2. Passez la souris sur les bords de la section pour voir les poignées.
3. Cliquez et faites glisser les poignées pour ajuster les valeurs.
4. Utilisez les contrôles dans l'onglet Style pour des ajustements précis.

      
flowchart TD
    A[Sélectionner une section] --> B[Passer la souris sur les bords]
    B --> C[Cliquer et faire glisser les poignées]
    C --> D[Ajuster dans l'onglet Style]

    

Améliorations ergonomiques supplémentaires

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

• Barre d'outils simplifiée : Les icônes Aperçu (👁️) et Paramètres d'impression (⚙️) sont désormais directement accessibles dans la barre d'en-tête.
• Rappel du dernier onglet utilisé : Le constructeur rouvre automatiquement le dernier onglet utilisé (ex. : Style, Disposition) lors de la réouverture.
• 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.
• Alignement des champs : L'alignement s'applique désormais à l'ensemble étiquette + valeur pour une meilleure cohérence.
• Champs masqués grisés : Les champs masqués sont affichés en grisé dans le constructeur pour faciliter l'édition.
• Raccourcis clavier : Ctrl+Z (annuler) et Ctrl+Y (refaire) sont désormais 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.

Gestion des tableaux enfants sur plusieurs pages

Exemple — Bureau Moderne Bureau Moderne imprime des bons de commande avec des tableaux d'articles longs. Avec cette mise à jour, les bordures des tableaux enfants restent fermées même lorsque le tableau est divisé sur plusieurs pages, évitant les lignes ouvertes ou les colonnes tronquées.

Le constructeur moderne améliore la gestion des tableaux enfants (ex. : tableaux d'articles dans une facture) lorsqu'ils s'étendent sur plusieurs pages.

Fonctionnalités clés :

• Bordures fermées : Les bordures des tableaux enfants restent fermées à chaque saut de page.
• Colonnes continues : Les diviseurs de colonnes s'étendent jusqu'au bas de chaque page.
• Pied de tableau répétitif : Un pied de tableau est ajouté à la fin de chaque page pour fermer les bordures.

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.

Bonnes pratiques pour les formats d'impression

Optimiser la lisibilité

• Utilisez des sections pour regrouper les informations logiquement (ex. : en-tête, articles, total).
• Limitez le nombre de colonnes dans les tableaux pour éviter les débordements.
• Testez les sauts de page avec des documents longs pour valider le rendu.
• Utilisez des couleurs sobres pour les étiquettes et les valeurs afin de garantir une bonne lisibilité.

Personnaliser pour votre entreprise

• Ajoutez votre logo avec le bloc Image pour renforcer votre identité visuelle.
• Utilisez des codes-barres pour les documents logistiques (bons de livraison, étiquettes).
• Masquez les champs inutiles avec la visibilité conditionnelle pour simplifier les documents.
• Adaptez les polices pour correspondre à votre charte graphique.

Tester avant impression

• Prévisualisez systématiquement vos formats avec des données réelles.
• Vérifiez les marges pour éviter les coupures en bord de page.
• Testez l'impression sur différents types de documents (factures, bons de commande, étiquettes).
• Validez avec les utilisateurs finaux pour vous assurer que le format répond à leurs besoins.

Résoudre les problèmes courants

Le PDF ne s'affiche pas correctement

• Vérifiez le moteur PDF : assurez-vous que Chrome est sélectionné dans les Paramètres d'impression.
• Testez avec un autre navigateur : certains navigateurs peuvent avoir des problèmes de rendu.
• Réduisez la complexité : les formats très complexes peuvent poser problème. Essayez de simplifier le format.

Les sauts de page ne sont pas respectés

• Activez la répétition de l'en-tête dans les Paramètres d'impression.
• Vérifiez les marges : des marges trop petites peuvent causer des problèmes.
• Utilisez des sections pour mieux contrôler les sauts de page.

Les tableaux enfants ont des bordures ouvertes

• Assurez-vous que le pied de tableau est activé : le constructeur moderne utilise un pied de tableau pour fermer les bordures.
• Vérifiez les styles de bordure : utilisez des bordures complètes pour les tableaux.
• Testez avec un tableau court : si le problème persiste, essayez de réduire la taille du tableau pour identifier la source du problème.

Les modifications ne sont pas sauvegardées

• Vérifiez l'indicateur d'état : assurez-vous que le constructeur affiche Enregistré après vos modifications.
• Actualisez la page : si l'indicateur reste bloqué sur Enregistrement..., actualisez la page.
• Vérifiez votre connexion : une connexion internet instable peut empêcher la sauvegarde.

Conclusion

Le constructeur de format d'impression moderne offre une expérience intuitive et puissante pour créer des documents professionnels sans écrire de code. Avec ses améliorations récentes — prévisualisation en PDF natif, synchronisation visuelle, sélection multiple et gestion avancée des tableaux — il répond aux besoins des entreprises de toutes tailles.

Pour tirer le meilleur parti du constructeur :

• Explorez les nouvelles fonctionnalités pour découvrir comment elles peuvent simplifier votre workflow.
• Testez systématiquement vos formats avant de les utiliser en production.
• Personnalisez vos documents pour refléter l'identité de votre entreprise.