Skip to content
Home » My Blog Tutorial » OWL in Odoo 17: Adding Custom Buttons to Sales Order List View

OWL in Odoo 17: Adding Custom Buttons to Sales Order List View

OWL Odoo 17 custom button

OWL Odoo 17 custom button. Are you ready to enhance your Odoo 17 experience with custom buttons? This tutorial will guide you through the process of adding a new button to the sales order list view using OWL (Odoo Web Library) in Odoo 17. We’ll explore XML inheritance, JavaScript controllers, and Odoo development techniques to create a seamless user interface.

Setting Up Your Odoo Add-on

First, let’s create a new add-on using the Odoo scaffold command:

odoo scaffold add_new_button .

After generating the add-on, remove unnecessary folders such as models, controllers, and security. Then, create a static folder to house our JavaScript and XML files.

Implementing the Custom Button

JavaScript Controller

Create a file named list_controller.js in the static/src/js directory with the following code:

/** @odoo-module */

import { ListController } from "@web/views/list/list_controller";
import { registry } from '@web/core/registry';
import { listView } from '@web/views/list/list_view';

export class OdooOWLListController extends ListController {
   setup() {
       super.setup();
   }

   showCustomers() {
       this.actionService.doAction({
          type: 'ir.actions.act_window',
          res_model: 'res.partner',
          name:'Customers',
          view_mode: 'tree,form',
          view_type: 'form',
          views: [[false, 'tree'], [false, 'form']],
          target: 'current',
          res_id: false,
      });
   }
}

const viewRegistry = registry.category("views");
export const OWLListController = {
    ...listView,
    Controller: OdooOWLListController,
};
viewRegistry.add("owl_list_controller", OWLListController);

This JavaScript code extends the ListController and adds a new showCustomers method to handle the button click event.

XML Template

Create a file named list_controller.xml in the static/src/xml directory:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="odoo_owl_list.ListView.Buttons" t-inherit="web.ListView.Buttons" t-inherit-mode="extension">
        <xpath expr="//div[hasclass('o_list_buttons')]" position="inside">
            <button t-if="props.resModel == 'sale.order'" class="o_btn_hello btn btn-primary" data-hotkey="r" t-on-click="showCustomers">
                Customers
            </button>
        </xpath>
    </t>
</templates>

This XML template adds the custom button to the sales order list view.

Integrating the Custom Button

To integrate the custom button, create a sale.xml file in the views directory:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <record id="sale_order_tree_inherit" model="ir.ui.view">
            <field name="name">sale.order.inherit</field>
            <field name="model">sale.order</field>
            <field name="inherit_id" ref="sale.sale_order_tree"/>
            <field name="arch" type="xml">
                <xpath expr="//tree" position="attributes">
                    <attribute name="js_class">owl_list_controller</attribute>
                </xpath>
            </field>
        </record>
    </data>
</odoo>

This XML file inherits the existing sale order tree view and applies our custom JavaScript class.

Finalizing the Add-on

Update the __manifest__.py file with the following content:

{
    'name': "Add New Button",
    'summary': "Adds a new button to the user interface.",
    'description': """
This feature introduces a new button to the user interface, 
allowing users to perform a specific action. 
The button is designed to be easily accessible and intuitive, 
enhancing the overall user experience by providing a straightforward way to initiate the desired operation
    """,
    'author': "Adil Akbar",
    'website': "https://www.youtube.com/watch?v=mcDKP-4-4-E",
    'category': 'Sales',
    'version': '0.1',
    'depends': ['base','sale'],
    'data': [
        'views/sale.xml',
    ],
     'assets': {
        'web.assets_backend': [
            'add_new_button/static/src/js/list_controller.js',
            'add_new_button/static/src/xml/list_controller.xml',
        ],
    },
    'installable': True,
    'auto_install': False,
    'application': True,
}

This manifest file defines the add-on’s properties and dependencies.

Conclusion

By following this tutorial, you’ve successfully added a custom “Customers” button to the sales order list view in Odoo 17 using OWL. This enhancement improves user experience by providing quick access to customer information directly from the sales order list.

For more information on Odoo development and OWL, check out the source code from Adil Akbar


Discover more from teguhteja.id

Subscribe to get the latest posts sent to your email.

Leave a Reply

Optimized by Optimole
WP Twitter Auto Publish Powered By : XYZScripts.com

Discover more from teguhteja.id

Subscribe now to keep reading and get access to the full archive.

Continue reading