Enable Dark Mode!
how-to-create-odoo-web-libraryowl-component-in-odoo-15.jpg
By: Alvin F

How to Create Odoo Web Library(OWL) Component in Odoo 15

Technical Odoo 15

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 };
}
Refer to our most recent blog post to learn more about hooks in the OWL framework and how we use them Hooks in Odoo OWL Framework.
Watch our Webcast on the Odoo OWL Framework


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



0
Comments



Leave a comment

 
whatsapp
location

Calicut

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

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

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

location

Bangalore

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

Send Us A Message