Personnalisation des formats d'impression

Exemple — Bureau Moderne Le responsable administratif de Bureau Moderne souhaite personnaliser le format d'impression des factures pour inclure le logo de l'entreprise, un QR code vers le portail client, et des couleurs conformes à la charte graphique. Grâce aux outils de personnalisation de Dokos, il configure ces éléments sans écrire une seule ligne de code.

Dokos offre plusieurs méthodes pour personnaliser les formats d'impression, adaptées à différents niveaux de compétence technique. Cette page décrit les options disponibles pour les administrateurs et les développeurs.

Méthodes de personnalisation

Constructeur de format d'impression (sans code)

Le constructeur de format d'impression est un outil 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.

Fonctionnalités clés :

• Glisser-déposer de champs et sections.
• Personnalisation des styles (couleurs, polices, bordures).
• Visibilité conditionnelle des éléments.
• Aperçu en temps réel.
• Nouveaux blocs (Image, Code-barres).

Cas d'usage :

• Création de formats standard (factures, devis, bons de commande).
• Personnalisation rapide pour répondre à des besoins spécifiques.
• Adaptation des formats aux chartes graphiques des entreprises.

Personnalisation via Jinja (pour les développeurs)

Pour des personnalisations avancées, Dokos permet d'utiliser le moteur de templates Jinja directement dans les formats d'impression. Cette méthode est idéale pour :

• Ajouter des logiques conditionnelles complexes.
• Intégrer des calculs personnalisés.
• Utiliser des données provenant de plusieurs documents.
• Personnaliser le HTML et le CSS pour un contrôle total du rendu.

Exemple d'utilisation de Jinja :

{% if doc.total > 1000 %}
<div class="highlight">
    Montant élevé : {{ doc.total }} €
</div>
{% endif %}

Cas d'usage :

• Afficher des messages conditionnels (ex. : "Remise spéciale appliquée").
• Calculer des totaux personnalisés.
• Intégrer des données externes via des requêtes API.

Personnalisation via CSS

Dokos permet d'ajouter des styles CSS personnalisés pour affiner l'apparence des formats d'impression. Cette méthode est utile pour :

• Appliquer des styles globaux à tous les formats.
• Personnaliser des éléments spécifiques (ex. : en-têtes, pieds de page).
• Corriger des problèmes de rendu (ex. : sauts de page, alignements).

Comment ajouter du CSS personnalisé :

1. Ouvrez le formulaire Paramètres d'impression via la recherche (Ctrl+K).
2. Dans l'onglet CSS personnalisé, ajoutez vos règles CSS.
3. Enregistrez les paramètres.

Exemple de CSS personnalisé :

/* Style pour les en-têtes de section */
.print-heading {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* Style pour les tableaux */
.print-format table {
    border-collapse: collapse;
    width: 100%;
}

.print-format th, .print-format td {
    border: 1px solid #ddd;
    padding: 8px;
}

Bonnes pratiques pour la personnalisation

Optimisation des performances

• Évitez les requêtes coûteuses : Limitez les appels à des données externes ou des calculs complexes dans les templates Jinja.
• Utilisez des champs calculés : Pour les données fréquemment utilisées, créez des champs calculés dans le doctype plutôt que de les recalculer dans le template.
• Privilégiez le constructeur : Pour les personnalisations simples, utilisez le constructeur plutôt que du code personnalisé.

Cohérence visuelle

• Respectez la charte graphique : Utilisez les couleurs, polices et logos de l'entreprise pour une identité visuelle cohérente.
• Uniformisez les formats : Appliquez des styles similaires aux formats d'un même type (ex. : toutes les factures doivent avoir le même en-tête).
• Testez les sauts de page : Vérifiez que les tableaux et sections ne sont pas coupés de manière inesthétique.

Accessibilité

• Contraste des couleurs : Assurez-vous que le texte est lisible sur les fonds colorés (utilisez des outils comme WebAIM Contrast Checker).
• Taille des polices : Utilisez une taille de police suffisante pour une lecture confortable (minimum 10px pour le corps du texte).
• Structure claire : Organisez les informations de manière logique (en-tête, corps, pied de page) et utilisez des titres pour les sections.

Exemple de personnalisation avancée — Maison Verte SARL

Scénario : Maison Verte SARL souhaite personnaliser ses factures pour inclure :

• Le logo de l'entreprise en en-tête.
• Un QR code vers le portail client.
• Un tableau des articles avec des bordures visibles.
• Une section conditionnelle pour les remises spéciales.

Étapes suivies par Maison Verte :

1. Ajout du logo :
   • Utilisation du bloc Image dans le constructeur pour insérer le logo.
   • Ajustement de la largeur à 150px.
2. Ajout du QR code :
   • Utilisation du bloc Code-barres avec le champ portal_url comme source.
   • Sélection du format QR.
3. Personnalisation du tableau des articles :
   • Activation du mode Disposition tableau pour la section des articles.
   • Définition d'un rayon de bordure de 4px pour les coins du tableau.
   • Choix du style d'en-tête Coloré.
4. Section conditionnelle pour les remises :
   • Ajout d'une section Remise spéciale.
   • Configuration de la visibilité conditionnelle avec la règle doc.discount_amount > 0.
5. Aperçu et validation :
   • Utilisation de l'aperçu ancré pour vérifier le rendu en temps réel.
   • Génération d'un PDF de test pour valider les sauts de page.

Résultat : Une facture personnalisée, professionnelle et adaptée aux besoins spécifiques de Maison Verte SARL.

Dépannage

Problèmes courants et solutions

Outils de débogage

• Console du navigateur : Pour vérifier les erreurs JavaScript ou CSS.
• Logs du serveur : Pour identifier les erreurs côté serveur (ex. : templates Jinja mal formés).
• Aperçu en mode Flux : Pour un rafraîchissement rapide lors des ajustements.
• Génération de PDF : Pour valider le rendu final avec Chromium.

Nouveautés

Aperçus en temps réel des formats d'impression

Exemple — Bureau Moderne Le responsable administratif de Bureau Moderne souhaite comparer rapidement plusieurs formats d'impression pour les factures. Depuis la liste des formats d'impression, il voit désormais un aperçu en temps réel de chaque format, ce qui lui permet de choisir le plus adapté sans avoir à ouvrir chaque format individuellement.

Les cartes de format d'impression dans l'onglet Formats d'impression des paramètres de type de document affichent désormais un aperçu en temps réel du format, au lieu d'une capture d'écran statique. Cette amélioration offre plusieurs avantages :

Fonctionnalités clés :

• Rendu dynamique : L'aperçu utilise le même HTML et CSS que le format d'impression final, garantissant une cohérence parfaite entre l'aperçu et le rendu imprimé.
• Pas de délai de génération : Plus besoin d'attendre qu'une capture d'écran soit générée et enregistrée, l'aperçu s'affiche immédiatement.
• Pas de fichiers résiduels : Les aperçus ne génèrent plus de fichiers File attachés aux formats, éliminant les fichiers obsolètes et réduisant l'encombrement de la base de données.
• Chargement progressif : Les aperçus des formats visibles à l'écran sont chargés en priorité, améliorant les performances pour les types de document avec de nombreux formats.

Comment utiliser les aperçus en temps réel :

1. Ouvrez les Paramètres du type de document pour un type de document (ex. : Facture, Devis, Bon de Livraison).
2. Allez dans l'onglet Formats d'impression.
3. Parcourez la liste des formats d'impression : chaque carte affiche désormais un aperçu en temps réel du format.
4. Passez la souris sur un aperçu pour voir un rendu plus grand.
5. Cliquez sur un format pour l'ouvrir et le modifier.

      
flowchart TD
    A[Ouvrir les Paramètres du type de document] --> B[Onglet Formats d'impression]
    B --> C[Parcourir les formats avec aperçus en temps réel]
    C --> D[Passer la souris pour agrandir]
    D --> E[Cliquer pour modifier]

    

Migration des formats classiques vers le constructeur moderne

Exemple — Maison Verte SARL Lors de la mise à jour vers Dokos v16, Maison Verte SARL a vu ses formats d'impression classiques automatiquement migrés vers le constructeur moderne. Les formats conservent leur apparence d'origine, mais bénéficient désormais des nouvelles fonctionnalités du constructeur (aperçus en temps réel, blocs Image/Code-barres, etc.).

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. Cette migration offre plusieurs avantages :

Fonctionnalités clés de la migration :

• Conservation des données : Le format original est conservé dans le champ classic_format_data pour permettre un retour en arrière si nécessaire.
• Compatibilité ascendante : Les formats migrés conservent leur apparence d'origine, mais bénéficient des nouvelles fonctionnalités du constructeur moderne.
• Pas de perte de fonctionnalité : Toutes les personnalisations (Jinja, CSS) sont préservées.

Étapes de la migration :

1. Mise à jour de Dokos : La migration est exécutée automatiquement lors de la mise à jour vers Dokos v16.
2. Vérification des formats : Après la mise à jour, ouvrez chaque format d'impression pour vérifier que le rendu est conforme à vos attentes.
3. Optimisation : Profitez des nouvelles fonctionnalités du constructeur moderne (blocs Image/Code-barres, visibilité conditionnelle) pour améliorer vos formats.