How to Add a Custom Button in Pos Odoo 17

How to add custom
button in POS Odoo 17
Enterprise

Introduction
Enterprise
The Odoo Javascript framework uses a custom component
framework called Owl.
Odoo 17 uses relies on the Odoo Web Library (OWL) for web
development. It employs OWL concepts and principles in its POS
system, with JavaScript code.
To create a new custom button in the Odoo 17 POS screen, we
need to create a new module which uses OWL Framework and
integrate the JS and XML files for the buttons in the point_of_sale
addon module.

Enterprise
Let’s create our custom module pos_custom_button. We will discuss
about creating two different buttons, one in the Product screen and
the other in the Payment Screen of POS. The basic structure of the
module is as

Enterprise
To implement the task to create custom Popup buttons, we use the
OWL concept by creating JS and XML files. In the manifest file of the
module, we need to add these files as the POS assets of point_of_sale
directory.
ie, in the manifest add the code for assets key as:
'assets': {
'point_of_sale._assets_pos': [
'pos_custom_button/static/src/js/*',
'pos_custom_button/static/src/js/PopUp/*',
'pos_custom_button/static/src/xml/pos_product_screen_button.xml',
'pos_custom_button/static/src/xml/pos_pop_up.xml',
]
},

Enterprise
Navigate to the static/src/xml directory and create a new xml file. We
need two xml files.
● Here, pos_pop_up.xml for designing the simple structure of
the pop up window which is to be shown on clicking the button.
● pos_product_screen_button.xml which inherits the addon
templates to show the custom buttons, one in the product
screen and the other on the payment screen.
Creating XML files

Enterprise
Using the <templates> tag, design the pop up in xml. pos_custom_button is the
module name and CustomAlertPopup is the pop up name
<t t-name="pos_custom_button.CustomAlertPopup" owl="1">
<div class="popup custom_popup">
<div class="modal-header justify-content-center">
<h2 class="modal-title">
<t t-esc="props.title"/></h2></div>
<div class="modal-body custom-form-view">
<form><div class="col d-flex justify-content-between align-items-
center p-3">
Pop up button clicked from POS
</div>
</form>
</div>
<div class="footer footer-flex modal-footer justify-content-end">
<div class="button cancel btn btn-lg btn-primary"
t-on-click="cancel">Close
<t t-esc="props.closePopup"/>
</div>
</div></div>
</t>

Enterprise
It's important to specify the module and necessary screens in the JS file by
utilizing /**@odoo-module **/ to define the module. This ensures that the
JavaScript functionalities are properly associated with the Odoo module and its
relevant screens.
The js code which calls this pop up window template can be set as
/** @odoo-module */
import { AbstractAwaitablePopup } from
"@point_of_sale/app/popup/abstract_awaitable_popup";
/**
* CustomAlertPopup component for displaying messages as an alert popup.
* Inherits from AbstractAwaitablePopup.
*/
export class CustomAlertPopup extends AbstractAwaitablePopup {
static template = "pos_custom_button.CustomAlertPopup";
}

Enterprise
After that, let’s create the custom buttons. The code for adding the
template named CreateButton for the button in the Product screen is
as:
<t t-name="point_of_sale.CreateButton">
<button class="control-button btn btn-light rounded-0 fw-bolder"
t-on-click="() => this.onClick()">
<i class="fa fa-pencil-square" role="img"
aria-label="Custom Alert" title="Custom Alert"/>
<span> </span>
<span>Custom Button 1</span>
</button>
</t>

Enterprise
This will create the button as

Enterprise
For the button in the Payment screen, here is the code for adding the
template named CreateButton:
<t t-name="pos_button.PaymentScreenButtons"
t-inherit="point_of_sale.PaymentScreenButtons"
t-inherit-mode="extension">
<xpath expr="//div[hasclass('payment-buttons')]" position="inside">
<button class="button button-partial-payment btn btn-light py-3 text-start
rounded-0 border-bottom"
t-on-click="onClick">
<i class="fa fa-money me-2"/>Custom Button 2
</button>
</xpath>
</t>

Enterprise
The JS file must be added after the button. For the first button created
on the Product screen, add the following modules for extending the
product screen js codes.
/** @odoo-module */
import { ProductScreen } from
"@point_of_sale/app/screens/product_screen/product_screen";
import { useService } from "@web/core/utils/hooks";
import { Component } from "@odoo/owl";
import { usePos } from "@point_of_sale/app/store/pos_hook";
import { CustomAlertPopup } from "@pos_custom_button/js/PopUp/popup_button";

Enterprise
Then, add the custom CreateButton component and add the onClick()
method,
export class CreateButton extends Component {
static template = "point_of_sale.CreateButton";
/* Setup function to initialize the component.*/
setup() { this.pos = usePos();
this.popup = useService("popup");
}
/* Click event handler for the create button.*/
async onClick() {
this.popup.add(CustomAlertPopup)
}}
/* Add the OrderlineProduct CreateButton component to the control buttons in the
ProductScreen.*/
ProductScreen.addControlButton({component: CreateButton,});

Enterprise
Now, just click on the Custom Button 1 on the Product screen. It’ll show
the popup like

Enterprise
For the second button created on the Payment screen, add the js code.
/**@odoo-module **/
import { _t } from "@web/core/l10n/translation";
import { PaymentScreen } from
"@point_of_sale/app/screens/payment_screen/payment_screen";
import { usePos } from "@point_of_sale/app/store/pos_hook";
import { CustomAlertPopup } from
"@pos_custom_button/js/PopUp/popup_button";
import { patch } from "@web/core/utils/patch";
patch(PaymentScreen.prototype, {
async onClick() { this.popup.add(CustomAlertPopup)
}})

Enterprise
Then, just click on the Custom Button on the Payment screen. It’ll
show the popup like

Enterprise
This is how custom buttons are incorporated into the Product and
Payment screens in the point of sale interface.
Additionally, you have the flexibility to position the button wherever
desired by specifying the location and supplying the XPath. The
assets files are integrated into the manifest files, and the button can
be added via both JS and XML files.

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

How to Add a Custom Button in Pos Odoo 17

More Related Content

Similar to How to Add a Custom Button in Pos Odoo 17 (20)

More from Celine George (20)

Recently uploaded (20)

How to Add a Custom Button in Pos Odoo 17