How to Create a Custom Screen in Odoo 17 POS

How to Create a Custom
Screen in Odoo 17 POS
Enterprise

Introduction
Enterprise
In Odoo ERP’s Point Of Sale module, we can handle sale transactions
efficiently with very user friendly UI.
In Odoo POS, businesses can configure custom screens to capture specific
data points needed for advanced reporting and analytics, providing better
insights into sales and operations.

Enterprise
Let’s demonstrate the process by creating a custom module
pos_custom_screen which has the structure as

Enterprise
Add the files in the manifest as follows,
'assets': {
'point_of_sale._assets_pos': [
'pos_custom_screen/static/src/**/*',
]
},

Enterprise
For creating the custom screen, we are just creating a custom button
named ‘Product Combos’ on the billing screen of the POS module. For
that, type the xml code in the product_combos_button.xml file as shown
below.
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="pos_custom_screen.ProductCombosButton" owl="1">
<button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
<i class="fa fa-align-justify me-1" role="img" aria-label="Product Combos" title="Product Combos" />
Product Combos
</button>
</t>
</templates>
Here, on onclick() method is set for the button.

Enterprise
Now, create the js file for the button
/** @odoo-module */
import { Component } from "@odoo/owl";
import { ProductScreen } from
"@point_of_sale/app/screens/product_screen/product_screen";
import { usePos } from "@point_of_sale/app/store/pos_hook";
export class ProductCombosButton extends Component {
static template = "pos_custom_screen.ProductCombosButton";
setup() {
this.pos = usePos();
}
async click() {
this.pos.showScreen("ProductCombosScreen");
}
}
ProductScreen.addControlButton({
component: ProductCombosButton,
condition: function () {
return true;
},
});

Enterprise
Here, a new Odoo Component ProductCombosButton here by extending
from the Component class as
export class ProductCombosButton extends Component
static template = "pos_custom_screen.ProductCombosButton";
ProductScreen.addControlButton({
component: ProductCombosButton,
condition: function () {
return true;
},
});
The early created xml template is set here
Then, inside the click(), we show the ProductCombosScreen
this.pos.showScreen("ProductCombosScreen");
Finally, the component is added to the control buttons of the
ProductScreen.

Enterprise
This will create the button as

Enterprise
On clicking the Product Combos button, our aim is to display the
product combo screen. So, let's proceed by creating the JavaScript
file for the custom screen in the file named
product_combos_screen.js
The js code start with the import statements as
/** @odoo-module */
import { registry } from "@web/core/registry";
import { usePos } from "@point_of_sale/app/store/pos_hook";
import { Component } from "@odoo/owl";

Enterprise
Now, create the class from Component class and define the template and
add the custom screen to the pos_screens registry.
export class ProductCombosScreen extends Component {
static template = "pos_custom_screen.ProductCombosScreen";
setup() {
super.setup(...arguments);
this.pos = usePos();
}
getComboList() {
var comboList = [];
Object.values(this.pos.db.combo_by_id).forEach(function(combo) {
comboList.push({
id: combo.id,
name: combo.name,
base_price: combo.base_price,
combo_line_ids: combo.combo_line_ids,
});
});
return comboList
}}
registry.category("pos_screens").add("ProductCombosScreen",
ProductCombosScreen);

Enterprise
Here we define a method getComboList which fetches some basic
information about the product such as id, name, base_price and
combo_line_ids. These details are then returned to the template
pos_custom_screen. ProductCombosScreen to display the details.
For displaying those details about the Combo products in the new
screen, we need to design the template for that. It is saved in the
product_combos_screen.xml file.
The xml code start as
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="pos_custom_screen.ProductCombosScreen" owl="1">

Enterprise
<div class="controls d-flex align-items-center justify-content-between mt-1 mt-md-0 p-2 bg-400">
<div class="buttons d-flex gap-2">
<button class="discard btn btn-lg btn-light" t-
on-click="() => this.pos.showScreen('ProductScreen')">
<span class="search-icon">
<i class="fa fa-
angle-double-left"/>
</span>
Back
</button>
</div>
</div>
Then, inside the ProductCombosScreen template, we define a main
div and inside that, the first <div> to navigate back to the billing
screen as

Enterprise
<div class="orders overflow-y-auto flex-grow-1">
<div class="header-row d-flex text-bg-700 fw-bolder">
<div class="col wide p-2">Combo Name</div>
<div class="col wide p-2">Price</div>
<div class="col wide p-2">No of products</div>
</div>
<t t-set="comboList" t-value="getComboList()"/>
<t t-foreach="comboList" t-as="combo" t-key="combo.id">
<div class="order-row">
<div class="col wide p-2 ">
<div><t
t-esc="combo.name"/></div>
</div>
<div class="col wide p-2">
<div><t t-
esc="combo.base_price"/></div>
</div>
<div class="col wide p-2"><div>
<t t-
esc="combo.combo_line_ids.length"/></div>
</div></div></t>
</div>
And the second div to show the Product combo details as

Enterprise
This code will show the new screen as

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 Create a Custom Screen in Odoo 17 POS

More Related Content

Similar to How to Create a Custom Screen in Odoo 17 POS (6)

More from Celine George (20)

Recently uploaded (20)

How to Create a Custom Screen in Odoo 17 POS