Odoo 15: Add Button to Kanban View

In this example, we show how to add a button to the „Control panel buttons“ of the kanban view.

Example values used in this post:

key	value
addon_dir	tjiko
addon_name	tjiko_project
view	project.view_project_kanban
model	project.project
button_css_class	tjiko-project-from-template

Create directories:

mkdir -p tjiko/tjiko_project/static/src/ tjiko/tjiko_project/views/project/

Create a new buttons template called TjikoProjectKanban.buttons, that is based on KanbanView.buttons. It uses client-side inheritance via t-jquery and adds a new button with the CSS class tjiko-project-from-template.

tjiko/tjiko_project/static/src/button_kanban.xml

<?xml version="1.0" encoding="UTF-8"?>

<templates>
    <t t-extend="KanbanView.buttons" t-name="TjikoProjectKanban.buttons">
        <t t-jquery="button" t-operation="after">
            <button type="button" class="btn btn-secondary tjiko-project-from-template">
                do stuff
            </button>
        </t>
    </t>
</templates>

Create a new JS controller called TjikoProjectKanbanController, that is based on web.KanbanController. It uses the new buttons template and sets a click handler based on the CSS class defined above.

Then create a new JS view called tjiko_project_kanban, that is based on web.KanbanView and uses the new controller.

tjiko/tjiko_project/static/src/kanban.js

/** @odoo-module **/
import KanbanController from 'web.KanbanController';
import KanbanView from 'web.KanbanView';
import viewRegistry from 'web.view_registry';
import core from 'web.core';

const _t = core._t;

const TjikoProjectKanbanController = KanbanController.extend({
  buttons_template: 'TjikoProjectKanban.buttons',
  events: _.extend({}, KanbanController.prototype.events, {
    'click .tjiko-project-from-template': '_on_click',
  }),
  _on_click: function () {
    console.log(_t('clicked'), this);
  }
});
const TjikoProjectKanbanView = KanbanView.extend({
  config: _.extend({}, KanbanView.prototype.config, {
    Controller: TjikoProjectKanbanController
  }),
});

viewRegistry.add('tjiko_project_kanban', TjikoProjectKanbanView);

Extend the view project.view_project_kanban and make it use the new kanban view tjiko_project_kanban by setting the js_class attribute.

tjiko/tjiko_project/views/project/kanban.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
   <data>
       <record id="view_project_kanban" model="ir.ui.view">
           <field name="name">tjiko_project.project.kanban</field>
           <field name="model">project.project</field>
           <field name="inherit_id" ref="project.view_project_kanban"/>
           <field name="arch" type="xml">
               <xpath expr="/kanban" position="attributes">
                   <attribute name="js_class">tjiko_project_kanban</attribute>
               </xpath>
           </field>
       </record>
   </data>
</odoo>

Add all the files to your manifest.

tjiko/tjiko_project/__manifest__.py

{
    'name': 'Tjiko Project',
    'version': '1.0',
    'depends': [
        'project',
    ],
    'author': 'hukudo GmbH',
    'application': True,
    'category': 'Tjiko / Customization',
    'license': 'Other proprietary',
    'description': """
    """,
    'data': [
        'views/project/kanban.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'tjiko_project/static/src/kanban.js',
        ],
        'web.assets_qweb': [
            'tjiko_project/static/src/button_kanban.xml',
        ],
    }
}

Easy! 🤪

Resources

• https://www.cybrosys.com/blog/how-to-add-a-create-button-near-tree-kanban-view-in-odoo-15

• odoo/addons/account/static/src/xml/bills_upload_views.xml old style

• odoo/addons/project/static/src/js/project_kanban.js new style

Add Wizard

Just a few notes.

• create tjiko/tjiko_project/models/wizard.py

• update tjiko/tjiko_project/models/__init__.py

• create tjiko/tjiko_project/views/wizard.xml

• update tjiko/tjiko_project/__manifest__.py

Model:

class Wizard(models.TransientModel):
    _name = 'tjiko_project.wizard'
    _description = '...'

    ...

    def button_continue(self):
        ...
        new_project = self.env['project.project'].create({})
        return {
            "type": "ir.actions.act_window",
            "res_model": 'project.project',
            "res_id": new_project.id,
            "view_mode": "form",
        }

View:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="wizard" model="ir.ui.view">
        <field name="name">tjiko_project.wizard</field>
        <field name="model">tjiko_project.wizard</field>
        <field name="mode">primary</field>
        <field name="arch" type="xml">
            <form>
                <footer>
                    <button
                        string="OK"
                        class="oe_highlight"
                        name="button_continue"
                        type="object"
                    />
                    <button string="Cancel" class="btn-secondary" special="cancel"/>
                </footer>
            </form>
        </field>
    </record>
</odoo>

TIL: odoo scaffold   Einkaufszettel