Odoo 16 Development Book

OWL COMPONENT

OWL is the custom component framework used by the Odoo javascript framework. It’s a UI framework based on components considered to be the basis for the Odoo Web Client. It is written in typescript with the best ideas of Vue and react.

The Components are classes in Javascript that have properties and functionalities. Each component has a template, and components are capable of rendering themselves. Next, we'll build a straightforward OWL component and integrate it into Odoo's online client.

At first, we have to define a javascript module:

/** @odoo-module **/

Then add the js file to the assets in manifest.

'assets': {
   'web.assets_backend': [
       '/owl_test/static/src/js/owl_test.js',
   ],
},

Then we define OWL utility.

const { Component, whenReady, xml, mount, useState } = owl;

Then we have to add the owl component and its template.

class App extends Component {
    static template = xml`
       <div class="bg-info text-center p-2">
          <span>Hello Owl</span>
       </div>`;
    }

Then initialize the component and add it to the web client:

whenReady().then(() => {
   mount(App, document.body);
});

Then the component will be added as shown below.

A helper called XML (xml helper) is used in the example above to construct inline XML templates. We can directly define XML codes by utilizing this helper. It is not the best method for producing inline XML templates when taking into account a huge project. We can load the XML template similar way to loading the Qweb template.

User Actions

When components of a user interface are said to be interactive, it means they must react to different user actions like clicks, hovers, and form submissions, among others. The component will have a click event added in the example below. Create a button and assign a click to it in the component.

The component template is defined as follows:

static template = xml`
   <div class="bg-info text-center p-2">
      <span>Hello Owl</span>
       <button t-on-click="() => state.value++">
           Click Me! [<t t-esc="state.value"/>]
       </button>
   </div>`;

Here, we have mentioned in the template that to increment the value when clicking on the button.

class Counter extends Component {
   static template = xml`
       

          Hello Owl
           
               Click Me! []
           
       
`;
   state = useState({ value: 0})
}

The Output will be like this:

In the previously mentioned example, a component contains a button that has an on-click function added where the value 0 will become 1 when we click the button, and the value will rise by 1 with each subsequent click. The value will be reset to 0 following a page refresh. The component's template was established in the first step, and the button's t-on-click attribute was added.

We can also mention the method name in on-click and define the method's name as the attribute's value, which will bind the click event. The increase is the response function in the example mentioned above. The response function is defined inside the component in the second step. The event syntax of the component is as follows:

t-on-="method name in component"