Web Hooks

Web hooks is a js file that contains various custom hooks that is really helpful when using owl in Odoo.

How does it work?

Each custom hook simply hooks itself to any number of owl lifecycle hooks, you can then use them just like any owl hook in any Component. -Comments from Odoo hooks.js

This page will tackle basic usage of "action" and "orm" services available in web/core/util/hooks.

Importing web hooks

It is just the same as importing any class but point it to the web util hooks location.

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

Setup

Initialize the web hooks inside your constructor/setup function and then pass a "service name" parameter. In this example, we will be using "action" for action services and "orm" for orm services as our parameters.

this.actionVariableName = useService("action");
this.ormVariableName = useService("orm");

Orm services

searchRead

In my own understanding, searchRead is an asynchronous function.

"Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished." - mdn web docs

Asynchronous Function

So to properly access this function, we need to create an asynchronous function (so it will be easier for us to call it later) or just add await while calling the searchRead function. This process avoids calling the searchRead function again in again and cause a crash to your program.

async functionName(){
        const variableName = await this.ormVariableName.searchRead(model_name,
                                                   [domain](/vec-ltd/odoo-docs/wiki/domain),
                                                   [field1, field2],
                                                   { limit: 1 });
        return variableName
    }

The return will then be a Promise object. To learn more about Promise you might want to check this -> https://escher.gitbooks.io/you-don-t-know-js-async-performance/content/ch3.html. If you want to handle the promise result please proceed to the next topic.

Handling Promise Object

The returned promise object looks like this, so what we want to get is the PromiseResult.

To do that We will be using .then() to our function.

this.functionName()
        .then((data) => {
            console.log(data);
            return data;
        });

the data will be the PromiseResult and you can now access the result the way you want it.

Action Services

doAction

In this example we will be opening a new form by calling doAction. To do that we will pass an action window object as a function parameter. The syntax should look like this.

this.actionVariableName.doAction({
   name: "ActionWindowName",
   res_model: "odoo.model.you.want",
   views: [false, "form"](/vec-ltd/odoo-docs/wiki/false,-"form"),
   type: "ir.actions.act_window",
   view_mode: "form",
   target: "new",
   context: {
     default_fieldname: any_variable_you_wish_to_set, //default tag sets the field to the default value upon rendering the form
   },
});

Once this code is executed somewhere in your js file it will open up the form you initialize.

Notes

More information or samples related to this topic (web hooks) is welcome 👍. I believe that web hooks has a lot of useful functions and information we can use in the future.

Also if you want to add something please do introduce and add it after this line above "This page will tackle basic usage of "action" and "orm" services available in web/core/util/hooks." so that we will have a good structure for this page.

Thank you!