How To Customize Your Odoo 18 POS Screen with A Custom Button ?

Odoo 18 has arrived with several enhancements across its modules, and one standout area of improvement is the Point of Sale (POS) system. With a cleaner UI, better performance, and improved modularity via OWL JS (Odoo Web Library), customizing the POS screen is more intuitive and powerful than ever. In this blog, we'll walk you through how to add a custom button to your Odoo 18 POS screen, enabling tailored functionality to match your business needs.

Why Customize the POS Screen in Odoo 18?

The POS screen is the heart of in-store operations. Enhancing its functionality can:

Instead of altering core code, you can extend POS capabilities cleanly using OWL components.

Understanding the POS Architecture in Odoo 18

Odoo 18's POS frontend is built using OWL JS, a modern JavaScript framework based on a component structure. Here's a basic overview:

To customize, you'll typically:

1. Extend or patch a frontend component
2. Add your logic using JavaScript
3. Optionally call backend methods using RPC

Step-by-Step Guide to Add a Custom Button in Odoo 18 POS

Step 1: Create a Custom Module

Structure your custom module:

custom_pos_button/
├── __manifest__.py
├── static/
│   └── src/
│       └── js/
│           └── CustomButton.js
└── xml/
    └── CustomButton.xml

manifest.py:

{
    'name': 'Custom POS Button',
    'depends': ['point_of_sale'],
    'assets': {
        'point_of_sale.assets': [
            'custom_pos_button/static/src/js/CustomButton.js',
            'custom_pos_button/static/src/xml/CustomButton.xml',
        ],
    },
}

Step 2: Add the Button Component with OWL

Create CustomButton.js:

import { PosComponent } from '@pos/core/component';
import Registries from '@pos/core/registry';
import { ConfirmPopup } from "@point_of_sale/app/utils/confirm_popup/confirm_popup";
 
class CustomButton extends PosComponent {
    onClick() {
        this.showPopup(ConfirmPopup, {
            title: 'Custom Action',
            body: 'You clicked the custom button!',
        });
    }
}
 
CustomButton.template = 'CustomButton';
Registries.Component.add(CustomButton);
 
export default CustomButton;

Step 3: Inject Button into POS Screen

To add it to the ProductScreen:

import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
import CustomButton from './CustomButton';
 
const ProductScreenWithButton = (ProductScreen) =>
    class extends ProductScreen {
        setup() {
            super.setup();
        }
        get buttons() {
            return [
                ...super.buttons,
                {
                    component: CustomButton,
                    position: 'left',
                },
            ];
        }
    };
 
Registries.Component.extend(ProductScreen, ProductScreenWithButton);

Step 4: Add Backend Logic

In models.py, add:

class PosCustomAction(models.TransientModel):
    _name = 'pos.custom.action'
 
    @api.model
    def fetch_loyalty_points(self, partner_id):
        partner = self.env['res.partner'].browse(partner_id)
        return {'points': partner.loyalty_points}

In JS:

const result = await this.rpc({
    model: 'pos.custom.action',
    method: 'fetch_loyalty_points',
    args: [partnerId],
});

Sample Use Case: Add a "Loyalty Check" Button

Let's say you want to add a button that fetches and shows customer loyalty points:

• On click, the button checks if a customer is selected.
• It then makes an RPC call to fetch loyalty points.
• Finally, it displays the points in a popup.

This is perfect for stores with customer loyalty programs.

Best Practices for POS Customization

Final Thoughts

Customizing the Odoo 18 POS screen isn't just for developers—it's a way for businesses to tailor operations to their needs. Adding a custom button opens the door to limitless possibilities—loyalty programs, discounts, quick actions, and more.

With OWL JS and a modular architecture, Odoo 18 makes customization straightforward, clean, and powerful. Ready to take your POS to the next level?

FAQs

in Odoo 18