Enable Dark Mode!
how-to-create-custom-number-popup-in-odoo-17-pos-using-owl.jpg
By: Aysha Shalin

How to Create Custom Number Popup in Odoo 17 POS Using OWL

Technical Odoo 17 POS

Odoo describes the Odoo Web Library (OWL) as a compact UI framework designed to be the underlying structure for the Odoo Web Client. Built-in TypeScript, OWL draws inspiration from the strengths of both React and Vue, offering a contemporary approach to presenting ideas in a coherent and organized manner.

Now, let's explore the process of creating a custom number popup in Odoo 17.

The following diagram depicts the construction of the custom number popup.

How to Create Custom Number Popup in Odoo 17 POS Using OWL-cybrosys

For creating a custom number popup create a new template that inherits the number popup template. Create a new XML file number_popup.xml.

<templates id="template" xml:space="preserve">
        <t t-name="CustomPopup">
        <div class="popup popup-number custom-popup w-auto">
            <div class="modal-header drag-handle">
                <h4 class="modal-title title"><t
                   t-esc="props.title"/></h4>
                <span t-if="props.subtitle" class="subtitle 
                    p-1"><t t-esc="props.subtitle"/></span>
            </div>
            <div class="input-symbol pt-3">
                <div class="popup-input value active form-control 
                   form-control-lg w-75 mx-auto">
                    <span class="input-value"
                t-att-class="{ 'highlight': state.toStartOver 
                    }"><t t-esc="inputBuffer"/></span>            
                    <span t-if="props.inputSuffix"><t 
                      t-esc="props.inputSuffix" /></span>
                </div>
            </div>
            <Numpad buttons="getNumpadButtonsPOS()" 
                class="'mx-auto my-3 w-75 max-width-325px'"/>
            <footer class="footer centered modal-footer
                 justify-content-center">
                <button class="button cancel btn btn-lg 
                   btn-secondary" t-on-mousedown.prevent="cancel">  
                    <t t-esc="props.cancelText" />
                </button>
            </footer>
        </div>
    </t>
</templates>

In this code,

<Numpad buttons="getNumpadButtonsPOS()" class="'mx-auto my-3 w-75 max-width-325px'"/>

This line returns the numbers in the number popup. We can pass the numbers and the values needed in the function getNumpadButtonsPOS(). 

Now, create a js file number_popup.js

/** @odoo-module **/
import { AbstractAwaitablePopup } from "@point_of_sale/app/popup/abstract_awaitable_popup";
import { _t } from "@web/core/l10n/translation";
import { useState } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
import { Numpad } from "@point_of_sale/app/generic_components/numpad/numpad";
export class CalculatorPopup extends AbstractAwaitablePopup {
    static template = "CustomPopup";
    static components = { Numpad };
    static defaultProps = {
        cancelText: _t("Close"),
        title: _t("Number Popup"),
        getInputBufferReminder: () => false,
    };
    setup() {
        super.setup();
        let startingBuffer = "";
        if (typeof this.props.startingValue === "number" && 
             this.props.startingValue > 0) {
            startingBuffer = this.props.startingValue
                .toFixed(this.props.nbrDecimal)
                .toString()
                .replace(".", this.decimalSeparator);
        }
        this.state = useState({
            buffer: startingBuffer,
        });
        this.numberBuffer = useService("number_buffer");
        this.numberBuffer.use({
            triggerAtEnter: () => this.confirm(),
            triggerAtEscape: () => this.cancel(),
            state: this.state,
        });
    }
    getNumpadButtonsPOS() {
        return [
            { value: "1" , class:"input-btn"},
            { value: "2" , class:"input-btn"},
            { value: "3" , class:"input-btn"},
            { value: "4" , class:"input-btn"},
            { value: "5" , class:"input-btn"},
            { value: "6" , class:"input-btn"},
            { value: "7" , class:"input-btn"},
            { value: "8" , class:"input-btn"},
            { value: "9" , class:"input-btn"},
            { value: "0" , class:"input-btn"},
            { value: "Delete", text:"AC",
                      class:"operator-btn"},
            { text:"+" , class:"operator-btn"},
            { text: "-", class:"operator-btn"},
            { value:  
              this.env.services.localization.decimalPoint, 
                    class:"operator-btn"},
        ];
    }
}

We passed the numbers and other values through the function getNumpadButtonsPOS(). And this code will return a number popup like this.

How to Create Custom Number Popup in Odoo 17 POS Using OWL-cybrosys

Using Odoo's Web Library (OWL), the creation of a custom number popup in Odoo 17 is achieved by creating a JavaScript and XML file. By employing the getNumpadButtonsPOS() function, this code facilitates the generation of a numeric interface for seamless integration into the Odoo Web Client.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message