What's New in the JS framework with Odoo 15? - Notes from Odoo Experience 2021

What's New in the JS Framework?

Disclaimer: My personal notes here are taken from the Odoo Experience 2021 talk by Gery Debongnie. All the slides are taken from the Odoo YouTube channel. You can watch an entire talk by clicking here

In OWL framework these 4 are the building blocks:

1. service 2. hook 3. component and 4. registry

Let's take ex. of building a notification system. It will show list of notifications on the top right corner of odoo system that we see.

How we proceed to build it?

1. We we will create a component for showing one notification. (Notification)

2. Then there will be a parent component which will contain the list of all notifications ( that we will basically use for showing all notifications using t-foreach in our qweb template ) (NotificationContainer)

3. After that we can create a new service for storing list of notifications. and all notification container can use this generic notification service (notificationService)..this will be simply used to provide generic notifications object with generic objects/methods like message, className (success, danger etc..), and so on... and to assign id to a notification.

Ex. from  POS notification (odoo16) :

File: notification_service.js

/** @odoo-module */

import { reactive, Component } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { Transition } from "@web/core/transition";

const TRANSITION_LEAVE_DURATION = 200; // ms

class Notification extends Component {
    static template = "point_of_sale.Notification";
    static props = { message: String, close: Function, className: String };
}

class NotificationContainer extends Component {
    static template = "point_of_sale.NotificationContainer";
    static components = { Transition, Notification };
    static props = {
        notifications: Object,
    };
    leaveDuration = TRANSITION_LEAVE_DURATION;
}

export const notificationService = {
    start() {
        const notifications = reactive({});
        let notifId = 0;
        registry.category("main_components").add("PosNotificationContainer", {
            Component: NotificationContainer,
            props: { notifications },
        });
        return {
            add(message, duration = 2000) {
                const id = ++notifId;
                notifications[id] = {
                    message,
                    visible: true,
                    close() {
                        notifications[id].visible = false;
                    },
                    delete() {
                        delete notifications[id];
                    },
                };
                setTimeout(() => notifications?.[id]?.close(), duration);
            },
        };
    },
};

registry.category("services").add("pos_notification", notificationService);

File: notification.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="point_of_sale.Notification">
        <div class="o_notification o-fade o-fade-enter-active p-3 m-2 text-bg-dark bg-opacity-75 text-center pe-none" t-att-class="props.className" t-on-click="props.close">
            <span t-esc="props.message"/>
        </div>
    </t>

    <t t-name="point_of_sale.NotificationContainer">
        <div class="o_pos_notification_manager fixed-bottom d-flex flex-column align-items-center justify-content-end p-4 pe-none">
            <t t-foreach="props.notifications" t-as="notification" t-key="notification">
                <Transition name="'o-fade'" visible="notification_value.visible" leaveDuration="leaveDuration" t-slot-scope="transition" onLeave="notification_value.delete">
                    <Notification message="notification_value.message" close="notification_value.close" className="transition.className"/>
                </Transition>
            </t>
        </div>
    </t>

</templates>