In this blog, we are discussing how to create owl components in Odoo 15, In Odoo javascript framework uses a custom component framework called owl. The owl components are classes that represent the user interface. Components are defined using the QWeb templates. Every component has a template that represents its final form of HTML structure. In Owl, we can call other components by using their tag name inside our components. Starting from Odoo version 14 shares the same Owl version.
Similar to React JS, Owl's building blocks are called components. Components are the JavaScript classes and functions that specify how the user interface (UI) should look on the screen. Maintaining an organized perspective on the building blocks is helpful.
How to make a simple component in Odoo 15?
const { useState } = owl.hooks;
const { xml } = owl.tags;
class MyComponents extends Component {
setup() {
this.state = useState({ value: 0 });
}
increment() {
this.state.value++;
}
}
MyComponent.template = xml
'<div t-on-click = "increment">
<t t-sec="state.value">
</div>';The example above demonstrates that Owl is accessible as a library in the global namespace as OWL and may be used similarly to the majority of libraries in Odoo. The Owl framework's most crucial hook is useState. In the Owl framework, hooks are used to dynamically interact templates with components. The useState hook will render the view if the state changes.
Most of the components need to define 2 or 3 files located in the same place. A javascript file (my_component.js), a template file (my_component.xml), and optionally an scss or css file (my_component.css). These files should be added to the assets bundle. Web framework will be loading the javascript, scss file, and templates into Owl. Set owl="1" in your Owl templates.
How to define components in odoo 15?
const {useState} = owl.hooks;
class MyComponent extends Component {
............
}
MyComponent.template = 'myaddon.MyComponent';
The template are located in the corresponding xml file:
<templates xml:space="preserve">
<t t-name="myaddon.MyComponent" owl="1">
<div t-on-click="increment">
<t t-esc="state.value"/>
</div>
</t>
</templates>Odoo requires a means to distinguish between Owl templates (new code) and older templates because it hasn't finished creating all of its code in Owl yet (for components). All new templates must be defined with the owl property set to 1 in order to accomplish this in a way that is backward-compatible.
Sub-components
We can define a component using other components. We can create sub-components in Odoo by just using a tag name in its template and registering the sub-component class in the static component object.
Passing data from the parent component to the child component:
class child extends Component {
static template = xml
`<div>child component
<t t-esc="props.value"/>
</div>`;
}
class Parent extends Component {
static template = xml
'<div>
<child value = "1"/>
<child value = "2"/>
</div>';
static components = { Child };
}Watch our Webcast on the Odoo OWL Framework