POS (point-of-sale) modules are important for optimizing retail operations and providing a better customer experience. Odoo, a complete software application suite, offers a strong POS solution for effective sales management.
Businesses’ needs change as they expand, as per required customization. The Odoo 18 POS screen may be customized by adding unique buttons, which allows companies to modify the interface to suit their own needs and workflows.
Custom functionality in Odoo is often implemented by creating modules. A module is a self-contained package that contains the code, data, and resources required to implement a certain feature or functionality.
The next step after creating the custom module is to use XML to specify the button structure and look. The Odoo POS module performs the buttons, menus, and other interactive elements of the user interface using XML templates.
In the static/src/xml directory of your module, build a new XML file that defines the structure of your custom button. This usually requires settings of the button’s class, icon, and label, as well as any other characteristics or event handlers required for its operation.
Here is an example of how you might define a custom button in an XML template:
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="your_module.ControlButtons" t-inherit="point_of_sale.ControlButtons" t-inherit-mode="extension" owl="1">
<xpath expr="//t[@t-if='props.showRemainingButtons']/div/OrderlineNoteButton" position="after">
<button class="btn btn-secondary btn-lg py-5" t-on-click="() => this.onClickPopup()">
<i class="fa fa-pencil-square me-1" role="img" aria-label="Alert Popup" title="Custom Alert"/>Alert Popup
</button>
</xpath>
</t>
</templates>
A custom button with a star icon, the caption “Alert PopUp, and a click event handler onClickpopup() are defined in this example. Bootstrap classes are used to style the button's appearance, ensuring that it will blend in with the rest of the Odoo interface POS.
The XML template describes the structure and design of the custom button, but the real functionality is implemented in JavaScript. The Odoo 18 POS system is built on top of the Odoo Web Library (OWL), a modern JavaScript framework for creating flexible and interactive web applications.
Create a new JavaScript file in the static/src/js directory of your module, then specify how your custom button should work. Implementing the required functionality within the component’s methods usually requires building a new component or expanding an existing one.
Here's an example of how you could use the onClickPopup() method on the custom button:
/**@odoo-module **/
import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { _t } from "@web/core/l10n/translation";
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 onClickPopup() {
this.dialog.add(AlertDialog, {
title: _t("Custom Alert"),
body: _t("Choose the alert type"),
});
},
});
You can further alert the button’s look and features to meet your unique needs, even though the examples given above show the fundamental steps of adding a custom button to the Odoo POS screen. This can include adding more functionality, changing the button’s appearance, or integrating it with other Odoo modules or outside services.
