Personnalisation de l'interface

Dokos vous permet de personnaliser l'interface pour l'adapter au mieux à vos besoins. Les outils de personnalisation sont regroupés dans l'espace de travail Développement, ouvert depuis l'icône Administration de la grille d'applications de l'accueil.

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

L'espace de travail Développement affiche les raccourcis Type de document et Module Def, puis des cartes de liens :

• Vues : Rapport, Tableau de bord, Format d'impression, Page, Espace de travail, Graphique du tableau de bord.
• Personnalisations : Personnaliser un formulaire, Champ personnalisé, Traduction personnalisée, Paramètres de la barre de navigation.
• Script : Script Serveur (Python), Script client, Type de tâche de fond programmée.
• Modules, Paquets et Journaux système.

Pour modifier l'espace de travail, utilisez le menu … en haut à droite.

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 de loupe de la barre latérale).

      
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 {n} lignes apparaît dans la barre d'outils de la table.
4. Cliquez sur ce bouton : la fenêtre « Modifier en masse » 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 chaque type de document enfant. Un administrateur peut la désactiver pour un type de ligne depuis Personnaliser un formulaire :

1. Ouvrez Personnaliser un formulaire (carte Personnalisations de l'espace de travail Développement, ou recherche avec Ctrl+K).
2. Choisissez le type de document enfant (ex. Sales Order Item, les lignes de la commande client), pas le document parent.
3. Décochez « Autoriser les modifications en masse ».
4. 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 enregistrée et reste en place à chaque ouverture de la liste.

Dans toutes les vues liste de Dokos, vous pouvez ajuster la largeur de chaque colonne. Avec une disposition de liste active que vous pouvez modifier, la largeur est enregistrée dans la disposition. Sinon, elle est enregistrée dans les paramètres de liste du type de document et vaut pour tous les utilisateurs.

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 liste (réservé au rôle System Manager).
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 sur un champ (propriété « Largeur ») depuis Personnaliser un formulaire. Elle s'applique quand aucune largeur n'est enregistrée pour la colonne.

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.

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 couleurs passent par des jetons nommés selon leur rôle : --surface-* (fonds), --ink-* (textes), --outline-* (bordures).
• 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

• CSS personnalisé : Utilisez les jetons Espresso (--surface-*, --ink-*, --outline-*, --radius-*) plutôt que des couleurs en dur. Il n'y a pas d'écran de réglage du thème : les jetons se changent par CSS.

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

• Thème Espresso