Create a Custom Screen in Odoo 17 POS

A productive interface for managing sales transactions is offered by the Odoo 17 Point of Sale (POS) module. However, there are situations in which adding customized screens to improve POS functionality becomes essential. The goal of the blog is to guide you through the Odoo 17 POS custom screen development process.

Creating a Custom Screen

We must create a new module with the required XML and JavaScript files to create a custom screen. The XML file specifies the screen’s layout, while the JavaScript file specifies how the custom screen will behave.

The purpose of this example is to create a module called custom_pos_screen that will show a screen with the history of product combos. To display this screen, press the control button. First, let’s create the folders that follow:

And include the following kinds of files within the manifest:

‘assets’:

{

       'point_of_sale._assets_pos': [

            'custom_pos_screen/static/src/app/**/*', 

    },

In the file product_combos_button.xml, create a template that follows for generating the "Product Combos" control button:

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">

    <t t-name="custom_pos_screen.ProductCombosButton" owl="1"><t t-name="custom_pos_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>

Next, open product_combos_button.js and create the JavaScript file for the control 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 = "custom_pos_screen.ProductCombosButton";

    setup() {

        this.pos = usePos();

    }

    async click() {

        this.pos.showScreen("ProductCombosScreen");

    }

}

ProductScreen.addControlButton({

    component: ProductCombosButton,

    condition: function () {

        return true;

    },

});

A new Odoo POS component called ProductCombosButton is created in this code using JavaScript to function as a control button for displaying a customized screen called ProductCombosScreen. This component has a template set to “custom_pos_screen.ProductCombosButton,” and it is defined by extending the base Component class. By using the usePos hook to access the Point of Sale store, the setup method initializes the component. The Point of Sale is instructed to display the ProductCombosScreen by the click method, which is activated by clicking a button. Lastly, the component is added to the ProductScreen’s control buttons.

Results will be as follows.

Our goal is for the product a combination screen to appear after pressing the button. Thus, let’s move forward and create the product_combos_screen.js file containing the JavaScript code for the custom screen:

/** @odoo-module */
import { registry } from "@web/core/registry";
import { usePos } from "@point_of_sale/app/store/pos_hook";
import { Component } from "@odoo/owl";
export class ProductCombosScreen extends Component {
    static template = "custom_pos_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);

We have added this display to the pos_screens database, set the template as ProductCombosScreen, and specified a function in this file for retrieving the list of combo items.

Add the subsequent code to the XML file to define a template now:

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">

        <t t-name="custom_pos_screen.ProductCombosScreen" owl="1">

        <div class="combo-screen screen h-100 bg-100">

                        <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>

                        <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>

                </div>

        </t>

</templates>

Here, the combo products are listed by iterating through the combo list, and there is a back button to take you back to the product screen.

The combo screen now appears as follows when we click the Product Combos button: