<h1 class="title">Colorize field in tree views</h1> <p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_tree_dynamic_colored_field"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_tree_dynamic_colored_field"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/15.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p> <p>This module aims to add support for dynamically coloring fields in tree view according to data in the record.</p> <a name="features"></a> <h2>Features</h2> <ul class="simple"> <li>Add attribute <code>bg_color</code> on field's <code>options</code> to color background of a cell in tree view</li> <li>Add attribute <code>fg_color</code> on field's <code>options</code> to change text color of a cell in tree view</li> </ul> <p><strong>Table of contents</strong></p> <a name="usage"></a> <h2>Usage</h2> <ul> <li><p class="first">In the tree view declaration, put <code>options='{&quot;bg_color&quot;: &quot;red: customer==True&quot;}</code> attribute in the <code>field</code> tag:</p> <pre> <code>... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; &lt;tree string=&quot;View name&quot;&gt; ... &lt;field name=&quot;name&quot; options='{&quot;bg_color&quot;: &quot;red: customer == True&quot;}'/&gt; ... &lt;/tree&gt; &lt;/field&gt; ... With this example, column which renders 'name' field will have its background colored in red.</code> </pre> </li> <li><p class="first">In the tree view declaration, put <code>options='{&quot;fg_color&quot;: &quot;white:customer == True&quot;}'</code> attribute in the <code>field</code> tag:</p> <pre> <code>... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; &lt;tree string=&quot;View name&quot;&gt; ... &lt;field name=&quot;name&quot; options='{&quot;fg_color&quot;: &quot;white:customer == True&quot;}'/&gt; ... &lt;/tree&gt; &lt;/field&gt; ... With this example, column which renders 'name' field will have its text colored in white on a customer records.</code> </pre> </li> <li><p class="first">In the tree view declaration, use <code>options='&quot;color_field&quot;: &quot;my_color&quot;'</code> attribute in the <code>tree</code> tag:</p> <pre> <code>... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; &lt;tree string=&quot;View name&quot; colors=&quot;color_field: my_color&quot; &gt; ... &lt;field name=&quot;my_color&quot; invisible=&quot;1&quot;/&gt; ... &lt;/tree&gt; &lt;/field&gt; ...</code> </pre> </li> <li><p class="first">You can also use <code>colors=&quot;bg_color_field: my_color&quot;</code> to defined the field name that will be used for the background color of the line.</p> </li> <li><p class="first">If you want to use more than one color, you can split the attributes using ';':</p> </li> </ul> <pre class="code"> <code class="code">options='{&quot;fg_color&quot;: &quot;red:red_color == True; green:green_color == True&quot;}'</code> </pre> <p>Example:</p> <pre> <code lang="xml">... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; &lt;tree string=&quot;View name&quot;&gt; ... &lt;field name=&quot;name&quot; options='{&quot;fg_color&quot;: &quot;red:red_color == True; green:green_color == True&quot;}'/&gt; ... &lt;/tree&gt; &lt;/field&gt; ... With this example, the content of the field named `my_color` will be used to populate the `my_color` CSS value. Use a function field to return whichever color you want depending on the other record values. Note that this overrides the rest of `colors` attributes, and that you need the tree to load your field in the first place by adding it as invisible field.</code> </pre> <p><strong>Note that you should always use single quotes for fields' ``options`` and wrap nested values in double quotes since ``options`` is a JSON object.</strong></p> <a name="known-issues-roadmap"></a> <h2>Known issues / Roadmap</h2> <ul class="simple"> <li>Before version 13.0, this module had a feature allowing to change the color of a line depending on a field, using a <code>colors</code> attribute with the name of the field on the <code>&lt;tree&gt;</code> element. Since 13.0, the <code>colors</code> 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.</li> </ul> <a name="bug-tracker"></a> <h2>Bug Tracker</h2> <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed <a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_tree_dynamic_colored_field%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p> <p>Do not contact contributors directly about support or help with technical issues.</p> <a name="credits"></a> <h2>Credits</h2> <a name="authors"></a> <h3>Authors</h3> <ul class="simple"> <li>Camptocamp</li> <li>Therp BV</li> </ul> <a name="contributors"></a> <h3>Contributors</h3> <ul class="simple"> <li>Damien Crier &lt;<a class="reference external" href="mailto:damien.crier&#64;camptocamp.com">damien.crier&#64;camptocamp.com</a>&gt;</li> <li>Holger Brunn &lt;<a class="reference external" href="mailto:hbrunn&#64;therp.nl">hbrunn&#64;therp.nl</a>&gt;</li> <li>Artem Kostyuk &lt;<a class="reference external" href="mailto:a.kostyuk&#64;mobilunity.com">a.kostyuk&#64;mobilunity.com</a>&gt;</li> <li>Guewen Baconnier &lt;<a class="reference external" href="mailto:guewen.baconnier&#64;camptocamp.com">guewen.baconnier&#64;camptocamp.com</a>&gt;</li> <li>Phuc Tran Thanh &lt;<a class="reference external" href="mailto:phuc&#64;trobz.com">phuc&#64;trobz.com</a>&gt;</li> <li>Sylvain LE GAL &lt;<a class="reference external" href="https://twitter.com/legalsylvain">https://twitter.com/legalsylvain</a>&gt;</li> </ul> <a name="other-credits"></a> <h3>Other credits</h3> <p>The development of this module has been financially supported by:</p> <ul class="simple"> <li>Camptocamp</li> </ul> <a name="maintainers"></a> <h3>Maintainers</h3> <p>This module is maintained by the OCA.</p> <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a> <p>OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.</p> <p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_tree_dynamic_colored_field">OCA/web</a> project on GitHub.</p> <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>