Owl Components in Odoo17

Owl (Odoo Web Library), a redesigned web framework included with Odoo17, makes it easier to create dynamic, effective, and modular web owl components.With the help of this complex framework and present-day JavaScript features, developers can create interactive and reusable owl components within the Odoo platform with ease.

The Owl is a lightweight, high-performance framework designed specifically for creating component based and reactive online applications.Owl components, which are the building blocks of this framework, make it simple for developers to create complex user interfaces. Because of their modular design, which encourages reuse and makes code maintenance easier, development is more effective and manageable.

const { useState } = owl.hooks; const { xml } = owl.tags;

class Counter Component extends Component { setup() {

this.state = useState({ count: 0 }); }

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

}

} Counter Component.template = xml <div t-on-click="increment"> <span t-esc="state.count"/> </div>';

In the above situation, Owl components can be used in the same way as other Odoo libraries because it is available as a global library within Odoo. Observe that the static keyword is not used; instead, the template is described as component’s static property. Above mentioned component should be defined properly as:

Javascript file:

const { useState } = owl.hooks;

class Counter Component extends Component {

setup() { this.state = useState({ count: 0 }); }

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

}

Counter Component.template = 'myaddon.Counter Component';

XML file:

<?xml version="1.0" encoding="UTF-8"?>

<templates xml:space="preserve"> <t t-name="myaddon.Counter Component"> <div t-on-click="increment"> <span t-esc="state.count"/> </div> </t>

</templates>

ActionSwiper:

When an element is swiped, the ActionSwiper component initiates actions. To enable swipe actions, it wraps around a target element. These actions are then performed when the user swipes past a predetermined percentage of the element’s width.

Location: @web/core/action_swiper/action_swiper

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

Use this component by surrounding your target element with it, as demonstrated above. Wrap an existing element within ActionSwiper to add swipe functionality without having to duplicate its template.Props can also be used to adjust animations, swapability, and the minimum swipe distance needed to initiate an action.

For the ActionSwiper component in this example, we use both onLeftSwipe and onRightSwipe props. The available props for ActionSwiper are as follows:

1 animationOnMove: A boolean that determines whether the swipe has a translate effect.

2 animationType: After a swipe is completed, an animation can be applied (e.g., bounce or forward).

3 onLeftSwipe: Allows the ActionSwiper to be swiped to the left.

4 onRightSwipe: Allows the ActionSwiper to be swiped to the right.

5 SwipeDistanceRatio: An optional minimum width ratio that must be swiped to trigger the action.

CheckBox

This element consists of a simple checkbox with a label next to it. Because of their linkage, the checkbox and label can toggled by clicking on the label.

Location:@web/core/checkbox/checkbox

The props available for the CheckBox component are:
value: Checkboxes are either checked (true) or unchecked (false).
disabled: The state of the checkbox (true or false) is a boolean value.

ColorList

With the ColorList component, you can choose a colour from a pre-made list. If the canToggle prop is not present, it displays the colour that is currently selected by default and stays collapsed. Its behaviour can be altered by a variety of props; for example, the list can made to always expanded or to function as a toggle that shows the available colours when clicked until a selection is made.

Location: @web/core/colorlist/colorlist

ColorList has the following props available:

1 canToggle : A boolean indicating whether the color list can expand on click.

2 colors : An array containing the set of colors the component should display. Each color has a distinct ID.

3 forceExpanded: The Boolean value indicating whether the list is always expanded (true).

4 isExpanded:Whether the list will expand by default (true).

5 onColorSelected : When a color is selected, a function callback is invoked.

5 SelectedColor : Color ID is represented by a number.

Dropdown

Robust components, dropdowns provide a range of features to improve user interaction. Among these characteristics are:

Toggling the item list upon clicking.

1 Closing on an outside click.
2 Handling direct sibling dropdowns: The others toggle on hover when one is open
3 Support for sub dropdowns up to any level.
4 Custom styling (SIY – Style It Yourself).

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

The Dropdown component, which handles the dropdown itself, and DropdownItem, which represents each item in the dropdown list, are the two primary components provided by the Odoo framework to effectively handle these requirements.

<Dropdown>

<t t-set-slot="toggler">

<!-- Content in the "toggler" slot is rendered inside a button -->

Click me to toggle the dropdown menu!

</t>

<!-- Content in the "default" slot is rendered inside a div -->

< DropdownItem onSelected="selectItem1">Menu Item 1</DropdownItem> <DropdownItem onSelected="selectItem2">Menu Item 2</DropdownItem>

</Dropdown>

Props available for the Dropdown components are:

startOpen: setting the dropdown components props to true initializes the component in open state. and Default is False.

menuClass: Additional CSS class for styling the dropdown menu

 (e.g., <button 
<div class="dropdown-menu"/>).

togglerClass: Additional CSS class for styling the toggler

(e.g., <button 
class="dropdown-toggle"/>).

togglerClass: Additional CSS class for styling the toggler

 (e.g., <button 
class="dropdown-toggle"/>).

Hotkey: Uses keyboard hotkey to flick the dropdown.

tooltip: Adds a tooltip to the toggler element.

beforeOpen: Allowing for pre-opening logic.Before opening the dropdown hook is executed,

manualOnly: The dropdown is flicked only when the button is clicked and it should be True (default is False).

title: Content for the title attribute of the toggler element (default is none).

position: Using a valid useHook position (bottom-start is the default), this parameter indicates the preferred location for the menu to open.

Notebook

The Notebook component is made to display several pages in a tabular user interface. Tabs can be positioned vertically on the left side of the element or horizontally at the top.

It can define Notebook pages in two ways: by passing specific props or by using slots. The attribute isDisabled can be set directly in the page declaration if the Notebook is being us with pages that are provided as props, can be used to disable a page. The associated tab becomes greyed out and inactive after it is disabled.

Location:@web/core/notebook/notebook

Notebook component has the following props available:

anchors:(Type: object) Optional. Navigation is enabled for the elements within the tabs that are not visible currently.

className:(Type: string) Optional.A classname is applied to the root of component.

defaultPage: (Type: string) Optional.Default page ID is specified to display on other component

icons:(Type: array) Optional. List of used icons are provided for the tabs.

orientation:(Type: string) Optional. Checks whether the tabs are aligned vertically or horizontally.

onPageUpdate:(Type: function) Optional. Executes a callback function when the active page changes.

pages: (Type:array) Optional. The list of pages to populated from a template is included.

Pager

A small tool for pagination control is the Pager component. An offset and a limit, which stand for the page’s beginning position and size, respectively, define each page. The current page is displayed along with the total number of elements, which is usually formatted as “9-12 / 20”.

In this case, there are a total of 20 elements, an offset of 8, and a limit of 4. The “Previous” and “Next” navigation buttons on the Pager make flipping between pages easier.

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

If you have any thoughts on Owl Components in Odoo17, please don’t hesitate to contact us