Mastering Odoo 18 Client Actions

Client Actions are one of the most powerful yet often overlooked features in Odoo. They allow you to take full control of the Odoo web client — from reloading views dynamically, to triggering custom JavaScript, to building interactive single-page interfaces without reloading the entire page.

If you’re an Odoo developer looking to make your modules more dynamic, intuitive, and modern, mastering Client Actions is a must. In this tutorial, you’ll learn how to create a simple Client Action, test it, and then scale it up into a custom OWL component for a full-featured user interface.

📌 Getting Started: Create a Basic Client Action

Let’s start by setting up a simple Client Action that logs a message to the console.

1️⃣ Folder Structure

Inside your module’s static folder, create:

static/src/actions

Inside actions, create a new file:

client_actions.js

2️⃣ Write the Client Action

In Odoo 18, there’s no need to declare @odoo-module. Just import what you need:

import { registry } from "@web/core/registry";

function pollClientAction(env, action) {
    console.log("Poll client action");
}

registry.category("actions").add("poll_client_action", pollClientAction);

Here:

• pollClientAction is your custom function.
• You register it under the actions category with a unique tag: poll_client_action.

3️⃣ Add It to the Manifest

Open your module’s __manifest__.py and under assets, include your new actions:

"assets": {
    "web.assets_backend": [
        "your_module_name/static/src/actions/**/*.js",
    ],
}

The **/*.js syntax ensures all .js files inside actions are included.

🧪 How to Test the Client Action

Next, let’s trigger it from the backend.

1️⃣ Add a Backend Method

For example, in poll.question model:

def action_poll_client_action(self):
    return {
        "type": "ir.actions.client",
        "tag": "poll_client_action",
    }

2️⃣ Add a Button

Add a new button to your form view:

<button name="action_poll_client_action"
        type="object"
        string="Client Action"/>

3️⃣ Test It

1. Restart Odoo and upgrade your module.
2. Enable debug mode.
3. Open your Poll form view, inspect the console, and click the Client Action button.

You should see Poll client action in the console — success!

⚙️ Using env and action Parameters

Client Actions receive two useful parameters:

• env — exposes Odoo services like notifications.
• action — contains contextual data like context, domain, and more.

Try logging them:

function pollClientAction(env, action) {
    console.log(env);
    console.log(action);

    env.services.notification.add("This is a client action");
}

Reload, click the button, and you’ll see the env object, the action data, and a notification.

📂 Passing Extra Context

Want to pass extra data from Python? Add context and params:

def action_poll_client_action(self):
    return {
        "type": "ir.actions.client",
        "tag": "poll_client_action",
        "context": {
            "default_name": "Polling",
        },
        "params": {
            "answer_ids": self.answer_ids.ids,
            "record_id": self.id,
            "record_name": self.name,
        }
    }

Click the button — check your console — your custom data is there!

🧩 Building an Interactive Client Action with OWL

Basic Client Actions are great, but the real power comes when you combine them with OWL components. For example, the Discuss module in Odoo is built this way.

Let’s build a simple Poll Dashboard component.

1️⃣ Create the Component

Structure:

static/src/components/poll_dashboard/poll_dashboard.js
static/src/components/poll_dashboard/poll_dashboard.xml

poll_dashboard.js:

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { standardActionServiceProps } from "@web/webclient/actions/action_service";

export class PollDashboard extends Component {
    static template = "poll.Dashboard";
    static props = { ...standardActionServiceProps };
}

registry.category("actions").add("poll_dashboard", PollDashboard);

poll_dashboard.xml:

 <t t-name="poll.Dashboard">
    <div class="p-3">
        <h1>Poll Dashboard</h1>
    </div>
</t>

2️⃣ Update the Manifest

Add your new components:

"assets": {
    "web.assets_backend": [
        "your_module_name/static/src/actions/**/*.js",
        "your_module_name/static/src/components/**/*.js",
    ],
},

3️⃣ Add a Menu Item

Create a new Client Action and menu item:

<record id="action_poll_dashboard" model="ir.actions.client">
    <field name="name">Dashboard</field>
    <field name="tag">poll_dashboard</field>
</record>

<menuitem id="menu_poll_dashboard"
          name="Dashboard"
          action="action_poll_dashboard"
          parent="menu_poll_main"
          sequence="1"/>

4️⃣ Test It

• Restart Odoo.
• Upgrade your module.
• Open your app — your custom Poll Dashboard now appears.

If you see a warning about props, you’re missing standardActionServiceProps — just ensure you’ve imported it and spread it inside your component.

🎉 Final Tips

✅ Design freely — You now have a fully custom frontend inside Odoo.

✅ Use OWL features — reactivity, lifecycle hooks, stores, etc.

✅ Use Bootstrap — Odoo 18 uses the latest Bootstrap, so your UI will look modern by default.

📢 Conclusion

That’s it! You’ve learned how to:

• Create a basic Client Action.
• Pass context and params.
• Build a powerful OWL-based interface.
• Hook it up to menus and actions.

With these techniques, you can take your Odoo apps to the next level.

Happy coding, and see you in the next tutorial! 🚀✨