This tutorial will guide you through creating and adding a custom Odoo 18 OWL Kanban button to your views. Consequently, you will learn how to enhance user interaction and streamline workflows directly from the Kanban interface. Furthermore, by following these steps, you can trigger specific actions, such as opening wizards or performing operations, making your Odoo 18 applications more dynamic and user-friendly. This guide focuses on the Odoo Web Library (OWL) framework, providing a modern approach to Odoo customization.

---

5 Steps to Astonishing UI Power with an Odoo 18 OWL Kanban Button

Why Supercharge Your UI with a Custom Odoo 18 OWL Kanban Button?

Adding a custom Odoo 18 OWL Kanban button offers several advantages. Firstly, it significantly improves user experience by providing quick access to common actions directly within the Kanban view, reducing clicks and navigation time. Secondly, it allows for tailored workflows specific to your business needs, which standard Odoo might not cover out-of-the-box. For instance, you could add an odoo18 owl kanban button to quickly launch a wizard for updating prices, assigning tasks, or any other custom process. Ultimately, these buttons empower users and make your Odoo 18 system more efficient and intuitive.

source : https://github.com/mjavint/devtoolschool/tree/18.0/owl_add_button/static/src/components/add_button_kanban

Essential Groundwork: Prerequisites for Your Odoo 18 OWL Kanban Button Project

Before you embark on creating your Odoo 18 OWL Kanban button, you need to ensure you have the following:

• An Odoo 18 Instance: You must have a running Odoo 18 development environment.
• Developer Mode Activated: Ensure developer mode is active in Odoo to access developer tools and technical information.
• Basic Odoo Module Structure Knowledge: You should understand how to create a custom Odoo module, including its manifest file (__manifest__.py) and directory structure.
• JavaScript (OWL) Fundamentals: Familiarity with JavaScript, especially the Odoo Web Library (OWL) component system, is crucial for creating the button’s logic.
• XML Understanding: Knowledge of XML is necessary for defining views and templates in Odoo.
• Python Basics: Some Python knowledge is helpful for defining any server-side actions or models your button might interact with (like a wizard model).
• A Code Editor: A good code editor like VSCode will make development easier.

Step-by-Step Guide: Implementing Your Odoo 18 OWL Kanban Button

Let’s dive into the practical steps to add an Odoo 18 OWL Kanban button. We will create a button labeled “Product Price” that, when clicked, opens a wizard. This example illustrates a common use case for such a button.

Step 1: Structuring Your Custom Odoo Module for the New Kanban Button

First, you need a custom Odoo module. If you don’t have one already for your customizations, create a new one. Let’s assume our module is named owl_custom_kanban.

Your module structure might look like this:

owl_custom_kanban/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       │   ├── add_button_kanban_controller.js
│       │   └── add_button_kanban_view.js
│       └── xml/
│           └── kanban_buttons.xml
├── views/
│   └── product_template_kanban_view.xml
└── wizard/ (if your button opens a wizard)
    ├── __init__.py
    └── product_price_wizard.py
    └── product_price_wizard_view.xml

Ensure your __manifest__.py includes dependencies like web and any other modules your button interacts with (e.g., product). Also, declare your assets (JS and XML files) in the assets key.

Python

# __manifest__.py
{
    'name': 'OWL Custom Kanban Button',
    'version': '18.0.1.0.0',
    'summary': 'Adds a custom button to the Product Kanban view using OWL.',
    'author': 'Your Name',
    'website': 'Your Website',
    'depends': ['web', 'product'], # Add other dependencies if needed
    'assets': {
        'web.assets_backend': [
            'owl_custom_kanban/static/src/js/add_button_kanban_controller.js',
            'owl_custom_kanban/static/src/js/add_button_kanban_view.js',
            'owl_custom_kanban/static/src/xml/kanban_buttons.xml',
        ],
    },
    'data': [
        'views/product_template_kanban_view.xml',
        # Add wizard views if applicable
        # 'wizard/product_price_wizard_view.xml',
    ],
    'installable': True,
    'application': False,
}

This manifest file correctly sets up your module for the Odoo 18 OWL Kanban button.

Step 2: Defining the Wizard (Model and XML View) – The Action Behind the Button

Our Odoo 18 OWL Kanban button will trigger a wizard. Thus, you need to define this wizard.

Python Model for the Wizard

Create a transient model for your wizard in wizard/product_price_wizard.py:

Python

# wizard/product_price_wizard.py
from odoo import models, fields

class ProductPriceWizard(models.TransientModel):
    _name = 'product.price.wizard'
    _description = 'Product Price Update Wizard'

    # Add fields for your wizard, e.g.:
    # new_price = fields.Float(string="New Price")
    # product_ids = fields.Many2many('product.template', string="Products")

    def action_apply_price(self):
        # Logic to apply the new price
        # self.product_ids.write({'list_price': self.new_price})
        # For demonstration, we'll just log a message
        print(f"Wizard action 'action_apply_price' executed for {self._name}.")
        return {'type': 'ir.actions.act_window_close'}

Remember to import this file in wizard/__init__.py.

XML View for the Wizard

Define the form view for your wizard in wizard/product_price_wizard_view.xml:

XML

<odoo>
    <record id="view_product_price_wizard_form" model="ir.ui.view">
        <field name="name">product.price.wizard.form</field>
        <field name="model">product.price.wizard</field>
        <field name="arch" type="xml">
            <form string="Set Product Price">
                <p>This is a placeholder for the product price wizard.</p>
                <footer>
                    <button name="action_apply_price" string="Apply" type="object" class="btn-primary"/>
                    <button string="Cancel" class="btn-secondary" special="cancel"/>
                </footer>
            </form>
        </field>
    </record>

    <record id="action_product_price_wizard" model="ir.actions.act_window">
        <field name="name">Product Price Update</field>
        <field name="res_model">product.price.wizard</field>
        <field name="view_mode">form</field>
        <field name="target">new</field>
    </record>
</odoo>

This XML sets up the interface for the wizard that your Odoo 18 OWL Kanban button will launch.

Step 3: Crafting the Kanban View Controller (JS Logic for the Button)

The controller handles the logic when your Odoo 18 OWL Kanban button is clicked. We will extend the base KanbanController.

Extending the KanbanController

Create static/src/js/add_button_kanban_controller.js:

JavaScript

/** @odoo-module **/

import { KanbanController } from '@web/views/kanban/kanban_controller'; // Standard Odoo Kanban controller
import { useService } from "@web/core/utils/hooks"; // To use services like 'action'

export class ProductPriceKanbanController extends KanbanController {
    setup() {
        super.setup(); // Always call super.setup() first
        this.actionService = useService("action"); // Get the action service
        console.log("ProductPriceKanbanController setup complete for Odoo 18 OWL Kanban button.");
    }

    /**
     * This function is triggered when the 'Product Price' button is clicked.
     * It opens a wizard (a new window action).
     */
    async productPrice() {
        console.log("Product Price button clicked - Odoo 18 OWL Kanban button action initiated.");
        // This action opens the wizard defined in XML
        this.actionService.doAction({
            type: 'ir.actions.act_window', // Specifies the type of action
            res_model: 'product.price.wizard', // The model for the wizard
            name: 'Product Price', // The title of the wizard window
            view_mode: 'form', // The view mode (form view for wizards)
            view_type: 'form', // Deprecated, but often included
            views: [[false, 'form']], // Explicitly request a form view
            target: 'new', // Opens the wizard in a new dialog/modal
            res_id: false, // No specific record to open, it's a new wizard instance
            // context: this.props.context, // You can pass context if needed
        });
    }
}

This JavaScript code defines the behavior of our Odoo 18 OWL Kanban button. It uses the Odoo action service to open the wizard we defined earlier.

Step 4: Designing the Kanban View Button Template (XML for Visuals)

Next, we define the visual appearance of our Odoo 18 OWL Kanban button using an XML template.

Inheriting the Base Kanban Buttons Template

Create static/src/xml/kanban_buttons.xml:

XML

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="owl_custom_kanban.KanbanView.Buttons" t-inherit="web.KanbanView.Buttons" t-inherit-mode="primary">
        <xpath expr="//div[hasclass('o_cp_buttons')]" position="inside">
            <button type="button" 
                    class="btn btn-primary o_button_custom_product_price" 
                    t-on-click="() => this.productPrice()">
                Product Price
            </button>
        </xpath>
    </t>
</templates>

This XML template inherits the existing Kanban buttons template and injects our new “Product Price” Odoo 18 OWL Kanban button into the control panel area. The t-on-click attribute links the button click to the productPrice method in our controller.

Step 5: Registering Your New Kanban View with the Custom Controller and Template

Now, you must register this new view configuration, associating it with your custom controller and button template.

Defining the Custom Kanban View and Adding to Registry

Create static/src/js/add_button_kanban_view.js:

JavaScript

/** @odoo-module **/

import { registry } from '@web/core/registry'; // Odoo's central registry
import { kanbanView } from '@web/views/kanban/kanban_view'; // Base Kanban view definition
import { ProductPriceKanbanController } from './add_button_kanban_controller'; // Our custom controller

// Define our custom Kanban view by extending the base kanbanView
export const productPriceKanbanView = {
    ...kanbanView, // Spread the properties of the standard Kanban view
    Controller: ProductPriceKanbanController, // Override with our custom controller
    buttonTemplate: 'owl_custom_kanban.KanbanView.Buttons', // Specify our custom button template
};

// Add our custom view to the 'views' category in the registry
// The key 'product_price_kanban' will be used in XML to reference this view
registry.category('views').add('product_price_kanban', productPriceKanbanView);

console.log("Custom 'product_price_kanban' view registered for Odoo 18 OWL Kanban button.");

This JavaScript registers our product_price_kanban view, which uses our custom controller and template for the Odoo 18 OWL Kanban button.

Step 6: Inheriting and Modifying the Target Kanban View (XML to Apply the Button)

The final step is to modify an existing Kanban view (e.g., the product Kanban view) to use our new custom JavaScript class, which includes the Odoo 18 OWL Kanban button.

Applying the js_class to an Existing Kanban View

Create/modify views/product_template_kanban_view.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="view_product_template_kanban_custom_button" model="ir.ui.view">
        <field name="name">product.template.kanban.custom.button</field>
        <field name="model">product.template</field>
        <field name="inherit_id" ref="product.product_template_kanban_view"/> <field name="priority">17</field> <field name="arch" type="xml">
            <xpath expr="//kanban" position="attributes">
                <attribute name="js_class">product_price_kanban</attribute> </xpath>
        </field>
    </record>
</odoo>

This XML view inheritance is crucial. It tells Odoo to use our product_price_kanban (which includes the custom controller and button template for the Odoo 18 OWL Kanban button) for the product.template Kanban view.

Deployment and Testing: Seeing Your Odoo 18 OWL Kanban Button in Action

With all the pieces in place, it’s time to deploy and test your new Odoo 18 OWL Kanban button.

1. Install/Upgrade Your Custom Module:
   • If this is a new module, install owl_custom_kanban from the Apps menu in Odoo.
   • If you’ve made changes to an existing module, upgrade it from the Apps menu.
   • You might need to restart the Odoo server for JS and XML changes to take full effect.
2. Clear Browser Cache: It’s often a good idea to do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) in your browser to ensure the latest JavaScript and XML assets are loaded.
3. Navigate to the Kanban View: Go to the Kanban view for Product Templates (usually under the Sales or Inventory apps).
4. Verify the Button: You should now see your “Product Price” button in the control panel area of the Kanban view.
5. Test the Action: Click the “Product Price” button. The wizard you defined (“Product Price Update”) should open in a modal dialog.

If you encounter issues, check the browser’s developer console for JavaScript errors and the Odoo server logs for any Python errors. Common mistakes include typos in template names, incorrect XPath expressions, or issues in the JS registration.

Taking It Further: Advanced Tips for Your Odoo 18 OWL Kanban Buttons

Once you’ve mastered the basic Odoo 18 OWL Kanban button, consider these advanced enhancements:

• Conditional Button Visibility: You can add logic to your controller or template to show or hide the button based on user rights, record states, or other conditions.
• Passing Context/Data: Modify your button’s action to pass context or selected record IDs from the Kanban view to your wizard or action.
• More Complex Actions: Instead of just opening a wizard, your button could trigger a direct server-side Python method call using RPC services available in OWL.
• Styling: Customize the button’s appearance further using CSS.
• Multiple Buttons: You can add several custom buttons by extending the buttonTemplate with more button definitions.

Conclusion: Elevating Your Odoo 18 User Experience with Custom Kanban Buttons

You have now successfully learned how to create and integrate an Odoo 18 OWL Kanban button. This powerful technique allows you to significantly customize the Odoo interface, streamline workflows, and provide users with quick access to essential functionalities. By leveraging OWL and the Odoo framework’s extensibility, the possibilities for enhancing your Kanban views are virtually limitless. Continue exploring and adapting these concepts to build an even more efficient and tailored Odoo 18 system for your specific requirements. For further details on OWL and view development, always consult the official Odoo 18 Documentation.