Le document traite des modifications de style des rangées dans les vues en arbre d'Odoo, en évoquant les différences entre les versions avant et après 9.0. Il présente deux solutions : un 'hack' pour personnaliser les décorations CSS et l'utilisation d'un module externe pour une coloration dynamique des champs. La morale souligne l'importance de rechercher des solutions existantes dans les dépôts de l'oca avant de créer des hacks personnalisés.

1. Microcom - Meetup Odoo Technique
Tree view
Comment modifier le style des
rangées dans un tree view

2. Microcom - Meetup Odoo Technique
Avant 9.0
2

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

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

5. Microcom - Meetup Odoo Technique 5

6. Microcom - Meetup Odoo Technique
Le problème?
C’est limité…
6

7. Microcom - Meetup Odoo Technique
Solution #1
Un petit “hack” vite fait, bien fait.
7

8. Microcom - Meetup Odoo Technique
La manière dont Odoo traite les “decorations”
• addons/web/static/src/xml/base.xml (~ ligne 431)
8

9. Microcom - Meetup Odoo Technique
• addons/web/static/src/js/views/list_view.js (~ ligne 189)
9
Qu’est-ce que “compute_decoration_classnames”

10. Microcom - Meetup Odoo Technique
Qu’est-ce que “this.decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 226)
10

11. Microcom - Meetup Odoo Technique
Qu’est-ce que “row_decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 24)
11

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

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

14. Microcom - Meetup Odoo Technique
Overloader list_view.js étape 1
• Dans une view de votre module:
14

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

16. Microcom - Meetup Odoo Technique
Overloader list_view.js étape 3
• Copier la fonction “compute_decoration_classnames” et l’ajuster à nos besoins.
16

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

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

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

20. Microcom - Meetup Odoo Technique
Ajouter notre fichier css à la view
• Ne pas oublier de mettre les paths apropriés à votre projet...
20

21. Microcom - Meetup Odoo Technique
Voilà
• Vous pouvez maintenant utiliser vos nouveaux attributs dans un tree view.
21

22. Microcom - Meetup Odoo Technique
Un beau sapin de noël!
22

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

24. Microcom - Meetup Odoo Technique 24
Voici un exemple d’utilisation

25. Microcom - Meetup Odoo Technique
Désolé de l’atrocité… je n’avais pas trop d’inspiration...
25

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

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