Constructeur de format d'impression

Le constructeur de format d'impression est un éditeur visuel intégré à Dokos qui permet de créer et modifier des formats d'impression sans écrire de code HTML. Il est conçu pour les utilisateurs métiers et les administrateurs qui souhaitent personnaliser l'apparence des documents PDF générés depuis Dokos (factures, devis, bons de commande, etc.).

Accéder au constructeur

1. Ouvrez le menu Paramètres > Impression > Format d'impression.
2. Créez un nouveau format d'impression ou ouvrez un format existant.
3. Cliquez sur le bouton Modifier en mode constructeur dans la barre d'outils.

Interface du constructeur

L'interface du constructeur se compose de plusieurs zones clés :

• Barre d'outils : actions globales (enregistrer, prévisualiser, annuler/refaire).
• Palette de blocs (à gauche) : liste des champs et sections disponibles.
• Canevas (au centre) : zone de conception où vous organisez les éléments.
• Panneau latéral (à droite) : inspecteur pour configurer les propriétés des éléments sélectionnés.
• Fil d'Ariane : navigation entre les sections et indication du nom du format.

      
flowchart TD
    A[Barre d'outils] --> B[Palette de blocs]
    A --> C[Canevas]
    A --> D[Panneau latéral]
    A --> E[Fil d'Ariane]

    

Concepts de base

Sections

Les sections sont les conteneurs principaux de votre format d'impression. Elles permettent de regrouper logiquement les champs et de contrôler la mise en page.

Types de sections :

• Section standard : conteneur générique pour organiser les champs.
• Section répétiteur : affiche une liste d'éléments (ex. : tableau des articles d'une facture).
• Section HTML : permet d'insérer du code HTML personnalisé.

Créer une section :

1. Dans la palette de blocs, cliquez sur Section ou Section répétiteur.
2. Faites glisser le bloc dans le canevas.
3. Configurez les propriétés de la section dans le panneau latéral.

Champs

Les champs représentent les données du document (ex. : nom du client, montant total, date). Ils peuvent être ajoutés à n'importe quelle section.

Types de champs :

• Champ standard : affiche une valeur simple (texte, nombre, date).
• Champ de tableau : affiche un tableau de données (ex. : liste des articles).
• Champ personnalisé : permet d'insérer du code HTML ou Jinja2.

Ajouter un champ :

1. Dans la palette de blocs, sélectionnez le champ souhaité.
2. Faites glisser le champ dans une section du canevas.
3. Configurez les propriétés du champ dans le panneau latéral.

Fonctionnalités avancées

Glisser-déposer complet des champs

Exemple — Maison Verte SARL L'équipe administrative souhaite réorganiser les champs de sa facture : déplacer le champ "Conditions de paiement" après le total, et regrouper les informations client en haut du document. Avec le glisser-déposer complet, elle peut désormais saisir n'importe quelle partie d'une carte de champ et la déplacer librement dans le canevas.

Le constructeur permet désormais de glisser-déposer les champs par n'importe quelle partie de leur carte, et non plus uniquement par la poignée de drag située à gauche. Cette amélioration rend la manipulation des champs plus intuitive.

Éléments exclus du drag : Pour éviter les conflits avec les interactions utilisateur, les éléments suivants sont automatiquement exclus du déclenchement du drag :

• Boutons (role="button", tabindex)
• Liens (<a>)
• Étiquettes (<label>)
• Éléments <summary>
• Champs de saisie et zones interactives dans le contenu rendu des champs

Indicateurs visuels :

• Curseur de saisie (grab) : apparaît lorsque vous survolez une zone draggable d'une carte de champ.
• Curseur de drag actif (grabbing) : apparaît pendant le déplacement d'un champ.

      
flowchart TD
    A[Survoler une carte de champ] --> B{Curseur = grab}
    B -->|Début du drag| C[Curseur = grabbing]
    C -->|Lâcher le champ| D[Champ repositionné]

    

Blocs Image et Code-barres

Exemple — Bureau Moderne Bureau Moderne souhaite ajouter son logo en en-tête de ses bons de commande et un QR code contenant le lien vers le bon de commande en ligne. Depuis le constructeur, il 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 intégrés à toutes les impressions.

Le constructeur propose deux nouveaux blocs pour enrichir vos documents :

Bloc Image

Insérez une image statique (logo, signature, illustration) dans vos impressions.

Configuration :

1. Faites glisser le bloc Image depuis la palette de blocs.
2. Cliquez sur le bloc dans le canevas.
3. Dans le panneau latéral, téléversez une image depuis votre ordinateur.
4. Ajustez la largeur de l'image (en pixels ou pourcentage).
5. Prévisualisez le rendu.

Bloc Code-barres

Générez un code-barres ou un QR code à partir d'un champ du document ou d'un texte statique.

Configuration :

1. Faites glisser le bloc Code-barres depuis la palette de blocs.
2. Cliquez sur le bloc dans le canevas.
3. Dans le panneau latéral, choisissez une source :
   • Champ du document : sélectionnez un champ existant (ex. : name, customer_name).
   • Texte statique : saisissez un texte fixe (ex. : https://votre-instance.dokos.io).
4. Sélectionnez un format : CODE128, EAN-13, UPC-A, QR.
5. Ajustez la largeur du code-barres.
6. Prévisualisez le rendu.

      
flowchart TD
    A[Glisser-déposer le bloc Image/Code-barres] --> B[Configurer les propriétés]
    B --> C[Téléverser une image ou choisir une source]
    C --> D[Ajuster la largeur]
    D --> E[Prévisualiser]

    

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

Le constructeur permet 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.
• Couleur des valeurs : définissez une couleur par défaut pour toutes les valeurs.
• Couleur de fond des sections : choisissez une couleur de fond pour chaque section.
• Couleurs des colonnes de répétiteur : personnalisez la couleur de fond et le style des colonnes.

Configuration globale (onglet Format) :

1. Ouvrez l'onglet Format dans le panneau latéral.
2. Utilisez les sélecteurs Couleur des étiquettes et Couleur des valeurs pour définir les couleurs par défaut.

Configuration par section ou colonne :

1. Sélectionnez une section ou une colonne dans le canevas.
2. Ouvrez l'onglet Style dans le panneau latéral.
3. Utilisez le sélecteur Couleur de fond pour définir la couleur.
4. Pour les colonnes, choisissez un Style de colonne (muted, mono, secondary, primary).

      
flowchart TD
    A[Ouvrir l'onglet Format] --> B[Définir couleur étiquettes/valeurs]
    A --> C[Sélectionner une section/colonne]
    C --> D[Ouvrir l'onglet Style]
    D --> E[Définir couleur de fond/style]
    B --> F[Prévisualiser]
    E --> F

    

Styles avancés pour les tableaux

Exemple — Bureau Moderne Bureau Moderne souhaite que ses bons de commande affichent un tableau des articles avec des bordures visibles, un espacement entre les cellules et des en-têtes de colonne colorés. Depuis le constructeur, il active le mode "Disposition tableau", ajuste le rembourrage des cellules et choisit un style d'en-tête "Coloré".

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 : choisissez entre Coloré, Simple ou Aucun.
• Disposition en grille : activez le mode tableau pour des bordures visibles.
• Largeur des colonnes : définissez une largeur personnalisée pour chaque colonne.
• Bordures : choisissez entre Toutes, Lignes ou Colonnes.

Configuration :

1. Sélectionnez une section contenant un tableau ou un champ de type tableau.
2. Ouvrez l'onglet Style dans le panneau latéral.
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 un style.
   • Disposition tableau : activez pour appliquer un style de grille.
   • Bordures : choisissez le type de bordures.
   • Largeur des colonnes : définissez une largeur pour chaque colonne.
4. Prévisualisez le rendu.

      
flowchart TD
    A[Sélectionner une section tableau] --> B[Ouvrir l'onglet Style]
    B --> C[Ajuster rembourrage/rayon de bordure]
    B --> D[Choisir style d'en-tête]
    B --> E[Activer disposition tableau]
    B --> F[Définir bordures/largeur des colonnes]
    C --> G[Prévisualiser]
    D --> G
    E --> G
    F --> G

    

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.

Le constructeur permet de contrôler précisément les marges des sections :

Configuration :

1. Sélectionnez une section dans le canevas.
2. Ouvrez l'onglet Style dans le panneau latéral.
3. Développez la section Espacement.
4. Ajustez les valeurs des marges (haut, droite, bas, gauche).
5. Prévisualisez le rendu.

      
flowchart TD
    A[Sélectionner une section] --> B[Ouvrir l'onglet Style]
    B --> C[Développer Espacement]
    C --> D[Ajuster les marges]
    D --> E[Prévisualiser]

    

Visibilité conditionnelle des champs et sections

Exemple — Tribu SCOP Tribu SCOP souhaite masquer le champ "Remise spéciale" sur les factures dont le montant total est inférieur à 100 €. Elle configure une règle doc.total < 100 sur le champ, et celui-ci n'apparaît plus sur les impressions concernées.

La visibilité conditionnelle permet de masquer dynamiquement des éléments en fonction des données du document.

Configuration :

1. Sélectionnez un champ ou une section dans le canevas.
2. Ouvrez l'onglet Visibilité dans le panneau latéral.
3. Activez l'option Conditionnel.
4. Saisissez une expression JavaScript dans le champ Visible si (ex. : doc.statut === "Payé").
5. Testez le rendu avec différents documents.

Exemples d'expressions :

• doc.total > 1000 → Affiche le champ si le montant total dépasse 1000 €.
• doc.items.length > 5 → Affiche la section 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 pour gagner de la place. Il ajuste l'espacement à 5 pixels dans l'onglet Disposition.

Configuration :

1. Sélectionnez un champ en orientation Gauche-Droite.
2. Ouvrez l'onglet Disposition dans le panneau latéral.
3. Utilisez le sélecteur Espacement étiquette-valeur pour choisir une valeur.
4. Prévisualisez le rendu.

Affichage du titre des répétiteurs

Exemple — Bureau Moderne Bureau Moderne souhaite masquer le titre "Articles" au-dessus du tableau des articles. Il désactive l'option Afficher le titre dans l'onglet Disposition.

Configuration :

1. Sélectionnez une section répétiteur dans le canevas.
2. Ouvrez l'onglet Disposition dans le panneau latéral.
3. Utilisez l'option Afficher le titre pour activer/désactiver l'affichage.
4. Ajustez l'Espacement du titre si nécessaire.
5. Prévisualisez le rendu.

Styles personnalisés et sélecteur de police

Exemple — Maison Verte SARL Maison Verte applique un style personnalisé à la section "Total" (fond gris clair, texte en gras) et utilise la police "Roboto" pour l'ensemble du document.

Styles personnalisés :

1. Sélectionnez un élément (section, champ, colonne).
2. Ouvrez l'onglet Style dans le panneau latéral.
3. Développez la section Style personnalisé.
4. Saisissez des règles CSS (ex. : background: #f5f5f5; font-weight: bold;).

Sélecteur de police :

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.

      
flowchart TD
    A[Sélectionner un élément] --> B[Onglet Style]
    B --> C[Style personnalisé]
    B --> D[Sélecteur de police]
    C --> E[Prévisualiser]
    D --> E

    

Prévisualisation et enregistrement

Prévisualiser le format

1. Cliquez sur le bouton Prévisualiser dans la barre d'outils.
2. Sélectionnez un document existant ou créez un nouveau document pour l'aperçu.
3. Choisissez le type d'aperçu : HTML (par défaut) ou PDF.
4. Le rendu s'affiche dans une nouvelle fenêtre.

Enregistrer le format

1. Cliquez sur le bouton Enregistrer dans la barre d'outils.
2. Le format est sauvegardé et prêt à être utilisé.

Bonnes pratiques

• Organisez les sections logiquement : regroupez les informations par thème (ex. : informations client, détails des articles, total).
• Utilisez les répétiteurs pour les listes : les sections répétiteurs sont idéales pour afficher des tableaux (articles, lignes de commande, etc.).
• Testez avec différents documents : prévisualisez le format avec plusieurs documents pour vous assurer qu'il s'adapte à tous les cas.
• Évitez les styles personnalisés complexes : privilégiez les options natives du constructeur pour une meilleure maintenabilité.
• Documentez les règles de visibilité : ajoutez un commentaire dans le champ Description du format pour expliquer les règles conditionnelles.

Résoudre les problèmes courants

Constructeur moderne vs. constructeur classique