Comment modifier le style des Tree View dans Odoo

Microcom - Meetup Odoo Technique

Tree view

Comment modifier le style des rangées dans un tree view


Avant 9.0

2

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.


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



Le problème?

C’est limité…

6


Solution #1

Un petit “hack” vite fait, bien fait.

7


La manière dont Odoo traite les “decorations”

• addons/web/static/src/xml/base.xml (~ ligne 431)

8


• addons/web/static/src/js/views/list_view.js (~ ligne 189)

9

Qu’est-ce que “compute_decoration_classnames”


Qu’est-ce que “this.decoration”


10


Qu’est-ce que “row_decoration”


11


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


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


Overloader list_view.js étape 1

• Dans une view de votre module:

14



• Créer un fichier sous nom_module/static/src/js/mon_fichier.js et “étendre” listView

15



• Copier la fonction “compute_decoration_classnames” et l’ajuster à nos besoins.

16



• Copier le tableau “row_decoration” et ajouter nos décorations customs. (ajouter avant le include)

17



• 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


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


Ajouter notre fichier css à la view

• Ne pas oublier de mettre les paths apropriés à votre projet...

20


Voilà

• Vous pouvez maintenant utiliser vos nouveaux attributs dans un tree view.

21


Un beau sapin de noël!

22


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


Voici un exemple d’utilisation


Désolé de l’atrocité… je n’avais pas trop d’inspiration...

25


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


• Les sources du module sont accessibles sur github:

https://github.com/microcom/Odoo_Basic_AddOns/tree/9.0/custom_treeview_colors

Merci

27

Software

Comment modifier le style des Tree View dans Odoo