OWL en Odoo 19: primer componente custom

Estructura

Archivos del componente

mi_modulo/
├── static/src/dashboard/
│   ├── mi_panel.js
│   ├── mi_panel.xml
│   └── mi_panel.scss      # opcional
├── views/mi_panel_action.xml
└── __manifest__.py

JavaScript

Componente OWL mínimo

/** @odoo-module **/

import { registry } from "@web/core/registry";
import { Component, onWillStart, useState } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";

export class MiPanel extends Component {
    static template = "mi_modulo.MiPanel";
    static props = ["*"];

    setup() {
        this.orm = useService("orm");
        this.state = useState({ loading: true, items: [] });
        onWillStart(() => this.loadItems());
    }

    async loadItems() {
        this.state.items = await this.orm.call(
            "mi.model", "search_read", [[], ["name", "state"]]
        );
        this.state.loading = false;
    }
}

registry.category("actions").add("mi_modulo_panel", MiPanel);

@odoo-module activa el bundler ES modules. El tag del registry (mi_modulo_panel) debe coincidir con la acción cliente XML.

Plantilla

XML OWL (QWeb)

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mi_modulo.MiPanel">
        <div class="o_mi_panel p-3">
            <t t-if="state.loading">
                <span>Loading…</span>
            </t>
            <t t-else="">
                <ul>
                    <t t-foreach="state.items" t-as="item" t-key="item.id">
                        <li><t t-out="item.name"/></li>
                    </t>
                </ul>
            </t>
        </div>
    </t>
</templates>

Manifest

Assets en __manifest__.py

'assets': {
    'web.assets_backend': [
        'mi_modulo/static/src/dashboard/mi_panel.js',
        'mi_modulo/static/src/dashboard/mi_panel.xml',
        'mi_modulo/static/src/dashboard/mi_panel.scss',
    ],
},

Sin esta declaración, el JS no se carga y verás «Could not get content for…» en consola. Tras cambiar assets: reinicia Odoo o activa modo debug assets.

Acción

Menú y ir.actions.client

<record id="action_mi_panel" model="ir.actions.client">
    <field name="name">Mi Panel</field>
    <field name="tag">mi_modulo_panel</field>
</record>

<menuitem id="menu_mi_panel"
          name="Mi Panel"
          action="action_mi_panel"
          parent="mi_modulo.menu_root"/>

Depuración

Errores frecuentes