odooqwebodoo-16

How to add classes or styles dynamically in odoo 16.0 qweb template


I have many boolean fields and i am trying to add classes dynamically in odoo template. Odoo docs qweb templates

I try

<t t-foreach="planes" t-as="plan">
    <p t-attf-class="{{plan.blog ? 'text-success' : 'text-danger'}}">Blog</p>
    <p t-attf-class="{plan.blog ? 'text-success' : 'text-danger'}">Blog</p>
    <p t-attf-class="plan.blog ? 'text-success' : 'text-danger'">Blog</p>
    <p t-attf-class="plan.blog ? text-success : text-danger">Blog</p>
</t>

Expected render:

<p class="text-success">Blog</p>
<p class="text-danger">Blog</p>

Solution

  • You can use one of the following syntaxes:

    t-attf-class="{{ 'text-success' if plan.blog else 'text-danger' }}"
    

    Used in mrp work order report template

    t-attf-class="#{record.blog.raw_value ? 'text-success' : 'text-danger'}"
    

    Used in workcenter Kanban view

    Or

    t-attf-class="{{plan.blog ? 'text-success' : 'text-danger'}}"
    

    Used in website client action template (configurator)