Enable Dark Mode!
By: Megha K

What is Hooks in Odoo 16 OWL Framework

Technical Odoo 16

For handling the front end, Odoo uses the Owl framework. The Odoo Web Library is a framework from Odoo that meets  Odoo’s fall front-end requirements. In this blog, we will look at what hooks are in the OWL framework and how we use them.

Owl hooks are a way to factorize code, even depending on the lifecycle of certain components. Most hooks provided by Owl are related to a component's lifecycle, but some provide a way to build specific hooks. Using these hooks, we can possibly build many customized hooks that help to solve many problems or make some common tasks easier.  Let us discuss some of the common hooks that we used in Odoo 16.

* use assets

* useAutofocus

* useful

* usePager


use assets:

useAssets is used to load assets. If we need to load some assets in their onWillStart we can use these hooks. It internally calls loadAssets. The location of the asset is @web/core/utils/hooks. 

So first import this.

import { loadJS } from "@web/core/assets";

Then we can use this by this way.

await loadJS("/partner_autocomplete/static/lib/jsvat.js");


Focus an element referenced by t-ref=”autofocus” on the current element when it appears in the DOM, if it has not been displayed before.

Location: @web/core/utils/hooks

First we need to import useAutofocus.

import { useAutofocus } from "@web/core/utils/hooks";	

Define the template like this. Add t-ref as autofocus in the input field

<t t-name="Comp" owl="1">
  <input t-ref="autofocus" type="text"/>

Then we will create a component for this.

class Comp {
  setup() {
    this.inputRef = useAutofocus();
  static template = "Comp";


This is used to add or clear an event listener to a bus.This hook ensures that the listener 

is properly cleared while the component is unmounted.First, we need to import the useBus.

Definition: useBus(bus, eventName, callback)


bus - the target event bus.

eventName - name of the event.

callback - listener callback function.

import { useBus } from "@web/core/utils/hooks";
class MyComponent {
  setup() {
    useBus(this.env.bus, "some-event", event => {


This is used to display the pager of the control panel of a view.

Definition:  usePager(getPagerProps)

Arguments: getPagerProps- it is a function that returns pager props

First we need to import usePager

import { usePager } from "@web/search/pager_hook";
class CustomView {
  setup() {
    const state = owl.hooks.useState({
      offset: 0,
      limit: 80,
      total: 50,
    usePager(() => {
      return {
        offset: this.state.offset,
        limit: this.state.limit,
        total: this.state.total,
        onUpdate: (newState) => {
          Object.assign(this.state, newState);


This hooks helps to position an HTMLElement relatively to another HTMLElement.
Definition: usePosition(reference[, options])
Arguments: reference - it is the target HTMLElement to be positioned from
options - it is the positioning options.
First, we need to import the usePosition:
import { usePosition } from "@web/core/position_hook";
class MyPopover extends owl.Component {
  setup() {
    // Here, the reference is the target props, which is an HTMLElement
MyPopover.template = owl.tags.xml`
  <div t-ref="popper">
    I am positioned through a wonderful hook!

If you need any assistance in odoo, we are online, please chat with us.


Leave a comment




Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message