Hi, How can I color the text in a field using conditions?
Like when I choose the condition to set invisible a field...
I want to see a field text green when it matches the word "ready" and red when it matches "unready".
I'm using odoo 18
Thanks
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
Hi, How can I color the text in a field using conditions?
Like when I choose the condition to set invisible a field...
I want to see a field text green when it matches the word "ready" and red when it matches "unready".
I'm using odoo 18
Thanks
Hi,
here is example of Form View
Add this inside your form view:
<record id = "view_form_model_name" model = "ir.ui.view"> <field name = "name" >your.model.form </field> <field name = "model" >your.model </field> <field name = "arch" type = "xml" > <form> <sheet> <!-- Normal Field --> <group> <!-- Ready: green --> <div modifiers='{"invisible": [["status", "in", ["ready", "unready"]]]}' class = "text-success" > <field name = "status" readonly = "1" /> </div> <!-- Unready: red --> <div attrs = "{'invisible': [('status', '!=', 'unready')]}" class = "text-danger" > <field name = "status" readonly = "1" /> </div> <!-- All other statuses --> <div modifiers='{"invisible": [["status", "in", ["ready", "unready"]]]}'"> <field name = "status" readonly = "1"/> </div> </group> </sheet> </form> </field> </record>
i hope it is use full
Yes, just like you use attrs to make a field invisible, you can also use attrs to apply a CSS class conditionally.
xml
<field name="status"
attrs="{
'class': [
('status', '=', 'ready'), 'text-success',
('status', '=', 'unready'), 'text-danger'
]
}"/>
I Hope It's Solve your Problem
Hi,
To change the color of the text, you can use the following classes for the field. It can be used in both the form view and the list view.
Use invisible field attribute with field decoration (for status field)
Odoo has built-in field decoration (mostly for tree views), but for form view text color, we use attrs along with custom class logic.
Python
state = fields.Selection([
('ready', 'Ready'),
('unready', 'Unready')
], string="Status")
XML
Add two <div>s in the form view and show/hide them conditionally using invisible attribute:
<field name="state" invisible="1"/> <!-- Hidden real field -->
<div attrs="{'invisible': [('state', '!=', 'ready')]}" class="text-success">
<strong>Status:</strong> Ready
</div>
<div attrs="{'invisible': [('state', '!=', 'unready')]}" class="text-danger">
<strong>Status:</strong> Unready
</div>
text-success = green (Bootstrap class)
text-danger = red (Bootstrap class)
This approach shows the status in color without overriding core logic.
In list view, you can see the following decorators,
Eg:-
<field name="state" widget="badge" statusbar_visible="expired"
decoration-success="state == 'running'"
decoration-danger="state == 'expired'"
decoration-info="state =='draft'"/>
Hope it helps
Crea un account oggi per scoprire funzionalità esclusive ed entrare a far parte della nostra fantastica community!
Registrati