Personnalisation de l'interface

Dokos propose dans ses Paramètres (via la barre de navigation) de personnaliser l'interface pour l'adapter au mieux à vos besoins.

Identité visuelle

• Remplacez le logo Dokos par le vôtre.
• Ajoutez un widget d'annonce pour diffuser des messages à toute l'équipe.

Tableaux de bord et statistiques

Dokos propose de nombreux outils de visualisation :

• Cartes statistiques (près de 100 préexistantes).
• Graphiques de tableau de bord.
• Cartes de résumé (particulièrement utiles pour les moyennes et grandes entreprises).

Types de documents personnalisés

Dokos vous offre la possibilité de créer vos propres types de documents adaptés à vos besoins spécifiques. Par exemple :

• Un document "annonce" pour publier des offres.
• Un formulaire web pour permettre des réservations.
• Des documents interconnectés pour suivre votre processus métier.

À noter : Les personnalisations que vous effectuez (ajout/suppression de champs) ne seront jamais écrasées lors des mises à jour.

Mises en page de type de document

Exemple — Bureau Moderne Bureau Moderne gère ses entrées de stock selon différents usages : transferts internes, réceptions fournisseur, expéditions. L'administrateur a créé une mise en page "Transfert interne" sur Entrée de stock. Depuis la barre de recherche, n'importe quel collaborateur peut taper "Transfert interne", sélectionner la mise en page et accéder directement à la liste des entrées de stock filtrées sur ce type d'opération, avec les champs et les libellés adaptés à ce contexte.

Les mises en page de type de document permettent de proposer des vues simplifiées ou contextualisées d'un même formulaire. Par exemple, une mise en page "Réception fournisseur" sur Entrée de stock n'affichera que les champs pertinents pour ce flux, avec des libellés adaptés au vocabulaire de l'équipe.

Rechercher une mise en page depuis la barre Awesome

Toutes les mises en page auxquelles vous avez accès sont désormais recherchables directement depuis la barre de recherche globale (⌘K / Ctrl+K ou icône loupe en haut à droite).

      
flowchart LR
    A[Saisie dans la barre Awesome] --> B{Correspond à
une mise en page ?}
    B -->|Oui| C[Résultat affiché
avec le titre de la mise en page]
    B -->|Non| D[Autres résultats
doctypes, documents…]
    C --> E[Clic → liste filtrée
du type de document de base]

    

1. Ouvrez la barre de recherche (⌘K / Ctrl+K).
2. Tapez le titre de la mise en page (ex. : "Transfert interne").
3. La mise en page apparaît dans les résultats.
4. Cliquez dessus : la liste du type de document de base s'ouvre, filtrée automatiquement selon la condition définie sur la mise en page.

Bon à savoir : Seules les mises en page portant sur des types de documents auxquels vous avez le droit d'accès en lecture apparaissent dans les résultats.

Navigation et fil d'Ariane

Lorsque vous naviguez dans une mise en page, le contexte est visible dans le fil d'Ariane en haut du formulaire. Le badge de la mise en page active y est affiché, ce qui permet de toujours savoir dans quel contexte vous travaillez sans encombrer l'en-tête du formulaire.

Si vous renommez un document ouvert sous une mise en page, le contexte de mise en page est automatiquement conservé après la redirection — vous restez dans la même vue.

Bouton "Aller à la liste"

Depuis le formulaire d'une mise en page, le bouton Aller à la liste vous ramène à la liste du type de document de base, avec les filtres issus de la condition de la mise en page déjà appliqués. Vous retrouvez ainsi exactement les documents correspondant à ce contexte.

Dispositions de liste personnalisées

Exemple — Maison Verte SARL La responsable commerciale de Maison Verte SARL consulte quotidiennement la liste des factures de vente. Elle a créé une disposition "Factures en attente de paiement" qui affiche uniquement les factures non réglées, avec les colonnes "Client", "Date d'échéance", "Montant dû" et "Mode de paiement". Elle a également trié la liste par date d'échéance croissante pour prioriser les relances. Grâce à cette disposition, elle retrouve instantanément ses factures en attente sans avoir à appliquer manuellement les filtres et colonnes chaque matin.

Dokos vous permet désormais de sauvegarder et restaurer des dispositions de liste qui combinent filtres, colonnes et tri. Ces dispositions sont accessibles depuis le menu Dispositions sauvegardées dans toute vue liste.

Créer une disposition

1. Dans une vue liste (ex. : Factures de vente), appliquez les filtres souhaités (ex. : Statut = "Non payé").
2. Cliquez sur le menu ⋮ (en haut à droite) puis sur Créer une disposition.
3. Un dialogue s'ouvre avec trois sections :
   • Informations : Saisissez un nom pour la disposition (ex. : "Factures en attente de paiement").
   • Filtres : Les filtres actuellement appliqués sont affichés. Vous pouvez en ajouter ou en supprimer.
   • Colonnes : Cliquez sur Ajouter des colonnes pour sélectionner les champs à afficher. Vous pouvez également réorganiser les colonnes par glisser-déposer.
   • Tri : Définissez l'ordre de tri (ex. : Date d'échéance croissante).
4. Cliquez sur Enregistrer pour créer la disposition.

      
flowchart TD
    A[Appliquer des filtres] --> B[Ajouter/modifier des colonnes]
    B --> C[Définir le tri]
    C --> D[Enregistrer la disposition]
    D --> E[Disposition disponible dans le menu "Dispositions sauvegardées"]

    

Appliquer une disposition

1. Dans une vue liste, cliquez sur le menu ⋮ puis sur Dispositions sauvegardées.
2. Sélectionnez la disposition souhaitée dans la liste.
3. La vue liste est instantanément mise à jour avec les filtres, colonnes et tri de la disposition.

Astuce : Vous pouvez ajuster la largeur des colonnes directement dans la vue liste. Ces modifications sont automatiquement sauvegardées dans la disposition active.

Gérer les dispositions

1. Cliquez sur le menu ⋮ puis sur Gérer les dispositions.
2. Une fenêtre s'ouvre avec la liste de toutes vos dispositions pour le type de document courant.
3. Pour chaque disposition, vous pouvez :
   • Modifier : Mettre à jour les filtres, colonnes ou tri.
   • Dupliquer : Créer une copie de la disposition pour la personnaliser.
   • Supprimer : Supprimer définitivement la disposition.

Bon à savoir :

• Les dispositions sont personnelles : chaque utilisateur peut créer ses propres dispositions sans affecter les autres.
• Une disposition peut être marquée comme par défaut pour un type de document. Elle sera automatiquement appliquée à l'ouverture de la liste.
• Vous pouvez réinitialiser les paramètres de la vue liste pour revenir à la configuration par défaut.

Réinitialiser les paramètres de vue liste

Si vous souhaitez revenir aux paramètres par défaut de la vue liste (filtres, colonnes, tri) :

1. Cliquez sur le menu ⋮ puis sur Réinitialiser les paramètres.
2. La vue liste est restaurée avec les filtres, colonnes et tri par défaut.

Totaux et montants sur les liens du tableau de bord

Exemple — Maison Verte SARL Sur la fiche client de Maison Verte SARL, le tableau de bord affiche non seulement le nombre de factures de vente, mais aussi le total facturé (4 800,00 €) et le montant encore dû (1 200,00 €). Le commercial voit en un coup d'œil la situation financière du client sans ouvrir chaque facture.

Le tableau de bord d'une fiche (client, fournisseur, article…) affiche des liens vers les documents liés avec, en option, des totaux monétaires calculés à la volée. Cette configuration est réservée aux administrateurs et développeurs : elle se définit dans le fichier de configuration du tableau de bord du type de formulaire concerné.

"summary_fields": {
    "Sales Invoice": {
        "field": "net_total",
        "label": _("Total Billed"),
        "fieldtype": "Currency",
        "open_field": "outstanding_amount",
        "open_label": _("Outstanding"),
        "open_filters": {"docstatus": 1, "outstanding_amount": [">", 0]},
    },
}

Icônes sur les types de formulaires

Exemple — Dupont Conseil L'administrateur de Dupont Conseil crée un type de formulaire personnalisé "Dossier client" et lui attribue l'icône folder. Partout où un lien vers ce formulaire apparaît dans l'interface — champs de recherche, listes liées, résultats de recherche globale — une petite icône dossier s'affiche à gauche pour distinguer visuellement ce type de document.

Chaque type de formulaire dans Dokos peut recevoir une icône issue de la bibliothèque d'icônes Frappe. Cette icône s'affiche à gauche des champs de saisie qui pointent vers ce formulaire, aidant les utilisateurs à identifier le type de document associé sans lire le nom complet.

Modification en masse dans les tables enfants

Exemple — Maison Verte SARL Un gestionnaire saisit un bon de commande pour Maison Verte SARL avec vingt lignes d'articles. Il réalise que la date de livraison prévue est incorrecte sur dix d'entre elles. Au lieu de corriger chaque ligne une par une, il coche les dix lignes concernées, clique sur Modifier, saisit la nouvelle date une seule fois, et toutes les lignes sélectionnées sont mises à jour instantanément.

Lorsqu'un formulaire contient une table enfant (lignes d'articles, plannings, etc.), il est possible de modifier plusieurs lignes simultanément. Cette fonctionnalité évite les saisies répétitives et réduit les risques d'erreur.

Comment l'utiliser

1. Ouvrez le document concerné (bon de commande, facture, feuille de temps…).
2. Dans la table enfant, cochez les cases à gauche des lignes à modifier.
3. Un bouton Modifier (icône crayon) apparaît dans la barre d'outils de la table.
4. Cliquez sur Modifier : une fenêtre s'ouvre avec les champs modifiables.
5. Renseignez uniquement les champs à changer — les champs laissés vides ne seront pas affectés.
6. Cliquez sur Mettre à jour : toutes les lignes sélectionnées sont mises à jour dans le formulaire.
7. Enregistrez le document pour valider les changements.

Bon à savoir : Sur un document déjà soumis, seuls les champs autorisés à la modification après soumission apparaissent dans la fenêtre de modification en masse.

Activer ou désactiver cette option

Par défaut, la modification en masse est activée sur toutes les tables enfants. Un administrateur peut la désactiver champ par champ depuis Personnaliser le formulaire :

1. Allez dans Personnaliser le formulaire (menu Configuration ou barre de recherche).
2. Sélectionnez le type de formulaire concerné (ex. Bon de commande).
3. Repérez le champ de type Table correspondant à la table enfant.
4. Décochez l'option Autoriser la modification en masse.
5. Cliquez sur Mettre à jour.

Largeur des colonnes dans la vue liste

Exemple — Bureau Moderne La responsable achats de Bureau Moderne consulte la liste des bons de commande. La colonne "Fournisseur" est trop étroite et tronque les noms. Elle fait glisser le bord de la colonne vers la droite pour l'élargir : la largeur est sauvegardée automatiquement et restera en place à chaque prochaine ouverture de la liste.

Dans toutes les vues liste de Dokos, vous pouvez ajuster la largeur de chaque colonne selon vos préférences. Ces réglages sont personnels et persistent d'une session à l'autre.

Trois façons d'ajuster les largeurs

      
flowchart LR
    A[Largeur définie
sur le champ] -->|priorité basse| B[Paramètres
de la vue liste]
    B -->|priorité moyenne| C[Glisser-déposer
dans l'en-tête]
    C -->|priorité haute| D[Largeur affichée]

    

1. Glisser-déposer directement dans l'en-tête de liste

C'est la méthode la plus rapide pour un ajustement ponctuel :

1. Positionnez le pointeur sur le séparateur vertical entre deux en-têtes de colonne — une fine poignée apparaît.
2. Cliquez et faites glisser vers la gauche ou la droite pour modifier la largeur.
3. Relâchez : la nouvelle largeur est enregistrée automatiquement dans les Paramètres de la vue liste.

Bon à savoir :

• Les poignées de redimensionnement sont toujours légèrement visibles au repos. Survolez la ligne d'en-têtes pour les faire apparaître toutes en même temps.
• Double-cliquez sur le bord de l'en-tête pour ajuster automatiquement la largeur au contenu le plus large de la colonne.
• Survolez directement une poignée pour la mettre en évidence.

2. Paramètres de la vue liste

Pour régler les largeurs de plusieurs colonnes à la fois :

1. Cliquez sur le menu ⋮ (en haut à droite de la liste) puis sur Paramètres de la vue liste.
2. Dans le dialogue, la colonne Largeur (px) apparaît à côté de chaque champ affiché.
3. Saisissez la valeur souhaitée en pixels (minimum 50 px, maximum 400 px).
4. Cliquez sur Enregistrer.

3. Définition sur le champ (administrateurs)

Un administrateur peut définir une largeur par défaut directement sur un champ depuis Personnaliser le formulaire. Cette valeur s'applique à tous les utilisateurs qui n'ont pas encore défini leur propre réglage.

Contraintes

Personnalisation des grilles dans les formulaires

Nouveauté — Maison Verte SARL Un commercial de Maison Verte SARL travaille sur un bon de commande contenant 20 lignes d'articles. Pour modifier les détails d'une ligne sans perdre le contexte du document principal, il clique sur le bouton Ouvrir à droite de la ligne. Un panneau latéral s'ouvre à droite de l'écran, affichant le formulaire complet de la ligne. Il peut ainsi ajuster les quantités ou les dates de livraison tout en gardant une vue d'ensemble sur le bon de commande. De plus, il redimensionne la colonne "Description" pour afficher le texte complet sans troncature.

Les grilles dans les formulaires (tables enfants) bénéficient de deux améliorations majeures pour améliorer votre productivité :

Ouvrir les lignes dans un panneau latéral

Les lignes de grille s'ouvrent désormais dans un panneau latéral fixe qui glisse depuis la droite de l'écran, remplaçant l'ancienne fenêtre modale centrée. Ce changement offre plusieurs avantages :

• Contexte préservé : Le document principal reste visible en arrière-plan.
• Navigation fluide : Utilisez les boutons Précédent et Suivant pour naviguer entre les lignes sans fermer le panneau.
• Fermeture intuitive : Cliquez en dehors du panneau ou appuyez sur Échap pour le fermer.

Redimensionner les colonnes

Vous pouvez désormais ajuster la largeur des colonnes directement depuis l'interface :

1. Positionnez le curseur sur le bord droit de l'en-tête de colonne.
2. Une poignée de redimensionnement apparaît.
3. Cliquez et faites glisser pour ajuster la largeur.
4. La nouvelle largeur est sauvegardée automatiquement pour votre utilisateur.

Astuce : Les largeurs sont spécifiques à chaque grille (ex. : grille des articles sur Bon de commande) et persistent entre les sessions.

Pour une documentation complète sur la personnalisation des grilles, consultez la page dédiée :

Masquer des colonnes dans la vue liste d'une grille par script

Exemple — Maison Verte SARL Sur le bon de commande de Maison Verte SARL, la grille des articles affiche par défaut la colonne "Taux unitaire". Un développeur souhaite la masquer uniquement dans cette grille, sans affecter d'autres formulaires utilisant le même type de ligne d'article. Grâce à set_column_disp_in_list_view, la colonne disparaît de la vue liste de cette grille uniquement, et reste visible partout ailleurs.

Dans un formulaire Dokos, une grille (table enfant) peut afficher ses lignes sous deux formes : la vue liste (lecture seule, affichage condensé des lignes) et la vue édition (formulaire d'une ligne). Il est parfois utile de masquer une colonne dans la vue liste d'une grille précise, sans impacter les autres grilles qui partagent le même type de document enfant.

cur_frm.fields_dict["nom_de_la_table"].grid.set_column_disp_in_list_view(fieldname, show);

// Dans le script client du bon de commande
frappe.ui.form.on("Sales Order", {
    refresh(frm) {
        frm.fields_dict["items"].grid.set_column_disp_in_list_view("rate", false);
    }
});

Migration vers le thème Espresso

Dokos migre progressivement vers le thème Espresso, un système de design unifié qui harmonise l'apparence de toutes les applications (Dokos, HRMS, Payments, etc.). Cette migration impacte principalement :

• Les couleurs : Les variables CSS comme --primary, --success, --danger sont redéfinies pour correspondre à la palette Espresso.
• Les composants : Les badges, boutons, fil d'Ariane, avatars et notifications (toasts) adoptent un style standardisé.
• Les espacements et radius : Les valeurs par défaut pour les marges, paddings et coins arrondis sont mises à jour.

Ce qui change pour les utilisateurs

• Nouvelle apparence : L'interface devient plus moderne et cohérente, avec des couleurs plus douces et des espacements optimisés.
• Badges : Les anciennes "pilules d'indicateur" (indicator-pill) sont remplacées par des badges Espresso, plus flexibles et accessibles.
• Fil d'Ariane : Le composant breadcrumbs adopte un style plus épuré et intégré au thème.
• Avatars : Les avatars des utilisateurs et contacts sont désormais stylisés selon les normes Espresso.
• Toasts : Les notifications temporaires (toasts) bénéficient d'animations fluides et d'un design modernisé.
• Compatibilité : Les anciennes personnalisations (couleurs, styles) peuvent nécessiter des ajustements pour rester fonctionnelles.

Ce qui change pour les administrateurs

• Personnalisation : Les paramètres de thème (couleurs, typographie) sont désormais centralisés dans Paramètres > Personnalisation > Thème Espresso.
• Migration : Les anciennes variables CSS (ex. : --border-radius) sont dépréciées au profit des nouvelles (ex. : --radius-md).

Pour une documentation complète sur le thème Espresso et ses options de personnalisation, consultez la page dédiée :

Personnaliser les paramètres des types de documents

Dokos propose désormais un dialogue centralisé de paramètres des types de documents (DocType Settings) accessible depuis la barre d'outils d'un formulaire. Ce dialogue regroupe toutes les configurations liées à un type de document (ex. : Bon de commande, Facture de vente) dans une seule interface, ce qui simplifie la gestion des paramètres et évite de naviguer entre plusieurs écrans.

Accéder au dialogue de paramètres

1. Ouvrez un document de n'importe quel type (ex. : Facture de vente, Bon de commande).
2. Cliquez sur le bouton ⋮ (Plus d'options) dans la barre d'outils en haut à droite du formulaire.
3. Sélectionnez Paramètres du type de document dans le menu.

Bon à savoir : Le dialogue de paramètres est un singleton : si vous l'ouvrez plusieurs fois pour le même type de document, il conserve votre dernière position et vos modifications en cours.

Onglets disponibles

Le dialogue de paramètres est organisé en onglets thématiques. Voici les principaux onglets accessibles aux utilisateurs (les onglets techniques comme Permissions ou Recherche globale sont réservés aux administrateurs) :

Onglet Général — Champs exposés

L'onglet Général expose les champs des paramètres Single (ex. : Paramètres de vente, Paramètres de stock) qui sont liés au type de document courant. Ces champs sont définis par les administrateurs via un DocType Settings Map.

Exemple — Maison Verte SARL Dans les paramètres de vente de Maison Verte SARL, le champ "Délai de livraison par défaut" est exposé dans l'onglet Général des paramètres du Bon de commande. L'utilisateur peut ainsi modifier ce délai directement depuis le dialogue de paramètres, sans quitter le formulaire du bon de commande.

Onglet Nommage — Configurer le schéma de nommage

L'onglet Nommage permet de configurer le schéma de nommage des documents avec une prévisualisation en temps réel du résultat.

1. Sélectionnez un schéma de nommage dans la liste déroulante (ex. : Naming Series, Prompt, Format).
2. Selon le schéma choisi, des options supplémentaires apparaissent :
   • Naming Series : Sélectionnez une série dans la liste (ex. : SO-.YYYY.-).
   • Format : Saisissez un format personnalisé en utilisant des champs du document (ex. : {customer_name}-{transaction_date}).
3. La prévisualisation affiche un exemple du nom généré en fonction des données du document courant.
4. Cliquez sur Enregistrer pour appliquer le schéma.

Bon à savoir : Les modifications du schéma de nommage s'appliquent uniquement aux nouveaux documents créés après l'enregistrement.

Onglet Format d'impression — Gérer les formats

L'onglet Format d'impression permet de parcourir, prévisualiser et définir le format d'impression par défaut pour le type de document.

• Liste des formats : Affiche tous les formats d'impression disponibles pour le type de document.
• Prévisualisation : Cliquez sur un format pour afficher une prévisualisation dans le panneau de droite.
• Définir par défaut : Sélectionnez un format et cliquez sur Définir par défaut pour l'appliquer à tous les documents du type.

Exemple — Bureau Moderne Bureau Moderne utilise un format d'impression personnalisé pour ses factures de vente. Depuis l'onglet Format d'impression des paramètres de la Facture de vente, l'utilisateur peut prévisualiser ce format et le définir comme format par défaut en un clic.

Bon à savoir : Les prévisualisations des formats d'impression sont régénérées de manière asynchrone après chaque enregistrement pour garantir des performances optimales.

Bonnes pratiques

• Testez les modifications : Avant d'appliquer des changements (ex. : schéma de nommage, format d'impression), testez-les dans un environnement de développement ou de test.
• Permissions : Seuls les utilisateurs ayant les permissions appropriées peuvent accéder à certains onglets (ex. : Nommage, Format d'impression). Contactez votre administrateur si un onglet est inaccessible.
• Documentation : Consultez la documentation dédiée pour en savoir plus sur les fonctionnalités avancées du dialogue de paramètres.

Personnalisation avancée des boutons et badges

Pour découvrir comment personnaliser les boutons et badges dans l'interface de Dokos, consultez le guide dédié :