Odoo V11 - how to set Kanban style with CSS class with field value as part of the class name

Question

There are some related questions online, but I haven't found a working answer yet, so here I go.

I have a custom module that adds a field to the crm.lead:

    xx_ue_brand_id = fields.Many2one('xx.ue.brand', string='Brand')

The related model holds not much more than a name and and active flag. I'm using this already in the crm related views, so user can link a Lead to a specific brand.

Using the brand value, I would like to set a color on the kanban items. As each brand has its specific color, I would prefer not to use the standard Odoo colors for the kanban-item, which can be set by the color picker and add a class like 'oe_kanban_color_5'

I defined my own css classes in a less file that is correctly loaded. There's a class for each brand, overruling the border color that is set on the kanban. I included the brand name in the class definition, so it's clear for which brand the styling is used. Like this:

    .crm_kanban_brand_*brandname-x* { &:after {background-color:#2E3092!important;} }

When I add this class via the developer tools of Chrome to a kanban item, the border is set in the right color.

But... (finally my question)

I can't get the classes set dynamically through an xpath expression, my best guess is something like the following.

    <xpath expr="//div[hasclass('o_dropdown_kanban')]/parent::div" position="attributes">
        <attribute name="t-att-class">'crm_kanban_brand_%s' % record.xx_ue_brand_id.name</attribute>
    </xpath>

Note, when I add the class definition without using a variable, the whole thing works as expected, adding the same class to all kanban items.

    <xpath expr="//div[hasclass('o_dropdown_kanban')]/parent::div" position="attributes">
        <attribute name="class">crm_kanban_brand_*brandname-x*</attribute>
    </xpath>

Any help on how I could use the field value as part of the class name would be greatly appreciated.

Have you tried to use t-attf-class? Something like <attribute name="t-attf-class">crm_kanban_brand_{{record.xx_ue_brand_id.name}}</attribute> might work. — CZoellner

MichelWorld MichelWorld · Accepted Answer · 2019-09-18T18:13:39

Thanks to the suggestion of CZoellner I finally ended up with using this as a working solution.

    <xpath expr="//div[hasclass('o_dropdown_kanban')]/parent::div" position="attributes">
        <attribute name="t-attf-class" separator=" " add="crm_kanban_brand_#{record.xx_ue_brand_id.value}"/>
    </xpath>

And found a reference to it in the Odoo documentation:

t-attf-$name same as previous, but the parameter is a format string instead of just an expression, often useful to mix literal and non-literal string (e.g. classes):

    <t t-foreach="[1, 2, 3]" t-as="item">
        <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
    </t>

will be rendered as:

    <li class="row even">1</li>
    <li class="row odd">2</li>
    <li class="row even">3</li>

Odoo V11 - how to set Kanban style with CSS class with field value as part of the class name

1 Answers