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.

État vide de l'Awesomebar

Exemple — Maison Verte SARL Un nouvel utilisateur se connecte pour la première fois sur le site Dokos de Maison Verte SARL. Il ouvre la barre Awesome (⌘K / Ctrl+K) pour naviguer, mais aucun historique de navigation n'existe encore. Un message d'aide s'affiche alors avec une illustration et des suggestions de commandes pour l'aider à démarrer.

Lorsque la barre Awesome ne contient aucun historique de navigation (par exemple sur un site fraîchement installé ou pour un nouvel utilisateur), un état vide s'affiche automatiquement pour guider les utilisateurs.

Ce qui s'affiche

• Une illustration visuelle pour rendre l'interface plus accueillante.
• Des suggestions de commandes utiles pour découvrir les fonctionnalités de l'Awesomebar :
  • new ... : pour créer rapidement un nouveau document (ex. new Facture de vente).
  • ... in ... : pour filtrer des listes par contexte (ex. Factures de vente in Maison Verte SARL).
  • ⌘G : rappel du raccourci pour la recherche globale.

      
flowchart TD
    A[Ouverture de l'Awesomebar] --> B{Historique de navigation
existe ?}
    B -->|Non| C[Affichage de l'état vide
avec illustration et suggestions]
    B -->|Oui| D[Affichage des liens
récents et fréquents]
    C --> E[Saisie dans la barre de recherche]
    E --> D

    

Comportement dynamique

• L'état vide disparaît automatiquement dès que l'utilisateur commence à saisir du texte dans la barre de recherche.
• Il ne réapparaît plus une fois que l'utilisateur a un historique de navigation (liens récents ou fréquents).
• L'illustration et les suggestions sont cohérentes avec le style visuel de Dokos, utilisant les mêmes éléments que l'état vide de la recherche globale.

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

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 et autres éléments d'interface 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.
• 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 :