Learning Owl Framework - Your First Component

Explore the owl component boilerplate and code your first component in odoo owl echo system. What is Owl UI building blocks.

What is Owl?

owl is a JavaScript library for building user interfaces (UI) in Odoo web applications. UI elements in owl are also constructed from small, reusable components such as buttons, text, and images. owl allows these components to be combined and nested to create complex user interfaces. owl can be broken down into components, making it easy to create reusable UI elements.

Components: UI building blocks

If you are going to create a UI snippet using the following code using built-in set of tags like <h1>, <div>, <li>, .. etc.

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

We are going to describe this snippet a bit, the markup element that represent the article <article> and its heading <h1> and the list of content of course is wrapped in <ol>.

Owl let you encapsulate those elements into single component along with its markup, CSS and javaScript into custom components but you can customize how its rendered in many ways and control its interactivity so it can be distributed to be reusable.

<PageHeader>
	<Searchbar/>
</PageHeader>
<PageContent>
    <Article title="" author=""/>
    <Article title="" author=""/>
    <Article title="" author=""/>
<PageContent>

As your project grows, you will notice that many of already designed components can be reused instead of repeating yourself and it would save a lot of time and work making your code encapsulated in components.

Defining Your First Component

OWL components are defined by subclassing the Component class:

const { Component, xml } = owl;

export class Profile extends Component {
	static template = xml`
    <img
       src="https://d2r55xnwy6nx47.cloudfront.net/uploads/2020/04/DK_VC_2K_01.jpg"
       width="600"
       height="400"
       alt="Donal Knuth"/>
    `;
}

Using a component

Now that the component Profile is defined we can use it directly in another component for example:

import { ProfileComponent } from "components/Profile";
import { Component, xml } from "@odoo/owl";

export class RootComponent extends Component {
    static template = xml`
    <div>
        <ProfileComponent/>
    </div>
    `;

    static components = { ProfileComponent };
}

What browser really sees eventually is the structured markup <div> , <img> inside the components rendered successfully as shown in the attachment.