![Page 1: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/1.jpg)
Microcom - Meetup Odoo Technique
Tree view
Comment modifier le style des rangées dans un tree view
![Page 2: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/2.jpg)
Microcom - Meetup Odoo Technique
Avant 9.0
2
![Page 3: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/3.jpg)
Microcom - Meetup Odoo Technique 3
• Un tree view standard.
• L’attribut “colors” dans la balise “tree” avec un genre de dictionnaire: color:expr[,. . .].
• “color” peut être n’importe quel couleur CSS.
• “expr” doit être une expression python qui évalue à vrai ou à faux à partir des champs de l’enregistrement traitée.
![Page 4: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/4.jpg)
Microcom - Meetup Odoo Technique
Après 9.0
• L’attribut “colors” est fonctionnel, mais est désuet "deprecated" et risque de disparaître.
• Il a été remplacé par “decoration-{name}” ou name peut être:
• bf (caractères gras)• it (caractères italic)• couleurs bootstrap:
– danger– info– muted– primary– success– warning
• Chaque attribut “decoration-{name}” contient une seule expression, contrairement à l’attribut “colors”.
4
![Page 5: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/5.jpg)
Microcom - Meetup Odoo Technique 5
![Page 6: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/6.jpg)
Microcom - Meetup Odoo Technique
Le problème?
C’est limité…
6
![Page 7: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/7.jpg)
Microcom - Meetup Odoo Technique
Solution #1
Un petit “hack” vite fait, bien fait.
7
![Page 8: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/8.jpg)
Microcom - Meetup Odoo Technique
La manière dont Odoo traite les “decorations”
• addons/web/static/src/xml/base.xml (~ ligne 431)
8
![Page 9: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/9.jpg)
Microcom - Meetup Odoo Technique
• addons/web/static/src/js/views/list_view.js (~ ligne 189)
9
Qu’est-ce que “compute_decoration_classnames”
![Page 10: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/10.jpg)
Microcom - Meetup Odoo Technique
Qu’est-ce que “this.decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 226)
10
![Page 11: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/11.jpg)
Microcom - Meetup Odoo Technique
Qu’est-ce que “row_decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 24)
11
![Page 12: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/12.jpg)
Microcom - Meetup Odoo Technique
Bref
• Si l’expression est évaluée à vrai pour la rangée traitée, Odoo ajoute une classe css ayant le format: text-{name}
12
![Page 13: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/13.jpg)
Microcom - Meetup Odoo Technique
Idée!
• “Overloader” la classe list_view.js
• Ajouter des éléments dans le tableau “row-decoration”
• Modifier la fonction “compute_decoration_classnames” pour traiter nos nouveaux éléments
• Créer notre propre fichier css pour styliser nos nouvelles classes
13
![Page 14: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/14.jpg)
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 1
• Dans une view de votre module:
14
![Page 15: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/15.jpg)
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 2
• Créer un fichier sous nom_module/static/src/js/mon_fichier.js et “étendre” listView
15
![Page 16: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/16.jpg)
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 3
• Copier la fonction “compute_decoration_classnames” et l’ajuster à nos besoins.
16
![Page 17: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/17.jpg)
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 4
• Copier le tableau “row_decoration” et ajouter nos décorations customs. (ajouter avant le include)
17
![Page 18: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/18.jpg)
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 5
• Copier la fonction “load_list” même si on ne la modifie pas, car on veut qu’elle utilise notre nouveau tableau “row_decoration”. (ici, la fonction n’est pas en entier, faute d’espace….)
18
![Page 19: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/19.jpg)
Microcom - Meetup Odoo Technique
Créer notre fichier css
• créer un fichier sous nom_module/static/src/css/mon_fichier.css et appliquer un style à nos nouvelles classes.
19
![Page 20: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/20.jpg)
Microcom - Meetup Odoo Technique
Ajouter notre fichier css à la view
• Ne pas oublier de mettre les paths apropriés à votre projet...
20
![Page 21: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/21.jpg)
Microcom - Meetup Odoo Technique
Voilà
• Vous pouvez maintenant utiliser vos nouveaux attributs dans un tree view.
21
![Page 22: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/22.jpg)
Microcom - Meetup Odoo Technique
Un beau sapin de noël!
22
![Page 23: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/23.jpg)
Microcom - Meetup Odoo Technique
solution #2
• Utiliser le module “web_tree_dynamic_colored_field” de l’OCA. https://github.com/OCA/web/tree/9.0/web_tree_dynamic_colored_field
• À noter qu’il n’est pas encore porté à la version 9.0 … (en date du 27/05/2016)
• Permet la coloration du texte avec l’attribut “fg-color” et la coloration du background avec l’attribut “bg-color”
• Ils s’utilisent de la même manière que l’attribut “colors” de la version 8.0 à une différence près:– Ils s’utilisent dans la balise “field” et non dans la balise “tree”...
• Avantage: On peut colorer seulement une partie d’une rangée (plus de contrôle / granularité)• Inconvénient: Si on veut colorer toute la rangée, on doit répéter l’attribut dans tous les fields
23
![Page 24: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/24.jpg)
Microcom - Meetup Odoo Technique 24
Voici un exemple d’utilisation
![Page 25: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/25.jpg)
Microcom - Meetup Odoo Technique
Désolé de l’atrocité… je n’avais pas trop d’inspiration...
25
![Page 26: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/26.jpg)
Microcom - Meetup Odoo Technique
Morale de l’histoire
• Quand on a un besoin spécifique: toujours regarder les repos de l’OCA pour voir s’il n’existerait pas déjà un module qui pourrait répondre à vos besoins.
• Mais, parfois, un petit “hack” est nécessaire pour arriver a un résultat plus personnalisé...
26
![Page 27: Comment modifier le style des Tree View dans Odoo](https://reader035.vdocuments.fr/reader035/viewer/2022062310/58f29b351a28ab76268b4577/html5/thumbnails/27.jpg)
Microcom - Meetup Odoo Technique
• Les sources du module sont accessibles sur github:
https://github.com/microcom/Odoo_Basic_AddOns/tree/9.0/custom_treeview_colors
Merci
27