How to modify_create components control buttons in Pos odoo.pptx

How to modify/create
components control
buttons in Pos Odoo
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.
While talking about creating or modifying control buttons using
the components defined in Odoo PoS, the very first method that
comes for the rescue is ‘patching’. It’s used to modify or extend the
behavior of existing components without totally replacing it.

Enterprise
Let’s create our custom module patch_in_odoo. We will discuss
about creating a button in the Payment Screen of POS. The basic
structure of the module is as

Enterprise
To implement the task to create custom Popup button and to show a
dialog box, we use the OWL concept of patching inside JS file. 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': [
'patch_in_odoo/static/src/js/*',
'patch_in_odoo/static/src/js/PopUp/*',
'patch_in_odoo/static/src/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_payment_screen_button.xml which inherits the addon
templates to show the custom button on the payment screen.
Creating XML files

Enterprise
Using the <templates> tag, design the pop up by in xml. patch_in_odoo is the
module name and CustomAlertPopup is the pop up name
<t t-name="patch_in_odoo.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 = "patch_in_odoo.CustomAlertPopup";
}

Enterprise
After that, let’s create the custom button. The code for adding the
template named PaymentScreenButtons for the button in the
Payment screen is as:
<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
</button>
</xpath>
</t>

Enterprise
This will create the button as

Enterprise
The JS file must be added after the button. For the button created on
the Payment screen, add the following modules for extending the
product screen js codes.
/** @odoo-module */
import { PaymentScreen } from "@point_of_sale/app/screens/payment_screen/payment_screen";
import { CustomAlertPopup } from "@patch_in_odoo/js/PopUp/popup_button";
import { patch } from "@web/core/utils/patch";
First, the PaymentScreen component is imported.
Then, from the same module, CustomAlertPopup is imported. We
have just discussed about the popup’s creation and template.
And last one is to import the patch.

Enterprise
Then, for the button created on the Payment screen, add the patching
js code for opening the mentioned popup window as
patch(PaymentScreen.prototype, {
async onClick() {
this.popup.add(CustomAlertPopup)
}})
For the patch() method, we passed the imported PaymentScreen
component’s prototype as first argument. Then, the concerned
onClick() method is defined which opens the custom Popup window.

Enterprise
Then, just click on the Custom Button on the Payment screen. It’ll
show the popup like
In this way, the POS component control buttons can be created or
modified using the method of patching in Odoo 17.

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 modify_create components control buttons in Pos odoo.pptx

More Related Content

More from Celine George (20)

Recently uploaded (20)

How to modify_create components control buttons in Pos odoo.pptx