View
304
Download
3
Category
Preview:
Citation preview
Microcom - Meetup Odoo Technique
Tree view
Comment modifier le style des rangées dans un tree view
Microcom - Meetup Odoo Technique
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.
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
Microcom - Meetup Odoo Technique 5
Microcom - Meetup Odoo Technique
Le problème?
C’est limité…
6
Microcom - Meetup Odoo Technique
Solution #1
Un petit “hack” vite fait, bien fait.
7
Microcom - Meetup Odoo Technique
La manière dont Odoo traite les “decorations”
• addons/web/static/src/xml/base.xml (~ ligne 431)
8
Microcom - Meetup Odoo Technique
• addons/web/static/src/js/views/list_view.js (~ ligne 189)
9
Qu’est-ce que “compute_decoration_classnames”
Microcom - Meetup Odoo Technique
Qu’est-ce que “this.decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 226)
10
Microcom - Meetup Odoo Technique
Qu’est-ce que “row_decoration”
• addons/web/static/src/js/views/list_view.js (~ ligne 24)
11
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
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
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 1
• Dans une view de votre module:
14
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
Microcom - Meetup Odoo Technique
Overloader list_view.js étape 3
• Copier la fonction “compute_decoration_classnames” et l’ajuster à nos besoins.
16
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
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
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
Microcom - Meetup Odoo Technique
Ajouter notre fichier css à la view
• Ne pas oublier de mettre les paths apropriés à votre projet...
20
Microcom - Meetup Odoo Technique
Voilà
• Vous pouvez maintenant utiliser vos nouveaux attributs dans un tree view.
21
Microcom - Meetup Odoo Technique
Un beau sapin de noël!
22
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
Microcom - Meetup Odoo Technique 24
Voici un exemple d’utilisation
Microcom - Meetup Odoo Technique
Désolé de l’atrocité… je n’avais pas trop d’inspiration...
25
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
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
Recommended