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

Comment modifier le style des Tree View dans Odoo.

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Comment modifier le style des Tree View dans Odoo.

Similaire à Comment modifier le style des Tree View dans Odoo. (20)

Comment modifier le style des Tree View dans Odoo.