Odoo 19 QWeb Template Builder – Generate & Export XML Templates Instantly!

▶️ Introduction

Kanban views are an essential visual interface in Odoo — used for pipelines, tasks, projects, leads, tickets, and more. But the default Kanban cards are basic. What if you want cards that:

✔ Change colour based on record data (e.g., status or priority)

✔ Respond to clicks with custom actions

✔ Display additional dynamic information

In this tutorial, we’ll show you how to build a custom Kanban card in Odoo 19 that supports dynamic colour highlighting and clickable behaviour — making your Kanban boards more interactive and user-friendly.

🎥 Watch the full video:

📌 What You’ll Learn

By the end of this guide, you will know how to:

✅ Extend an existing Kanban view in Odoo

✅ Add dynamic styling based on record fields

✅ Make Kanban cards clickable to open records or trigger actions

✅ Write clean XML and optional JavaScript for UI logic

🛠 Step-by-Step Implementation

🔹 1. Create Your Custom Module

Start with a custom module — for example kanban_color_action. The structure typically looks like:

kanban_color_action/
├── __init__.py
├── __manifest__.py
├── models/
│   └── __init__.py
├── views/
│   └── kanban_color_views.xml

In your manifest (__manifest__.py), include the views file:

{
    'name': 'Kanban Custom Color & Action',
    'version': '1.0',
    'depends': ['base', 'project'],
    'data': ['views/kanban_color_views.xml'],
}

🔹 2. Add Custom Fields (Optional)

If needed, add custom fields to the model you’re enhancing. For example, a priority_level field on tasks:

from odoo import models, fields

class ProjectTask(models.Model):
    _inherit = 'project.task'

    priority_level = fields.Selection([
        ('low', 'Low'),
        ('medium', 'Medium'),
        ('high', 'High'),
    ], default='low')

This field will be used to adjust colours dynamically.

🔹 3. Override the Kanban View

In views/kanban_color_views.xml, extend the existing Kanban template and use conditional classes:

<record id="view_task_kanban_custom" model="ir.ui.view">
    <field name="name">project.task.kanban.custom</field>
    <field name="model">project.task</field>
    <field name="inherit_id" ref="project.view_task_kanban"/>
    <field name="arch" type="xml">
        <templates>
            <t t-name="kanban-box">
                <div t-classes="[
                    'oe_kanban_global_click',
                    record.priority_level.value == 'high' and 'bg-danger' or '',
                    record.priority_level.value == 'medium' and 'bg-warning' or '',
                    record.priority_level.value == 'low' and 'bg-success' or ''
                ]">
                    <div class="oe_kanban_card_body">
                        <strong><t t-esc="record.name.value"/></strong>
                    </div>
                </div>
            </t>
        </templates>
    </field>
</record>

This template:

✔ Inherits the existing Kanban

✔ Adds CSS classes based on priority_level

✔ Applies Bootstrap colours like bg-danger, bg-warning, bg-success

🔹 4. Enable Clickable Behaviour

To make the Kanban cards open the form view on click, you can add:

<kanban
    class="o_kanban_example"
    js_class="KanbanController"
    data-widget="kanban_record_clickable">
</kanban>

This instructs Odoo to treat the card as clickable — opening the target record’s form view.

You can also tie more advanced JavaScript actions if needed.

🔹 5. Add Custom CSS (Optional)

If you want more control over styling beyond colors, include a CSS file:

.kanban_high {
    border: 2px solid #d9534f;
    font-weight: bold;
}

.kanban_low {
    background-color: #d4edda;
}

Include this CSS in your module’s static assets.

🧠 Tips & Best Practices

✔ Dynamic fields like priority, state, or deadlines work well for colour logic.

✔ Bootstrap utility classes (bg-*, text-*) help you style without custom CSS.

✔ Test your Kanban layout with real data to ensure readability.

✔ If using JavaScript, keep controllers light to maintain performance.

📌 Conclusion

Customising your Kanban views in Odoo 19 — with dynamic colours and click actions — enhances visual clarity and efficiency. Whether you’re managing tasks, leads, opportunities, support tickets, or projects, this approach brings contextual insight right into the board view.