How to Inherit Odoo PoS using OWL Javascript Framework

/
Odoo PoS/
How to Inherit Odoo PoS using OWL Javascript Framework

In this tutorial, we are going to discuss how we can create a new PoS screen, a new button, a new popup screen and how we can update records from the database and retrieve those records in realtime without reloading the page.

In the previous topic, we have done inheriting a component, a model and the template of Point of Sale. For those who doesn't watched that yet, you can watch the video below.

Project Overview

Let's first discuss the project that we are going to create in this tutorial. We will be adding a new control button Favorites on the right side. I will be showing you how you can add this button in different positions and also based on conditions.

If we click Favorites Button, a new custom Screen will be rendered. In this project, I added a title, a date and a sample popup message. If we click Popup Message button, a new popup screen will show that you can drag. We can add a message and once we confirm it, it will display the message on the screen. This is just to show you how you can pass the data from popup screen to other components.

We will have the list of favorite products on the left side and all actions are added on the top right buttons. Toggle screen to switch between favorite products and all products. When clicking one product, the details will show on the right side. If we mark it as not favorite, it will be removed from favorite products. Clicking toggle favorites to get the updated list. To remove products from favorits, click Favorites Button, select the product and click mark as not Favorite.

The buttons on the bottom right corner is just to show you how you can add the default buttons of PoS.

How to Add New PoS Screen?

Basically, every PoS screen is built using a js module which will return a component. To create a new module, add odoo.define method which accepts two parameters, the first one will be the name of the js module and by default, it should be the name of the module which is point_of_sale and then the name of the component you want like FavoriteProductScreen. You can name it whatever you want.

Next parameter will be the function using require as a parameter. We need to import Registries and Component. Create a new class which will be the name of the component FavoriteProductScreen which will extend PosComponent module. Let's add a setup function and for now add a console log "New Favorite Product Screen".

Then define the template name. For better structure, the template name should be the same with the component name. Then register this component under Registries.Component. Lastly, return FavoriteProductScreen component.

new_pos_screen_name.js

js

odoo.define('point_of_sale.FavoriteProductScreen', function (require){
    'use strict';

    const Registries = require('point_of_sale.Registries');
    const PosComponent = require('point_of_sale.PosComponent');

    class FavoriteProductScreen extends PosComponent {
        setup(){
            super.setup()
            console.log("New Favorite Product Screen")
        }
    }

    FavoriteProductScreen.template = 'FavoriteProductScreen';
    Registries.Component.add(FavoriteProductScreen)

    return FavoriteProductScreen
})

Add New PoS Screen Template

Now the way we can render this screen, is to add a new control button in product screen but what if we want to render it immediately? In order to do that, we can either inherit Chrome component or just temporarily edit chrome component and revert back once our testing is done.

Let's open Chrome component and under getStartScreen method, let's return FavoriteProductScreen instead of ProductScreen.

Then Add a new template and name it same as the component which is FavoriteProductScreen. Add a new div and for now just add a text "This is FavoriteProductScreen".

Now we can start creating the layout. Let's add a new class to this div which we will be using for styling later. Let's type favorite-product-screen and then existing class screen so that we don't need to re-create the same styles for this element.

Let's add a new div with class screen-header, and duplicate it and change it to favorite-content, let's add new div left-pane and right-pane. Let's add some text "Left Pane, Right Pane and Screen Header". Let's check and reload the page. Okay it's working fine.

new_pos_screen_template_name.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="FavoriteProductScreen" owl="1">
        <div class="favorite-product-screen screen">
            <div class="screen-header">Screen Header</div>
            <div class="favorite-content">
                <div class="left-pane">Left Pane</div>
                <div class="right-pane">Right Pane</div>
            </div>
        </div>
    </t>
</templates>

How to Add New POS Button?

Before we create a new button, let's first discuss how to add control buttons. Basically, we can create our own button but there's specific module created for adding control buttons for each component. This module is under ControlButtonsMixin.js Open https://github.com/odoo/odoo/blob/16.0/addons/point_of_sale/static/src/js/ControlButtonsMixin.js. This module has addControlButton method that will allow each component that will inherit this module to add its own control buttons.

This method accepts an object parameter which includes a pos component, condition which is a function that returns either true or false and position by using either replace, before or after.

To create a new button, we need PosComponent, ProductScreen - since this is the screen we want to add the new button, and of course we need the Registries. We need to use the method addControlButton from controlButtonMixin which accepts and object, the first one will be the component. Then we need to add this component to the registries and return the component.

new_button_name.js

js

odoo.define('point_of_sale.FavoriteScreenButton', function(require) {
    'use strict';

    const PosComponent = require('point_of_sale.PosComponent');
    const ProductScreen = require('point_of_sale.ProductScreen');
    const Registries = require('point_of_sale.Registries');

    class FavoriteScreenButton extends PosComponent {
        setup() {
            super.setup();
            console.log("New Favorite Screen Button")
        }

        showFavoriteProduct(){
            this.showScreen('FavoriteProductScreen')
        }
    }
    FavoriteScreenButton.template = 'FavoriteScreenButton';

    ProductScreen.addControlButton({
        component: FavoriteScreenButton,
        position: ['after', 'OrderlineCustomerNoteButton'],
        condition: function(){
            
            return true
        }
    });

    Registries.Component.add(FavoriteScreenButton);

    return FavoriteScreenButton;
});

Then on the template, since we inherited ProductScren, the buttons will automatically added based on the position and conditions you added in the component.

Add New Button For Custom PoS Screen

If you don't want to use addControlButton method, you can directly define a new button and call the component in your custom template.

new_button_name.js

js

odoo.define('point_of_sale.MessagePopupButton', function(require) {
    'use strict';

    const PosComponent = require('point_of_sale.PosComponent');
    const Registries = require('point_of_sale.Registries');

    class MessagePopupButton extends PosComponent {
        setup() {
            super.setup();
        }

        async showMessagePopup(){
            const { confirmed, payload } = await this.showPopup('MessagePopup')
            console.log("confirmed payload ==>", confirmed, payload)

            if (confirmed){
                this.env.pos.popupMessage = payload
            }
        }
    }
    MessagePopupButton.template = 'MessagePopupButton';

    Registries.Component.add(MessagePopupButton);

    return MessagePopupButton;
});

To create a new popup, let's first see how AbstractAwaitablePopupOpen https://github.com/odoo/odoo/blob/16.0/addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js component. This component already have working methods that we can use instead of creating it from scratch. For example, we have confirm method, cancel and getPayload. This is nice since this component will return confirmed if popup has been confirmed and payload that will return any data you want.

Then all of this popups are controlled under PosPopupControllerOpen component where in these triggers show-popup and close-popup has been used under AbstractAwaitablePopup component. These popups will then be stored in this.popups variable which will be called in rendering the component using t-foreach.

To create a new pos popup, we need to import AbstractAwaitablePopup module since this component already extends PosComponent. Using this module, we are able to inherit all existing methods from AbstractAwaitablePopup module, say for example the confirm method and cancel method.

popup_name.js

js

odoo.define('point_of_sale.MessagePopup', function (require){
    'use strict';

    const Registries = require('point_of_sale.Registries');
    const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
    const { useState, useRef, onMounted } = owl;

    class MessagePopup extends AbstractAwaitablePopup {
        setup(){
            super.setup()
            this.state = useState({text_value: ''})
            this.txtRef = useRef('text-value')

            onMounted(()=>this.txtRef.el.focus())
        }

        confirm(){
            super.confirm()
        }

        cancel(){
            super.cancel()
        }

        getPayload(){
            return this.state.text_value;
        }
    }

    MessagePopup.template = 'MessagePopup';
    Registries.Component.add(MessagePopup)

    return MessagePopup
})

Then create a new template for this component. We can just copy existing templates from odoo and edit based on our needs.

popup_teamplate_name.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="MessagePopup" owl="1">
        <Draggable>
            <div class="popup popup-textinput">
                <header class="title drag-handle">
                    Message Popup
                </header>
                <div class="body">
                    <input type="text" placeholder="Message" t-model="state.text_value" t-ref="text-value"/>
                </div>
                <div class="footer">
                    <div class="button confirm highlight" t-on-click="confirm">
                        Confirm
                    </div>
                    <div class="button cancel" t-on-click="cancel">
                        Cancel
                    </div>
                </div>
            </div>
        </Draggable>
    </t>
</templates>

Now in order to show this popup, we need to call it using the PoS button we created earlier. Open #new-button-custom-screen

Add Functionalities using RPC Service

Finally, let's add the final task of this tutorial, where in we are going to add the list of all favorite products, if we click toggle favorites, it will show all products. Then if we click each product, the details will show on the right side. We then have the option to either mark it as favorite or not. This simple functionality will give you an idea on how to update something on the backend and get back some result without reloading the page.

We are going to use useState from OWL to manage the state and onWillStart to initialize the data before rendering to the template. RPC service to call the methods from the backend defined under product.product model.

Component

component_name.js

js

odoo.define('point_of_sale.FavoriteProductScreen', function (require){
    'use strict';

    const Registries = require('point_of_sale.Registries');
    const PosComponent = require('point_of_sale.PosComponent');
    const { useState, onWillStart } = owl;

    class FavoriteProductScreen extends PosComponent {
        setup(){
            super.setup()
            this.state = useState({
                activeProduct: {},
                isFavorite: true,
                favorite_products: [],
                products: [],
            })
            this.date = new Date().toUTCString();

            onWillStart(async ()=>{
                this.state.favorite_products = await this.env.pos.favorite_products
                this.getProducts()
            })
        }

        getProducts(){
            let products = this.env.pos.db.product_by_id;
            let product_list = []
            console.log("products ==>", Object.entries(products))

            if (this.state.isFavorite){
               this.state.favorite_products.forEach(p => product_list.push(products[p]))
            } else {
                Object.entries(products).forEach(p => product_list.push(p[1]))
            }

            this.state.isFavorite = !this.state.isFavorite
            this.state.products = product_list
        }

        setActiveProduct(product){
            this.state.activeProduct = product;
        }

        async markFavorite(product){
            await this.rpc({
                model: 'product.product',
                method: 'mark_favorite',
                args: [[product.id]]
            })

            await this.env.pos.setFavoriteProducts()
            this.state.favorite_products = await this.env.pos.favorite_products
            this.getProducts()
        }

        async markNotFavorite(product){
            await this.rpc({
                model: 'product.product',
                method: 'mark_not_favorite',
                args: [[product.id]]
            })

            await this.env.pos.setFavoriteProducts()
            this.state.favorite_products = await this.env.pos.favorite_products
            this.getProducts()
        }
    }

    FavoriteProductScreen.template = 'FavoriteProductScreen';
    Registries.Component.add(FavoriteProductScreen)

    return FavoriteProductScreen
})

Controller

product_product.py

py

from odoo import models


class ProductProduct(models.Model):
    _inherit = 'product.product'

def getFavoriteProducts(self):
        products = self.search([('available_in_pos', '=', True), ('product_tag_ids.name', '=', 'Favorite')])
        return products.ids

    def mark_favorite(self):
        print("self ==>", self)
        tags = self.env['product.tag'].search([('name', '=', 'Favorite')], limit=1)

        self.product_tag_ids = [(4, tags.id)]

    def mark_not_favorite(self):
        print("self ==>", self)
        tags = self.env['product.tag'].search([('name', '=', 'Favorite')], limit=1)

        self.product_tag_ids = [(3, tags.id)]

Pos Global State

In order to update the records, without reloading the page, we need to add this method in PosGlobalState.

pos_global_state_inherit.js

js

/** @odoo-module */

import Registries from "point_of_sale.Registries"
import { PosGlobalState } from "point_of_sale.models"

const PosGlobalStateInherit = (models) => class extends models {
    constructor(obj) {
        super(obj);
        this.favorite_products = this.getFavoriteProducts()
        this.popupMessage = ""
}

    async getFavoriteProducts(){
        const data = await this.env.services.rpc({
            'model': 'product.product',
            'method': 'getFavoriteProducts',
            'args': [{}]
        })

        return data
    }

    async setFavoriteProducts(){
        this.favorite_products = await this.getFavoriteProducts()
    }
}

Registries.Model.extend(PosGlobalState, PosGlobalStateInherit)

Template

component_template_name.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="FavoriteProductScreen" owl="1">
        <div class="favorite-product-screen screen">
            <div class="screen-header">
                <div>
                    <h1>This is Favorite Product Screen</h1>
                    <p>Date: <span t-esc="date"/></p>
                    <p>Popup Message: <span t-esc="this.env.pos.popupMessage"/></p>
                </div>
                <div class="large-buttons">
                    <button t-on-click="()=>this.showScreen('ProductScreen')">Go Back</button>
                    <button class="red" t-on-click="()=>this.markFavorite(state.activeProduct)">Mark as <br/>Favorite</button>
                    <button class="orange" t-on-click="()=>this.markNotFavorite(state.activeProduct)">Mark as <br/>Not Favorite</button>
                    <button class="blue" t-on-click="getProducts">Toggle Favorites</button>
                </div>
            </div>
            <div class="favorite-content">
                <div class="left-pane">
                    <table class="favorite-list">
                        <thead>
                            <tr>
                                <th>Product Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <t t-foreach="state.products" t-as="product" t-key="product.id">
                                <tr t-on-click="()=> this.setActiveProduct(product)">
                                    <td>
                                        <t t-if="product.default_code">
                                             [<span t-esc="product.default_code"/>]
                                        </t>
                                        <span t-esc="product.display_name"/>
                                    </td>
                                </tr>
                            </t>
                        </tbody>
                    </table>
                </div>
                <div class="right-pane">
                    <div class="selected-product">
                        <h1>Product Details</h1>
                        <p>
                            Name: <span t-esc="state.activeProduct.display_name"/><br/>
                            Code: <span t-esc="state.activeProduct.default_code"/><br/>
                            Price: <span t-esc="state.activeProduct.lst_price"/>
                        </p>
                    </div>
                    <div class="pads">
                        <div class="control-buttons">
                            <MessagePopupButton/>
                        </div>
                        <div class="subpads">
                            <t t-set="_actionName">Custom Action</t>
                            <ActionpadWidget actionName="_actionName"/>
                            <NumpadWidget />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>

Video Tutorial

Watch the video below to better understand How to Inherit Odoo PoS using OWL Javascript Framework