By: Afra k

SEP 14,2023

An Overview of Owl Components in Odoo 16

Technical Odoo 16

In this blog, we are discussing the Odoo Web Library (OWL) Components in Odoo 16. The Owl is a custom component framework used by the Javascript framework in Odoo. The components, which are the classes that represent the user interface, are defined using the Qweb templates. The tag names of other components within our components can be used to call them. Components are the term for Owl's constituent parts, and the JavaScript classes and functions known as components define how the user interface (UI) should appear on the screen.

How to make a simple component in Odoo 16?

Let's look at how to create a basic Odoo component.

const { useState } = owl.hooks;
const { xml } = owl.tags;
class MyComponent extends Component {
    setup() {
        this.state = useState({ value: 1 });
    }
    increment() {
        this.state.value++;
    }
}
MyComponent.template = xml
    `<div t-on-click="increment">
        <t t-esc="state.value">
    </div>`;

The above example demonstrates that the Owl is usable like the majority of the libraries in Odoo and is accessible as a library in the global namespace as OWL. The useState hook, which displays the view if the state changes, is the most important hook in the Owl framework. The hooks are used to communicate with components and templates dynamically. Here, we use an XML helper to define the template in the Javascript code. In order to be translated, the templates in Odoo should be defined in an XML file. The component should, therefore, only specify the template name.

Most components should define two or three files, all of which should be in the same location: my component.js for javascript, my component.xml for templates, and my component.scss for optional scss (or css) files. Then, these files should be included in an asset bundle. The javascript/css files will be loaded by the web framework, along with the templates, into Owl.

Here is an example of how the above component should be defined:

const { useState } = owl.hooks;
class MyComponent extends Component {
    ...
}
MyComponent.template = 'myaddon.MyComponent';

The corresponding XML file also contains the template at this time:

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="myaddon.MyComponent" owl="1">
  <div t-on-click="increment">
    <t t-esc="state.value"/>
  </div>
</t>
</templates>

Owl components are used to build the Odoo web client. To make it simpler, the Odoo javascript framework provides a set of generic components that can be reused in some typical scenarios, including dropdowns, checkboxes, or date pickers. Below includes the guidance on how to use these generic components.

ActionSwiper

When an element is swiped horizontally, this component can take certain actions. In order to add actions to the target element, the swiper wraps it. Once the user releases the swiper after it has passed half of its width, the action is carried out.

<ActionSwiper onLeftSwipe="Object" onRightSwipe="Object">
  <SomeElement/>
</ActionSwiper>

A simple ActionSwiper component is created in the example that follows. Here, both ways of swiping are available.

<ActionSwiper
  onRightSwipe="
    {
      action: '() => Delete item',
      icon: 'fa-delete',
      bgColor: 'bg-danger',
    }"
  onLeftSwipe="
    {
      action: '() => Star item',
      icon: 'fa-star',
      bgColor: 'bg-warning',
    }"
>
  <div>
    Swipable item
  </div>
</ActionSwiper>

Here we use the onLeftSwipe and onRightSwipe props at the same time. The props that we can use in the ActionSwiper are,

animationOnMove: A Boolean which can be used to determine whether the swipe has a translate impact.

animationType: After the swipe is finished, an optional animation, such as a bounce or forward, is used.

onLeftSwipe: The ActionSwiper can be swiped to the left if it's available.

onRightSwipe: The ActionSwiper can be moved to the right.

swipeDistanceRatio: The optional minimum width ratio that must be swiped in order to complete the action

CheckBox

The Checkbox is another component. There is a label next to this simple checkbox component. Because the checkbox and label are connected, the checkbox toggles whenever the label is clicked.

<CheckBox value="boolean" disabled="boolean" t-on-change="onValueChange">
    Some Text
  </CheckBox>

The props that we can use in the CheckBox are,

Value: It is a boolean type. If true, the checkbox is checked. Otherwise, it is unchecked

Disabled: It is a boolean type. If true, the checkbox is disabled. Otherwise, it is enabled.

ColorList

You can choose a color from a specified list using the ColorList. The component does not expand until the canToggle props are present and, by default, shows the currently chosen color. Different props can alter their behavior, making a list always expand or, once clicked, act as a toggler that displays the list of available colors until one is chosen.

The props that we can use in the ColorList are,

canToggle: It is a boolean type. Whether the colorlist can expand the list on a click

Colors: It is an array type. A set of colors the component should display. The id for each color is distinct.

forceExpanded: It is a boolean type. The list is always expanded if it's true.

isExpanded: It is a boolean type. The list expands by default if it's true.

onColorSelected: It is a function type. callback that is executed after choosing a

colourselectedColor: It is a number type. The color id that is selected

Dropdown

The dropdown is one of the more complex components, and we need to provide many features, such as,

*Direct siblings dropdowns: toggle other options while one is active

*Click to toggle the item list

*The right-to-left direction is automatically handled. Therefore, the opening direction was wisely chosen.

*Call a function when the item is selected

*Close on outside click

*Support sub dropdowns, up to any level

The Odoo framework offers a pair of components to address these problems once and for all: a Dropdown component (the actual dropdown) and a DropdownItem for each item in the item list.

<Dropdown>
  <t t-set-slot="toggler">
    <!-- "toggler" slot content is rendered inside a button -->
    Click me to toggle the dropdown menu !
  </t>
  <!-- "default" slot content is rendered inside a div -->
  <DropdownItem onSelected="selectItem1">Menu Item 1</DropdownItem>
  <DropdownItem onSelected="selectItem2">Menu Item 2</DropdownItem>
</Dropdown>

The props that we can use in the dropdown are,

startOpen: Defaults to false and the initial dropdown has an open state

menuClass: The dropdown menu has an additional CSS class (div class="dropdown-menu"/>).

togglerClass: The toggler was given an additional CSS class, as seen in the button class="dropdown-toggle"/>.

Hotkey: Using a keyboard hotkey to switch the opening

Tooltip: On the toggler, include a tooltip

beforeOpen: Just before opening, use the hook to run logic. could be asynchronous.

manualOnly: If true (the default is false), the dropdown will only be toggled when the button is clicked.

Title: <button class="dropdown-toggle"/> is the title attribute that contains content. (Default: none)

Position: Specifies a desired place for the menu to open. Automatic RTL direction is used. Must be a valid useHook position. (default: bottom-start)

Toggler: When "parent" is selected, the button class="dropdown-toggle"/> is not drawn (therefore, the toggler slot is ignored), and the toggling feature is handled by the parent node (e.g. use case: pivot cells). (Undefined by default)

Notebook

Multiple pages can be seen at once in the tabbed layout of the Notebook. The element's tabs can be placed at the top to display horizontally or at the left to display vertically.

There are two methods to specify your Notebook pages during initialization: either by giving specific props or by using slots. The props that we can use in the Notebook are,

Pager

A simple component that manages pagination is called the Pager. An offset and a limit (the size of the page) together define a page. It shows the current page as well as the overall number of items, such as "9-12 / 20". The offset is 8, the limit is 4, and the sum is 20 in the previous example. For page switching, it contains two buttons: "Previous" and "Next." The pager can be used anywhere, but its main use is in the control panel.

<Pager offset="0" limit="80" total="50" onUpdate="doSomething" />

The props that we can use in the Pager are

Offset: The index of the first element on the page. It begins with 0, but the pager shows offset + 1.

Limit: The page's size. The sum of offset and limit is the index of the page's last element.

Total: The total number of elements that the page can contain.

onUpdate: When the pager modifies a page, this function is invoked. This method can be async. However, the pager cannot be modified while it is running.

isEditable: Allows you to edit the current page by clicking on it (true by default).

withAccessKey: Binds the access key p to the previous page button and the access key n to the next page button (true by default).

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