Intro Centuries ago, real estate agents used piles of paper or whatsoever was available during those days to save business […]
Odoo
.
5 MIN READ
.
February 23, 2022
The Odoo OWL Framework For New Generation of Business
SHARE WITH
Every other person or business is operating on Web Applications. Web applications are used for operating websites and running a business. Most of the industries use Odoo ERP as their core business platform.
The design of Odoo is based on JavaScript, which makes it look appealing and attractive. The look of a web application tells how user-friendly it is. Till now, Odoo was working with the JavaScript Framework, but now it has decided to move to OWL.
Introduction to OWL Framework
OWL is a type of Framework that helps change the interface of Odoo. As the frontend of Odoo is based on Backbone JavaScript (JS), it has stopped supporting upgrades and migrations. Therefore, Odoo decided to switch its frontend from Backbone JS to OWL.
OWL defines as Odoo Web Library, designed with the intention to replace the current client-side technology and offer a new UI.
OWL is a small UI framework approx 18kb gzipped in size. It will be available in Odoo >V16 fully and half present on Odoo V15. It is written in Typescript, combining the best components from React and Vue.
React and Vue are JavaScript-based toolkit systems used to create a dynamic user interface.
Why OWL Framework?
The question that arises is that when Odoo was successfully working on JS, then why there is a need to opt for OWL (Odoo Web Library).
The current Odoo Javascript framework is easy to use and awesome, but it is not up to the mark. Meaning, it is not fully standing on Odoo’s requirements. It is not completely optimized and can increase the response time.
To overcome these challenges, Odoo introduces the OWL Framework, whose main features are:
- Declarative component system.
- Hooks.
- Fined grained reactivity mechanism like Vue
- Asynchronous rendering.
- Fragments.
OWL Components
Components are JavaScripts Functions and Classes that imply how a UI will appear on the screen. OWL uses components as its core elements similar to React JS Framework. Mainly, OWL uses JS classes to build its components and it is dynamic as well.
The below example shows how to create components in OWL.
EXAMPLE:
- JS Code
// In this example, we show how components can be defined and created.
const { Component, useState, mount } = owl;
class Action extends Component {
static template = “Action“;
setup() {
this.state = useState({ word: ‘walk‘ });
}
toggle() {
this.state.word = this.state.word === ‘walk‘ ? ‘jump‘ : ‘walk‘;
}
}
// Main Animal component
class Animal extends Component {
static components = { Action };
static template = “Animal”
setup() {
this.state = useState({ name: ‘cat‘});
}
}
// Application setup
mount(Animal, document.body, { templates: TEMPLATES, dev: true });
- XML Code
<templates>
<div t-name=”Action” class=”action“ t-on-click=”toggle“>
<t t-esc=”‘A ‘ + props.name + ‘ can ‘ + state.word“/>
</div>
<t t-name=”Animal”>
<Action name=”state.name“/>
</t>
</templates>
- CSS
.action {font-size: 30px;
width: 350px;
height: 150px;
margin: 10px;
text-align: center;
}
- Output
- Initially, we get
A cat can walk
-
- On Clicking over text we get ->
A cat can jump
Explanation
- All new components are created by extending the main Component
- The structure of the OWL Component is in the tree view model, and each component has its individual local state.
- We have created two components in our JS file:
- Action Component defines two actions in its local state: jump and walk
- The animal component which defines the name of the animal in its local state: cat
- We have created the XML file which contains the template that will be rendered through the above two components respectively.
- There is also an on-click hook registered in the template which triggers the toggle function. That function alternates the value of the local state variable “word” in the Action Owl component.
- There is an Observer class that always monitors changes to an object or array and responds appropriately. If any changes take place in hooks such as useState, the view is re-rendered.
- So when the toggle function updates the local state variable of the Action component, it automatically re-renders the updated value thus changing the: A cat can walk to A cat can jump.
There is always room for a new framework in the world. If an OWL Framework is compatible with Odoo, the changes would be worth making. If you are planning to adopt the higher version of Odoo, then get ready for the Odoo OWL Framework in version 16.
Why consult Ksolves?
If you need any assistance with Odoo development, Ksolves experts are there to help you with every Odoo need. Be it Odoo customization, integration, or extension service, we are always here to help you with our utmost services.
Was the blog informative? Tell us below:
Website: https://store.ksolves.com/
Phone:+1(646)-203-1075, +91-7498170227
Email: sales@ksolves.com
SHARE WITH
Request for Free Demo
Read Related Articles
Odoo
.
August 19, 2022
It doesn’t matter if you’re just starting out or if you’ve been running your business for years. You’ve been managing […]
Odoo
.
August 14, 2022
Introduction Odoo, an Open Source ERP helps manage a company’s data in a centralized manner. It is a vast collection […]
