-
+ ...
+
-
+ ...
+
-
+ ...
+
-
+ ...
+
-
+ ...
+
Colorize field in tree views
!! source digest: sha256:9421f600f808456315bd58fa3ad58e5d8790f99fb1f0809e81ce7bb0ef0774b1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
This module aims to add support for dynamically coloring fields in tree +
This module aims to add support for dynamically coloring fields in list view according to data in the record.
Features
- Add attribute bg_color on field’s options to color background -of a cell in tree view +of a cell in list view
- Add attribute fg_color on field’s options to change text color -of a cell in tree view +of a cell in list view +
- Add attribute bg_color_field on list’s colors to change +background color of the entire row in list view (*) +
- Add attribute fg_color_field on list’s colors to change text +color of the entire row in list view (*)
(*) This functionality only works for a list defined in a form. (Since +13.0, the colors attribute is no longer in the RelaxNG schema of the +list view, so we can’t use it like before, but it looks like the RNG is +not checked for embedded list.)
+
+
+
Testing
+Some views are overriden for demoing this module functionnalities:
+-
+
- On the Users list view: The name and login_date fields are +colored according to conditions written in view definition. +
- On the Groups form view > “Access Rights”: By renaming the rule name +to a color (red, blue, yellow, #00FDF0), the entire row background +color is immediatly updated. +
- On the System Parameters list view:
-
+
- For the key field: Its content is the text color, the value +field is its background color. +
- For the value field: Its content is the text color, the +value field is its background color. +
+
Table of contents
Usage
+
+
+Using view conditions
-
-
In the tree view declaration, put +
In the list view declaration, put options='{"bg_color": "red: customer==True"} attribute in the field tag:
--... -<field name="arch" type="xml"> - <tree string="View name"> - ... - <field name="name" options='{"bg_color": "red: customer == True"}'/> - ... - </tree> -</field> -... - -With this example, column which renders 'name' field will have its **background** colored in red on customer records. ++... +<field name="arch" type="xml"> + <list string="View name"> + ... + <field name="name" options='{"bg_color": "red: customer == True"}'/> + ... + </list> +</field> +...
+With this example, column which renders ‘name’ field will have its +background colored in red on customer records.
-In the tree view declaration, put +
In the list view declaration, put options='{"fg_color": "white:customer == True"}' attribute in the field tag:
--... -<field name="arch" type="xml"> - <tree string="View name"> - ... - <field name="name" options='{"fg_color": "white:customer == True"}'/> - ... - </tree> -</field> -... - -With this example, column which renders 'name' field will have its **text** colored in white on customer records. ++... +<field name="arch" type="xml"> + <list string="View name"> + ... + <field name="name" options='{"fg_color": "white:customer == True"}'/> + ... + </list> +</field> +...
+With this example, column which renders ‘name’ field will have its +text colored in white on customer records.
If you want to use more than one color, you can split the attributes using ‘;’:
-
-
options='{"fg_color": "red:red_color == True; green:green_color == True"}'
-Example:
... - <field name="arch" type="xml"> - <tree string="View name"> - ... - <field name="name" options='{"fg_color": "red:red_color == True; green:green_color == True"}'/> - ... - </tree> - </field> - ... +<field name="arch" type="xml"> + <list string="View name"> + ... + <field name="name" options='{"fg_color": "red:red_color == True; green:green_color == True"}'/> + ... + </list> +</field> +...-
-
-
Can use strings too… In the tree view declaration, put +
+Can use strings too… In the list view declaration, put options="{'fg_color': 'green:customer_state == \'success\''}" attribute in the field tag:
--... -<field name="arch" type="xml"> - <tree string="View name"> - ... - <field name="name" options="{'fg_color': 'green:customer_state == \'success\''}"/> - ... - </tree> -</field> -... ++... +<field name="arch" type="xml"> + <list string="View name"> + ... + <field name="name" options="{'fg_color': 'green:customer_state == \'success\''}"/> + ... + </list> +</field> +...
Usage
the options doesn’t follow the JSON format, the options string will be evaluated using py.eval()
+
Using view fields
+-
+
In the list view declaration, put +options='{"bg_color": "my_color"} attribute in the field tag:
++... +<field name="arch" type="xml"> + <list string="View name"> + ... + <field name="my_color" column_invisible="1"/> + <field name="name" options='{"bg_color": "my_color"}'/> + ... + </list> +</field> +... +
+With this example, the content of the field named my_color will be +used to populate the background-color CSS value. Use a compute +field to return whichever color you want depending on the other record +values.
+
+
-
Known issues / Roadmap
+Known issues / Roadmap
-
-
- Before version 13.0, this module had a feature allowing to change the -color of a line depending on a field, using a colors attribute -with the name of the field on the <tree> element. Since 13.0, the -colors attribute is no longer in the RelaxNG schema of the tree -view, so we can’t use it anymore. This feature has then been dropped, -but could be reimplement in another way.
- Since version 17.0 coloring is written into style attribute of (td) element
-
Bug Tracker
+Bug Tracker
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us to smash it by providing a detailed and welcomed @@ -488,7 +534,7 @@
Bug Tracker
Do not contact contributors directly about support or help with technical issues.
@@ -508,6 +554,7 @@ Phuc Tran Thanh <phuc@trobz.com>
Sylvain LE GAL <https://twitter.com/legalsylvain>
Jurgis Pralgauskis <jurgis@versada.eu>
+Yann Papouin <ypa@decgroupe.com>
Contributors
diff --git a/web_tree_dynamic_colored_field/static/src/js/list_renderer.esm.js b/web_tree_dynamic_colored_field/static/src/js/list_renderer.esm.js
index 76612d4cb711..b046498b9e84 100644
--- a/web_tree_dynamic_colored_field/static/src/js/list_renderer.esm.js
+++ b/web_tree_dynamic_colored_field/static/src/js/list_renderer.esm.js
@@ -3,6 +3,40 @@ import {evaluateBooleanExpr} from "@web/core/py_js/py";
import {patch} from "@web/core/utils/patch";
patch(ListRenderer.prototype, {
+ setup() {
+ super.setup(...arguments);
+ this.assignDefaultColorFields();
+ },
+
+ /**
+ * Look up for a `fg_color_field` or `bg_color_field` parameter in list `colors` attribute
+ */
+ assignDefaultColorFields() {
+ this.fgColorField = null;
+ this.bgColorField = null;
+ if ("colors" in this.props.archInfo.xmlDoc.attributes) {
+ // Colors attribute is present in the view definition
+ const colorAttr =
+ this.props.archInfo.xmlDoc.attributes.colors.value.split(";");
+ for (var i = 0, len = colorAttr.length; i < len; i++) {
+ var attr = colorAttr[i].split(":");
+ if (attr.length == 2) {
+ var colorType = attr[0].trim();
+ var colorField = attr[1].trim();
+ if (colorType && colorField) {
+ if (colorType === "fg_color_field") {
+ this.fgColorField = colorField;
+ } else if (colorType === "bg_color_field") {
+ this.bgColorField = colorField;
+ }
+ }
+ } else {
+ console.warn("Invalid colors attribute:", attr);
+ }
+ }
+ }
+ },
+
/**
* @param {Object} column represents field
* @param {Record} record
@@ -11,17 +45,33 @@ patch(ListRenderer.prototype, {
getDynamicColoredStyle(column, record) {
let style = "";
- let color = this.getDynamicColor(column, record, "bg_color");
- if (color !== undefined) {
- style += `background-color: ${color};`;
- }
+ // 1. Get dynamic colors from column options
+ let backgroundColor = this.getDynamicColor(column, record, "bg_color");
+ let foregroundColor = this.getDynamicColor(column, record, "fg_color");
- color = this.getDynamicColor(column, record, "fg_color");
- if (color !== undefined) {
- // $td.css('color', color);
- style += `color: ${color};`;
+ // 2. Get colors from specified fields in record data only if not set dynamically
+ if (!backgroundColor && this.bgColorField) {
+ if (this.bgColorField in record.data) {
+ backgroundColor = record.data[this.bgColorField];
+ } else {
+ console.warn(`No field named "${this.bgColorField}" present in view.`);
+ }
+ }
+ if (!foregroundColor && this.fgColorField) {
+ if (this.fgColorField in record.data) {
+ foregroundColor = record.data[this.fgColorField];
+ } else {
+ console.warn(`No field named "${this.fgColorField}" present in view.`);
+ }
}
+ // Apply styles
+ if (backgroundColor !== undefined) {
+ style += `background-color: ${backgroundColor};`;
+ }
+ if (foregroundColor !== undefined) {
+ style += `color: ${foregroundColor};`;
+ }
return style;
},
@@ -40,7 +90,12 @@ patch(ListRenderer.prototype, {
for (const color_def of definition.split(";")) {
const color_to_expression = this.pairColorParse(color_def);
if (color_to_expression !== undefined) {
- const [color, expression] = color_to_expression;
+ var [color, expression] = color_to_expression;
+ // Check if color is a named field in record
+ // and if so, get its value
+ if (color in record.data) {
+ color = record.data[color];
+ }
if (
evaluateBooleanExpr(
expression,
@@ -69,7 +124,7 @@ patch(ListRenderer.prototype, {
// If one passes a bare color instead of an expression,
// then we consider that color is to be shown in any case
expression = pairList[1] ? pairList[1] : "True";
- return [color, expression];
+ return [color.trim(), expression.trim()];
}
return undefined;
},