This tutorial provides a detailed guide on how to create and integrate a custom Odoo 18 OWL list button into your Odoo applications. Consequently, by following these steps, you will empower users with direct access to specific actions from the List view, thereby streamlining operations and enhancing the overall user experience. Furthermore, we will delve into using the Odoo Web Library (OWL) to achieve this, ensuring your customizations are modern and maintainable, focusing specifically on adding functionality like an Odoo 18 OWL list button.

---

6 Steps to Incredible UI Power with an Odoo 18 OWL List Button

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

H2: Why Elevate Your Interface with a Custom Odoo 18 OWL List Button?

Integrating a custom Odoo 18 OWL list button into your List views offers substantial benefits. Primarily, it enhances user efficiency by placing crucial actions directly where users manage data, which in turn reduces navigation and speeds up common tasks. Secondly, it allows for the creation of highly tailored user experiences that align perfectly with specific business processes, something that might not be achievable with standard Odoo configurations. For example, an Odoo 18 OWL list button could trigger a batch update, open a specific report based on selected items, or launch a custom wizard for quick data entry or modification. Ultimately, such customizations make your Odoo 18 platform more powerful and intuitive for its users.

H2: Essential Foundations: Prerequisites for Your Odoo 18 OWL List Button Project

Before you begin developing your Odoo 18 OWL list button, you must ensure you have the following prerequisites in place:

• A Running Odoo 18 Instance: You need access to an Odoo 18 development environment where you can test your custom module.
• Developer Mode Enabled: Activating developer mode in Odoo is essential for accessing technical tools and settings.
• Understanding of Odoo Module Structure: You should be familiar with creating custom Odoo modules, including the __manifest__.py file and the standard directory layout.
• JavaScript (OWL) Knowledge: A solid grasp of JavaScript, particularly the Odoo Web Library (OWL) framework for creating components, is critical for the button’s interactive logic.
• XML Proficiency: You will use XML to define Odoo views and templates, so familiarity with its syntax is necessary.
• Basic Python Skills: While the button itself is OWL-based, any server-side logic it triggers (like a wizard’s actions) will involve Python.
• A Suitable Code Editor: Using a code editor such as VSCode will significantly streamline your development process for the Odoo 18 OWL list button.

H2: Step-by-Step Tutorial: Constructing Your Odoo 18 OWL List Button

Let’s proceed with the practical steps to implement an Odoo 18 OWL list button. In this example, we’ll create a button named “Product Price” which, upon clicking, will open a wizard, demonstrating a common use-case for a custom button in the list view’s control panel.

H3: Step 1: Establishing Your Custom Odoo Module for the New List View Button

Firstly, you will need a custom Odoo module to house your new Odoo 18 OWL list button customization. If you don’t have an existing module for such customizations, you should create one. Let’s name our demonstration module owl_custom_list_button.

A typical module structure for this purpose would be:

owl_custom_list_button/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       │   ├── add_button_list_controller.js
│       │   └── add_button_list_view.js
│       └── xml/
│           └── list_buttons.xml
├── views/
│   └── product_template_list_view.xml
└── wizard/  // If your button triggers a wizard
    ├── __init__.py
    └── product_price_wizard.py
    └── product_price_wizard_view.xml

Ensure your __manifest__.py correctly declares dependencies (like web and product) and registers your new asset files (JS and XML) for the Odoo 18 OWL list button.

Python

# __manifest__.py
{
    'name': 'OWL Custom List View Button',
    'version': '18.0.1.0.0',
    'summary': 'Adds a custom button to the Product List view using OWL.',
    'author': 'Your Name',
    'website': 'Your Website',
    'depends': ['web', 'product'], # Ensure 'product' is a dependency if modifying product views
    'assets': {
        'web.assets_backend': [
            'owl_custom_list_button/static/src/js/add_button_list_controller.js',
            'owl_custom_list_button/static/src/js/add_button_list_view.js',
            'owl_custom_list_button/static/src/xml/list_buttons.xml',
        ],
    },
    'data': [
        'views/product_template_list_view.xml',
        # Include wizard views if your button opens one, for example:
        # 'wizard/product_price_wizard_view.xml',
    ],
    'installable': True,
    'application': False,
    'license': 'LGPL-3',
}

This manifest correctly initializes your module, making it ready for the Odoo 18 OWL list button components.

H3: Step 2: Defining the Wizard – The Action Behind Your List Button

Since our Odoo 18 OWL list button aims to open a wizard, you must define this wizard first. This involves creating a transient model in Python and its corresponding XML view.

H4: Python Model for the Wizard

In wizard/product_price_wizard.py, define the transient model:

Python

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

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

    # example_field = fields.Char(string="Example Field")

    def action_confirm_update(self):
        # Add your business logic here
        # For example, update prices of selected products
        self.env['ir.logging'].sudo().create({
            'name': 'Product Price Wizard',
            'type': 'server',
            'dbname': self._cr.dbname,
            'level': 'INFO',
            'message': f"Product Price Wizard action triggered from Odoo 18 OWL list button.",
            'path': 'product.price.wizard',
            'func': 'action_confirm_update',
            'line': 'N/A',
        })
        return {'type': 'ir.actions.act_window_close'}

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

H4: XML View for the Wizard

In wizard/product_price_wizard_view.xml, define the wizard’s form view:

XML

<odoo>
    <record id="view_product_price_wizard_list_form" model="ir.ui.view">
        <field name="name">product.price.wizard.list.form</field>
        <field name="model">product.price.wizard</field>
        <field name="arch" type="xml">
            <form string="Update Product Price (List)">
                <group>
                    <p>This wizard was opened by an Odoo 18 OWL list button.</p>
                </group>
                <footer>
                    <button name="action_confirm_update" string="Confirm Update" type="object" class="btn-primary"/>
                    <button string="Cancel" class="btn-secondary" special="cancel"/>
                </footer>
            </form>
        </field>
    </record>

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

This XML structure creates the user interface for the wizard that your Odoo 18 OWL list button will launch.

H3: Step 3: Developing the List View Controller (JavaScript Logic)

The controller contains the JavaScript logic that executes when a user clicks your Odoo 18 OWL list button. We’ll extend the base ListController.

H4: Extending the ListController

Create the file static/src/js/add_button_list_controller.js:

JavaScript

/** @odoo-module **/

import { ListController } from '@web/views/list/list_controller'; // Import the standard ListController
import { useService } from "@web/core/utils/hooks"; // Hook to use Odoo services

export class ProductPriceListController extends ListController {
    setup() {
        super.setup(); // It's crucial to call super.setup()
        this.actionService = useService("action"); // Get a reference to the action service
        console.log("ProductPriceListController has been set up for the Odoo 18 OWL list button.");
    }

    /**
     * This method is invoked when our custom "Product Price" button is clicked.
     * It uses the actionService to open the 'product.price.wizard'.
     */
    async productPrice() {
        console.log("Custom 'Product Price' Odoo 18 OWL list button clicked.");
        // Define the action to open the wizard
        this.actionService.doAction({
            type: 'ir.actions.act_window', // This specifies the action type
            res_model: 'product.price.wizard', // The technical name of our wizard model
            name: 'Product Price', // The title that will appear on the wizard window
            view_mode: 'form', // We want to open the wizard in its form view
            view_type: 'form', // Historically used, often good to include for compatibility
            views: [[false, 'form']], // Explicitly defines that a form view should be used
            target: 'new', // This makes the action open in a new modal/dialog window
            res_id: false, // Since it's a new wizard instance, no specific record ID is needed
            // context: this.props.context, // You can optionally pass context from the list view
        });
    }
}

This JavaScript code is the heart of your Odoo 18 OWL list button, defining what happens upon a click.

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

Next, you will define how your Odoo 18 OWL list button appears using an XML template.

H4: Inheriting the Base List View Buttons Template

Create the file static/src/xml/list_buttons.xml:

XML

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

This XML template extends the default List view buttons container and inserts your new “Product Price” Odoo 18 OWL list button. The t-on-click directive binds the button’s click event to the productPrice method in your custom controller.

H3: Step 5: Registering Your New List View with the Custom Components

You must now register your custom List view configuration, linking it with your new controller and button template.

H4: Defining the Custom List View and Adding to Registry

Create the file static/src/js/add_button_list_view.js:

JavaScript

/** @odoo-module **/

import { registry } from '@web/core/registry'; // Import Odoo's central registry
import { listView } from '@web/views/list/list_view'; // Import the base list view definition
import { ProductPriceListController } from './add_button_list_controller'; // Import your custom controller

// Define your custom list view by spreading the base listView and overriding properties
export const productPriceListView = {
    ...listView, // Include all properties from the standard list view
    Controller: ProductPriceListController, // Specify your custom controller
    buttonTemplate: 'owl_custom_list_button.ListView.Buttons', // Specify your custom button template
};

// Add your custom list view definition to the 'views' category in the registry
// The key 'product_price_list' is used in XML to reference this custom view configuration
registry.category('views').add('product_price_list', productPriceListView);

console.log("Custom 'product_price_list' view has been registered for the Odoo 18 OWL list button.");

This JavaScript code registers product_price_list, which incorporates your custom controller and template for the Odoo 18 OWL list button.

H3: Step 6: Inheriting and Modifying the Target List View (XML Application)

The final configuration step involves modifying an existing List view (for instance, the product list view) to utilize your new custom JavaScript class, which contains the Odoo 18 OWL list button.

H4: Applying the js_class to an Existing List View

Create or modify views/product_template_list_view.xml:

XML

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

This XML view inheritance instructs Odoo to use your product_price_list configuration (which includes the custom controller and hence the Odoo 18 OWL list button) for the product.template List view.

H2: Deployment and Verification: Witnessing Your Odoo 18 OWL List Button

After setting up all components for your Odoo 18 OWL list button, you need to deploy and test it.

1. Install or Upgrade Your Module:
   • If it’s a new module, install owl_custom_list_button via the Odoo Apps menu.
   • If you’ve modified an existing module, upgrade it.
   • A restart of the Odoo server might be necessary, especially for Python changes.
2. Clear Browser Cache: Perform a hard refresh (e.g., Ctrl+Shift+R or Cmd+Shift+R) in your web browser to load the latest assets.
3. Navigate to the Target List View: Go to the List view for Product Templates (often found under Sales or Inventory applications).
4. Check for the Button: Your “Product Price” button should now be visible in the control panel area of the List view.
5. Test Functionality: Click the “Product Price” Odoo 18 OWL list button. The “Product Price Update” wizard should appear in a modal window.

If you encounter issues, diligently check the browser’s developer console for any JavaScript errors and the Odoo server logs for Python-related problems. Common pitfalls include typos in JS or XML identifiers, incorrect XPath expressions, or problems with JavaScript registration.

H2: Advanced Customizations for Your Odoo 18 OWL List Buttons

Once you are comfortable with creating a basic Odoo 18 OWL list button, you can explore more advanced features:

• Context-Aware Visibility: Implement logic in your OWL controller to show or hide the button based on selected records, user permissions, or specific view states.
• Passing Data to Actions: Modify your button’s action to collect IDs of selected records in the list view and pass them to your wizard or server action.
• Direct Server Actions: Instead of a wizard, your button could directly call a Python method on the server using Odoo’s RPC capabilities within OWL.
• Enhanced Styling: Apply custom CSS to further refine the appearance of your Odoo 18 OWL list button.
• Multiple Custom Buttons: You can easily add more custom buttons by defining more methods in your controller and adding more button elements to your XML template.

H2: Conclusion: Mastering Odoo 18 List View Customizations with OWL Buttons

You have now successfully navigated the process of adding a custom Odoo 18 OWL list button to your application. This skill opens up numerous possibilities for tailoring the Odoo user interface to meet precise business requirements, thereby making the system more efficient and user-centric. As you continue to work with OWL and Odoo’s flexible framework, you can build even more sophisticated and powerful list view interactions. For deeper insights and advanced techniques, always make it a practice to consult the official Odoo 18 Documentation.