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.