Odoo POS 18 – How to add Custom Button in Odoo Point of Sale Version 18
December 4, 2024
Odoo point of sale (POS) how to add custom buttons
First of all create an xml file with name custom_button.xml inside :
your_app>static>src>app>custom_button>custom_button.xml
Directory Structure of your custom app
your_app/
├── __init__.py
├── __manifest__.py
├── static/
│ └── src/
│ └── app/
│ └── custom_button/
│ └── custom_button.xml
│ └── custom_button.js
Add The xml code inside custom_button.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<templates id=”template” xml:space=”preserve”>
<t t-name=”pos_usc.ControlButtons” t-inherit=”point_of_sale.ControlButtons” t-inherit-mode=”extension”>
<xpath expr=”//button[@class=’btn btn-light btn-lg flex-shrink-0 ms-auto’]” position=”replace”>
<button class=”btn btn-success btn-lg flex-shrink-0 ms-auto” t-on-click=”() => this.onClickPopupSingleField()”>Custom Button</button>
</xpath>
</t>
</templates>
Add the js code to handle click event
your_app>static>src>app>custom_button>custom_button.js:
/**@odoo-module **/
import { ControlButtons } from "@point_of_sale/app/screens/product_screen/control_buttons/control_buttons";
import { patch } from "@web/core/utils/patch";
patch(ControlButtons.prototype, {
async onClickPopupSingleField() {
console.log('button click');
}
});
Finally Add the reference in __manifest__.py
add the file reference in manifest file to load the assets in pos:
'assets': {
'point_of_sale._assets_pos': [
'your_app/static/src/app/custom_button/custom_button.js',
'your_app/static/src/app/custom_button/custom_button.xml',
],
},
Restart the service
Once all is done. Now restart the odoo service and upgrade the app. (if assets not loaded properly clear the cache of browser)
