Odoo Pro Tip: Dynamic Views with JavaScript – Make Your Forms Smarter!

Imagine this: You’re filling out a sales order in Odoo, and as soon as you select a product, the form instantly shows you its current stock levels, pricing tiers, or even supplier details—without refreshing the page. No more switching tabs or guessing inventory. Sounds like magic? It’s not! With a little JavaScript, you can make your Odoo views dynamic, responsive, and way more efficient.

If you’ve ever wished your Odoo forms could react to user input in real-time, this guide is for you. Whether you're a beginner developer or an Odoo power user, we’ll break down how to use JavaScript to create smarter views—one small step at a time.

Why Dynamic Views Matter in Odoo

Odoo’s default forms work well, but they often require manual refreshes or extra clicks to fetch updated data. Dynamic views solve this by:

✅ Reducing clicks – Automatically populate fields based on selections.
✅ Improving accuracy – Show real-time data (e.g., stock levels, customer credit limits).
✅ Enhancing UX – Make forms feel faster and more intuitive.

Example use cases:

• Display inventory availability when a product is selected.
• Auto-fill customer shipping address based on a dropdown.
• Show/hide fields conditionally (e.g., only show "discount code" if "promo" is checked).

Getting Started: Basic JavaScript Tweaks

You don’t need to be a JavaScript expert—just a few lines of code can make a big difference. Here’s how to begin:

1. Injecting JavaScript into Odoo Views

Odoo’s web framework allows JS customization via widgets or custom modules. The easiest way? Use the "web_editor" or create a custom JS file.

Example: Auto-Update a Field on Selection

Let’s say you want the "Quantity" field to warn users if stock is low.

odoo.define('custom_dynamic_views', function (require) {
    "use strict";

    var FormController = require('web.FormController');

    FormController.include({
        _onFieldChanged: function (event) {
            this._super.apply(this, arguments);
            if (event.data.changes.product_id) {
                // Fetch stock info when product changes
                var product_id = event.data.changes.product_id.id;
                this._rpc({
                    model: 'product.product',
                    method: 'get_stock_info',
                    args: [product_id],
                }).then(function (stock_data) {
                    if (stock_data.qty_available < 10) {
                        alert("Low stock! Only " + stock_data.qty_available + " left.");
                    }
                });
            }
        },
    });
});

(This assumes you have a get_stock_info method in your product.product model.)

2. Conditionally Hiding/Showing Fields

Want to hide a "Discount Code" field unless a checkbox is ticked?

odoo.define('hide_discount_field', function (require) {
    "use strict";

    var FormRenderer = require('web.FormRenderer');

    FormRenderer.include({
        _handleAttributeModifiers: function (node) {
            this._super.apply(this, arguments);
            if (node.attrs.name === 'discount_code') {
                var hasPromo = this.state.data.has_promo;
                node.attrs.invisible = !hasPromo;
            }
        },
    });
});

Leveling Up: Advanced Dynamic Features

Once you’re comfortable, try these:

1. Real-Time Data Fetching

Use RPC calls to pull live data (e.g., currency rates, delivery costs).

2. Dynamic Domain Filters

Change dropdown options based on another field (e.g., only show products from the selected category).

3. Inline Computations

Calculate totals, taxes, or discounts instantly without saving.

Final Tip: Start Small!

You don’t need to rewrite your entire Odoo UI at once. Pick one annoying manual task (like checking stock) and automate it first.

Your Turn!

What’s the most frustrating repetitive action in your Odoo workflow? Could a few lines of JavaScript fix it? Try tweaking one small feature today and see the difference!

Stuck? Ask in the comments—we’re happy to help! 🚀

(Need a step-by-step guide for a specific use case? Let us know!)