An Overview of Owl Components in Odoo 17: A Technical Guide

​

What is Owl?

Owl is a high-performance, lightweight framework tailored for building reactive, component-based web applications. Its modular design simplifies code maintenance and promotes reuse, leading to more efficient development processes. Owl components, as the core building blocks of this framework, allow developers to create intricate user interfaces while maintaining clean and manageable codebases.

Creating a Simple Owl Component

Let's begin with a straightforward example of creating an Owl component in Odoo.

​javascript​

/** @odoo-module **/

import { useState } from "@odoo/owl/hooks";
import { Component } from "@odoo/owl";

// Define the CounterComponent class
class NewComponent extends Component {
    setup() {
        this.state = useState({ count: 0 });
    }

    increment() {
        this.state.count++;
    }
}

CounterComponent.template = 'myaddon.NewComponent';

In this example, the Owl framework is readily accessible within Odoo, allowing developers to build components with ease. The template for this component is defined as a static property, which simplifies the component's structure.

The corresponding XML template for the component:

​xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <templates xml:space="preserve">
        <t t-name="myaddon.NewComponent">
            <div t-on-click="increment">
                <span t-esc="state.count"/>
            </div>
        </t>
    </templates>
</odoo>

This XML defines how the component will be rendered in the user interface, linking the increment function to a click event on the div element.

Exploring Other Owl Components​

Odoo 17 provides a wide array of Owl components, each tailored for specific use cases. Below, we explore some key components that can be utilized in your Odoo applications.

​

1. ActionSwiper

The ActionSwiper​ component allows for swipe-triggered actions on elements. It's particularly useful for mobile interfaces where swipe gestures enhance user experience.

Location: @web/core/action_swiper/action_swiper

Example:

​xml

<ActionSwiper onLeftSwipe="handleLeftSwipe" onRightSwipe="handleRightSwipe">
  <YourElement/>
</ActionSwiper>

Props include:

• ​animationOnMove​: A boolean determining whether the swipe has a translate effect.
• ​animationType​: An optional animation (e.g., bounce or forward) applied after the swipe is completed.
• ​onLeftSwipe​: A function to handle left swipe actions.
• ​onRightSwipe: A function to handle right swipe actions.
• ​swipeDistanceRatio​: An optional minimum width ratio that must be swiped to trigger the action.

​

2. CheckBox

The CheckBox​ component is a simple yet flexible component for binary choices, linked with a label for easy toggling.

Location: @web/core/checkbox/checkbox​

​xml

<CheckBox value="true" disabled="false" />

Props include:

• ​value​: A boolean indicating whether the checkbox is checked (true​) or unchecked (false).
• ​disabled​: A boolean indicating whether the checkbox is disabled (true) or enabled (false​).

​

3. ColorList

The ColorList​ component allows users to select colors from a predefined list, with options to toggle the list’s visibility.

Location: @web/core/colorlist/colorlist​

Props include:

• ​canToggle​: A boolean indicating whether the color list can expand on click.
• ​colors​: An array containing the set of colors the component should display. Each color has a distinct ID.
• ​forceExpanded​: A boolean specifying whether the list is always expanded (true).
• ​isExpanded: A boolean indicating whether the list is expanded by default (true​).
• ​onColorSelected​: A function callback executed after selecting a color.
• ​selectedColor​: A number representing the ID of the selected color.

​

4. Dropdown

​Dropdown components in Odoo 17 offer advanced features for creating dropdown menus with rich interactions, including keyboard navigation, hotkeys, and automatic repositioning.

Location: @web/core/dropdown/dropdown​ and @web/core/dropdown/dropdown_item​

Example:

​xml

<Dropdown>
  <t t-set-slot="toggler">
    Click to toggle the dropdown menu!
  </t>
  <DropdownItem onSelected="selectItem1">Menu Item 1</DropdownItem>
  <DropdownItem onSelected="selectItem2">Menu Item 2</DropdownItem>
</Dropdown>

Notable props:

• ​startOpen​: Defaults to false​. When set to true​, the dropdown initializes in an open state.
• ​menuClass​: Adds an additional CSS class for styling the dropdown menu (e.g., <div class="dropdown-menu"/>​).
• ​togglerClass​: Adds an additional CSS class for styling the toggler (e.g., <button class="dropdown-toggle"/>).
• ​hotkey​: Enables a keyboard hotkey for toggling the dropdown.
• ​tooltip​: Adds a tooltip to the toggler element.
• ​beforeOpen​: A hook executed just before opening the dropdown, allowing for pre-opening logic (potentially asynchronous).
• ​manualOnly​: If set to true​ (default is false​), the dropdown toggles only when the button is clicked.
• ​title​: Specifies content for the title attribute of the toggler element (default is none​).
• ​position​: Specifies the desired position for the menu to open, using a valid useHook position (default is bottom-start​).
• ​toggler​: When set to "parent", the <button class="dropdown-toggle"/> element is not rendered, and the toggling functionality is handled by the parent node.

​

5. Notebook

The Notebook​ component is perfect for organizing content into tabs, either horizontally or vertically.

Location: @web/core/notebook/notebook​

Key features:

• ​anchors​: (Type: object​) Optional. Enables navigation to elements within tabs that are currently not visible.
• ​className​: (Type: string) Optional. Applies a classname to the root of the component.
• ​defaultPage​: (Type: string) Optional. Specifies the default page ID to display upon component initialization.
• ​icons​: (Type: array) Optional. Provides a list of icons used for the tabs.
• ​orientation​: (Type: string​) Optional. Determines whether the tabs are arranged horizontally or vertically.
• ​onPageUpdate​: (Type: function​) Optional. Executes a callback function when the active page changes.
• ​pages​: (Type: array​) Optional. Contains the list of pages to be populated from a template.
• ​isDisabled​: Attribute to disable a specific page, making the tab grayed out and inactive.

​

6. Pager

​Pager​ is a compact pagination control component, ideal for managing content spread across multiple pages.

Location: @web/core/pager/pager​

Example:

​xml

<Pager offset="0" limit="20" total="100" onUpdate="handlePageUpdate"/>

Props include:

• ​offset​: Defines the starting position of the current page.
• ​limit: Sets the number of items per page.
• ​total​: Specifies the total number of items.
• ​onUpdate​: A callback function triggered when the page changes.

​

Conclusion

Owl components in Odoo 17 provide developers with a robust toolkit for building sophisticated, responsive web applications. Whether you’re creating simple interactive elements or complex, multi-faceted UIs, Owl’s modularity and efficiency make it an invaluable asset in the Odoo development ecosystem.

For more in-depth exploration, check out our other blog posts on Odoo development.