How to Create Custom Hooks in Odoo 18 OWL

The web interface architecture in Odoo 18 leverages the capabilities of the OWL library (Odoo Web Library). Hooks in OWL provide an efficient mechanism for code reuse and state management across different UI elements. The reactive architecture of OWL's Observer pattern enables dynamic UI updates based on state changes.

This guide explores crafting your own specialized Hook with custom capabilities for Odoo 18. Whether enhancing interface behaviors or adapting to specialized workflows, this walkthrough provides the necessary technical approach.

Let's examine the construction of custom hooks for Odoo 18.

Developing the Hook

First, we'll establish the custom hook code:

pointer_tracker.js

/** @odoo-module **/
import { useState, onWillDestroy } from "@odoo/owl";
// Defining cursor position tracking functionality
export function cursorTracker() {
    const coordinates = useState({ x: 0, y: 0 });
    function refreshPosition(e) {
        coordinates.x = e.clientX;
        coordinates.y = e.clientY;
    }
    window.addEventListener("mousemove", refreshPosition);
    onWillDestroy(() => {
        window.removeEventListener("mousemove", refreshPosition);
    });
    return coordinates;
}

We're utilizing existing OWL functions alongside our custom logic. The code creates a position tracker that updates with cursor movement and properly cleans up event listeners when components are destroyed.

Directory Structure for Odoo 18 Modules

The implementation requires the following directory arrangement:

cursor_utility/
+-- __init__.py
+-- __manifest__.py
+-- static/
    +-- src/
         +-- js/
              +-- pointer_tracker.js

<?xml version="1.0" encoding="UTF-8" ?>
<templates>
    <t t-name="cursor_display.PositionIndicator" owl="1">
        <div class="d-flex align-items-center m-2">
            <div class="text-white m-2">Cursor: <t t-esc="pointerPosition.x"/>, <t t-esc="pointerPosition.y"/></div>
        </div>
    </t>
</templates>

This creates a visual element showing cursor coordinates. Odoo 18 enforces module-prefixed template naming conventions.

CursorDisplay.js

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { cursorTracker } from "@cursor_utility/js/pointer_tracker";
import { Component } from "@odoo/owl";
class PositionIndicator extends Component {
    static template = "cursor_display.PositionIndicator";
    setup() {
        this.pointerPosition = cursorTracker();
    }
}
export const menuPositionItem = {
    Component: PositionIndicator,
    // Positioning priority in system menu
    sequence: 25,
};
registry.category('systray').add('cursor_position', menuPositionItem);

Module Structure for the Implementation

cursor_display/
+-- __init__.py
+-- __manifest__.py
+-- static/
    +-- src/
          |-js/
          |  +-- cursor_display.js
          |
          |-xml/
             +-- cursor_display.xml

Installing both modules enables real-time cursor position display in the system menu, powered by our custom hook.

Conclusion

Bespoke hooks in Odoo 18 provide powerful tools for extending interface capabilities according to specific requirements. The OWL framework in Odoo 18 features improved import consistency, enhanced resource organization, and performance optimizations.

Hooks enable straightforward customization and extension of Odoo interfaces, creating precisely tailored experiences. Whether enhancing existing processes or developing new features, hooks provide the flexibility needed to maximize Odoo 18's potential.

To read more about Overview of Owl Hooks in Odoo 18, refer to our blog Overview of Owl Hooks in Odoo 18.