The web framework (OWL)

The web client is built with OWL, a reactive component framework. You extend the front end by registering components and services, and by patching existing ones.

Components

A component has a template and a class:

/** @odoo-module **/
import { Component, useState } from "@odoo/owl";
import { registry } from "@web/core/registry";

class MyWidget extends Component {
    static template = "my_app.MyWidget";
    setup() {
        this.state = useState({ count: 0 });
    }
}
registry.category("actions").add("my_app.my_widget", MyWidget);

The template lives in an XML file added to the web.assets_backend bundle in your manifest.

Services

Call the server and shared features through services:

import { useService } from "@web/core/utils/hooks";
// in setup():
this.orm = useService("orm");
this.action = useService("action");
const records = await this.orm.searchRead("my.record", [], ["name"]);

Patching the client

To change existing behavior, patch a prototype:

import { patch } from "@web/core/utils/patch";
import { WebClient } from "@web/webclient/webclient";

patch(WebClient.prototype, {
    setup() {
        super.setup();
        // your additions
    },
});

Load the patch after the module you're patching by depending on it, so your override wraps theirs and super reaches it.

Related

• Call your models from the front end — see the ORM reference.
• Read and write from outside the browser with the External API.