Modèles d'impression
La fonctionnalité Modèles d’impression dans Frappe Books permet de créer des modèles personnalisés pour les factures ainsi que pour certaines autres écritures.
Pour consulter ou créer des modèles d’impression, accédez à la page dédiée via le menu latéral : "Paramètres > Modèles d’impression"
Ou bien, ouvrez la recherche rapide, tapez "Modèle d’impression" et appuyez sur Entrée.
:::tip Modèles préchargés
Lorsque vous créez une nouvelle instance de Frappe Books, elle est livrée avec quelques modèles préchargés.
Vous pouvez les utiliser tels quels ou les dupliquer et les personnaliser. :::
Si vous souhaitez vous familiariser avec l’interface de l’Éditeur de Modèle avant d’apprendre à créer un Modèle d’Impression, cliquez ici.
Création d’un Modèle d’Impression
Pour créer un Modèle d’Impression, accédez d’abord à la liste des Modèles d’Impression et cliquez sur le bouton bleu "+".
Vous verrez maintenant l’outil Éditeur de Modèle.
Vous pouvez activer le Mode Édition en cliquant sur le bouton d’édition situé à côté du bouton Enregistrer en PDF.
Ensuite, sélectionnez le type de modèle. Facture de vente est sélectionné par défaut, mais vous pouvez créer des Modèles d’Impression pour d’autres types d’entrées également.
:::tip Conseil – Affichage de l’écriture
Vous pouvez changer l’écriture affichée en exemple. Par défaut, Frappe Books sélectionne la dernière écriture créée.:::
:::tip Conseil – Tailles personnalisées
Vous pouvez ajuster la taille du modèle d’impression en cliquant sur Définir la taille d’impression dans le menu "···".:::
:::
Vous êtes maintenant prêt à modifier le Modèle d’Impression
Modification du Modèle
Le panneau de gauche contient l’Éditeur de Modèle, qui est utilisé pour modifier le modèle. Vous pouvez supprimer le modèle prédéfini et écrire ici le modèle que vous souhaitez.
:::info Syntaxe des modèles
Les modèles suivent la syntaxe des modèles Vue.js. Vous pouvez en apprendre davantage à ce sujet ici.:::
:::tip Redimensionner l’éditeur de modèles
Vous pouvez redimensionner l’éditeur de modèles en cliquant sur sa bordure et en la faisant glisser.:::
:::
Info Affichage des valeurs
Les valeurs peuvent être affichées en mentionnant leurs clés entre accolades. Par exemple :
// <h1>{{ doc.name }}</h1>
Ici, "doc.name" est la clé correspondant au numéro de facture (Invoice No), et elle sera affichée dans un élément "<h1>".
L’éditeur de modèles (Template Editor) peut vous aider en complétant automatiquement les clés pendant que vous tapez.
Il existe deux ensembles de clés pour afficher des valeurs :
"doc": ces clés sont utilisées pour afficher les valeurs issues de l'entrée (par exemple : numéro de facture, compte, date, etc.). Ces clés varient en fonction du type d'entrée."print": ces clés sont utilisées pour lire les valeurs des paramètres d'impression, comme le logo, e-mail, couleur, etc.
::tip Astuce – Clés disponibles
Si vous souhaitez voir les valeurs disponibles, vous pouvez cliquer sur la section Key Hints en dessous de l'éditeur de modèles.:::
:::
Style du Modèle
Vous pouvez utiliser soit des styles CSS en ligne, soit des classes utilitaires de Tailwind CSS pour styliser les différents composants de vos modèles.
Application des Modifications
Pour appliquer les modifications effectuées dans l’éditeur, vous pouvez :
Cliquer en dehors de l’éditeur de modèle
Utiliser les raccourcis clavier (⌃ + Entrée sur macOS et Ctrl + Entrée sur les autres systèmes)
Utilisation du Modèle
Après avoir modifié votre modèle et cliqué sur le bouton bleu Sauvegarder pour enregistrer les changements, vous pouvez utiliser ce modèle pour sauvegarder vos documents au format PDF et les envoyer à vos clients.
Pour utiliser le modèle, naviguez vers l’entrée puis cliquez sur le bouton Imprimer.
Vous verrez maintenant l’aperçu avant impression. Vous pouvez changer le modèle (template) utilisé depuis la liste à gauche.
Une fois que vous êtes satisfait de votre sélection, cliquez sur le bouton bleu Sauvegarder en PDF pour l’enregistrer.
Interface du Créateur de Modèles
Lorsque vous ouvrez un des modèles d’impression ou que vous cliquez sur le bouton bleu "+" pour créer un nouveau modèle, l’outil Créateur de Modèles (Template Builder) s’affichera.
Voici la liste des fonctionnalités de chaque composant :
Nom du modèle (Template Name) : champ texte pour modifier le nom du modèle d’impression si celui-ci n’a pas encore été sauvegardé.
Enregistrer en PDF (Save as PDF) : bouton pour enregistrer l’entrée sélectionnée en fichier PDF.
Basculer le mode édition (Toggle Edit Mode) : bouton pour activer ou désactiver le mode édition.
Plus (More) : menu déroulant avec des options comme voir les paramètres d’impression, sélectionner et enregistrer le fichier modèle.
Enregistrer (Save) : bouton pour sauvegarder le modèle d’impression après modification.
Aperçu du modèle (Template Preview) : aperçu du modèle après modification sans sauvegarde.
Éditeur de modèle (Template Editor) : champ texte pour modifier le modèle.
Type de modèle (Template Type) : sélecteur pour définir le type de modèle.
Afficher l’entrée (Display Entry) : entrée affichée dans la zone d’aperçu.
Échelle d’affichage (Display Scale) : champ numérique pour modifier l’échelle de l’aperçu du modèle.
Indices de clés (Key Hints) : composant affichant les clés disponibles (ex : "doc.name", "doc.date", etc.) pouvant être utilisées dans le modèle.
Conseils pour créer des modèles
Voici quelques conseils pour vous aider à créer des modèles d’impression personnalisés.
Dupliquer les modèles préchargés
Si vous n’êtes pas familier avec HTML, CSS et la syntaxe des modèles Vue.js, créer un modèle personnalisé peut être un peu difficile.
Dans ce cas, nous vous recommandons de dupliquer l’un des modèles préchargés et de modifier la copie.
De cette manière, vous pouvez effectuer et appliquer de petites modifications, voir comment elles affectent l’aperçu, et construire étape par étape le modèle exactement comme vous le souhaitez.
Précautions lors de l’utilisation de tailwindcss
Certaines valeurs par défaut de tailwindcss (par exemple les couleurs) utilisées dans Frappe Books ont été modifiées via le fichier "tsconfig.js".
Comme ces valeurs peuvent changer, nous vous conseillons de ne pas vous fier aux styles tailwindcss modifiés. Ne pas suivre cette recommandation pourrait entraîner des modifications inattendues de vos modèles lors des mises à jour des valeurs par défaut.
Last updated