Arsalan YasinHow to Override a Widget in the Odoo 18 POS
Introduction
So, you’re diving into the world of Odoo 18 Point of Sale (POS)? Good choice! If you’ve ever needed to tweak a screen, customize buttons, or change how data is displayed in the POS, you’re in the right place. Welcome to the world of widget overrides.
But before you panic at the word “JavaScript,” relax. I’ll break it all down for you like we’re having a coffee chat.
🔍 Understanding the Basics
What are Widgets in Odoo?
In Odoo, widgets are reusable UI components. Think of them like LEGO blocks—each one has a specific purpose and behavior. You’ll find them everywhere in POS, from buttons to lists to entire screens.
The Role of Widgets in POS
Odoo’s POS is built using JavaScript and the OWL framework. Each screen and its elements are wrapped inside widgets. If you want to change anything on the UI, guess what? You’ll likely be overriding a widget.
Overview of JavaScript Framework in Odoo POS
Odoo 18 POS uses OWL 2.0 (Odoo Web Library). If you’re familiar with React or Vue, you’ll feel right at home. If not—don’t worry. You don’t need to be a JS wizard to override a widget.
🛠️ Preparing the Environment
Setting Up Developer Mode in Odoo
Go to Settings > Activate Developer Mode. You’ll need this to access technical features like views, fields, and debug tools.
Creating a Custom POS Module
Instead of editing the base module (please don’t), create your own module. Think of it as your personal sandbox. Clean, safe, and yours.
Folder Structure Overview
bash
custom_pos_widget/
├── __manifest__.py
├── static/
│ └── src/
│ └── js/
│ └── MyCustomWidget.js
└── views/
└── assets.xml
🧱 Widget Structure in POS
How POS Widgets are Defined
Widgets in POS are usually JavaScript classes that extend core components. They come with templates, logic, and event handling.
Inheritance vs Override – What’s the Difference?
Inheritance = adding to the existing logic.
Override = replacing or redefining behavior.
Most of the time, you’ll be extending—not replacing—the original widget.
Identifying the Widget You Want to Modify
Use the browser’s developer tools (Inspect Element) or look into the POS source files to identify the widget class name.
🧑💻 Overriding a Widget – Step-by-Step
1. Locating the Original Widget Code
Navigate to Odoo’s addons/point_of_sale/static/src and find the widget you want to modify.
2. Creating a New JavaScript File
Make a fresh JS file in your custom module. Name it something like MyCustomWidget.js.
3. Extending the Original Widget
Here’s a simplified example:
javascript
/** @odoo-module **/
import { ProductScreen } from “@point_of_sale/app/screens/product_screen/product_screen”;
const CustomProductScreen = ProductScreen.extend({
setup() {
super.setup();
console.log(“Custom Product Screen Loaded!”);
},
// Add more custom logic here
});
ProductScreen = CustomProductScreen;
4. Adding the Widget to Your Custom POS Module
Declare it in your module manifest and include it in your asset bundle.
📦 Practical Example – Overriding Product Screen Widget
Objective: Add Custom Button to Product Screen
Let’s add a button that shows an alert when clicked.
javascript
import { ProductScreen } from “@point_of_sale/app/screens/product_screen/product_screen”;
import { useListener } from “@odoo/owl”;
const CustomProductScreen = ProductScreen.extend({
setup() {
super.setup();
useListener(‘click-custom-button’, this.onClickCustomButton);
},
onClickCustomButton() {
alert(“Button clicked!”);
},
});
ProductScreen = CustomProductScreen;
⚙️ Loading Custom Widget in POS
Using assets in Manifest
In __manifest__.py, include your asset XML:
python
‘assets’: {
‘point_of_sale.assets’: [
‘custom_pos_widget/static/src/js/MyCustomWidget.js’,
],
}
Ensuring Your Widget Loads First or Last
Use the right order in your assets.xml to avoid conflicts.
🐞 Debugging Tips
Common Mistakes
- Forgetting to import the right class.
- Not using @odoo-module
Not extending properly.
How to Use Web Inspector
Right-click, Inspect, and go to Console or Network tab.
Using console.log Effectively
Sprinkle console.log(‘Step 1’) across your code. Old-school but effective.
👍 Best Practices
- Never touch core code—it breaks during upgrades.
- Always use a custom module.
Comment your code for your future self. (Trust me, future-you will thank you.)
🧪 Testing Your Widget Override
- Test locally on a dev environment.
- Check multiple POS flows.
Test with other third-party modules activated.
🔄 Bonus: Overriding Event Handlers
You can even override event listeners like keyboard presses or button clicks.
🚀 Performance Considerations
Odoo POS runs in the browser, so keep your code light and fast. Avoid unnecessary loops or bulky DOM manipulations.
🔥 Advanced Use Case – Custom Receipt Widget
Want to print “Thank you, John!” at the bottom of the receipt?
Override the ReceiptScreen and add your HTML code dynamically.
📤 Deployment Tips
- Test everything first.
- Deploy with proper backups.
Document your changes.
🏁 Conclusion
Boom! That’s the power of overriding widgets in Odoo 18 POS. Once you get the hang of it, the sky’s the limit. You can customize screens, add buttons, tweak receipts, or make the POS dance (okay maybe not literally 😅).
Stick to the rules, keep your code clean, and have fun while you’re at it!
📩 Need to customize a widget in the Odoo 18 Point of Sale? Let’s connect and configure it for seamless POS enhancements!