How to Implement OWL Notification Service in Odoo 17

In the ERP area, increasing user happiness and engagement requires an intuitive user interface design. The smooth incorporation of the Odoo OWL notification service into dashboard interfaces is a crucial component of this article. We’ll examine how to enhance the user experience by adding notifications to Odoo dashboards using JavaScript and XML scripting.

Implementation of XML:

This XML template is meant to render the user interface (UI) for the Awesome Dashboard component. It describes the layout and composition of the dashboard component’s user interface components.

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

<templates xml:space="preserve">

       <t t-name="awesome_dashboard.AwesomeDashboard">

       <Layout className="'o_dashboard h-100'" display="{controlPanel: {} }">

       <t t-set-slot="control-panel-always-buttons">

              <button t-on-click="showNotification" type="button" class="btn btn-        secondary" title="Show Notification">Show</button>

       </t>

       </Layout>

       </t>

</templates>

Our dashboard’s design is specified in this XML template, which also includes a button that, when pressed, launches the show notification() function found in our JavaScript component.

In this XML template snippet:

       <t t-name="awesome_dashboard.AwesomeDashboard">

This template name is later specified inside the OWL component as its template.

       <Layout className="'o_dashboard h-100'" display="{controlPanel: {} }">

We use the built-in Odoo feature called layout to make sure our template has the right arrangement for our user interface. Usually, it’s used inside root templates.

<button t-on-click="showNotification" type="button" class="btn

btn-secondary" title="Show Notification">Show</button>

The showNotification() method that was developed in the JavaScript component is called when a button element in the layout is clicked. The user can engage with the notifications using this button.

Integration of JavaScript:

Let’s begin by looking at the JavaScript implementation that forms the foundation of our alert system:

import { userService } from "@web/core/user_service";

import { Layout } from "@web/core/components";

import { _t } from "@web/core/l10n/translation";

class AwesomeDashboard extends Component {

        static template = "awesome_dashboard.AwesomeDashboard";

       static components = { Layout };

       setup() {

        this.notificationService = useService("notification");

 }

        showNotification() {

        this.notificationService.add(_t("Your changes have been saved successfully."), {

               title: "Success",

               type: "success"

        });

     }

     }

registry.category(“actions”).add(“awesome_dashboard.dashboard”, AwesomeDashboard);

In the example above, we construct an Awesome dashboard component with a notification service. The show notification() method shows a success-type notice with the title “test” when used.

The Notification Service provides four distinct notification types: “info,” “warning,” “danger,” and “success.” Each kind serves a different purpose in giving consumers different levels of feedback or information. For each kind, below is a brief synopsis and some example usage scenarios.

The “sticky” feature in Odoo’s notification service allows users to customize the length of time that alerts remain on the screen in addition to the conventional parameters of type, title, and message. You may add this parameter to the notification display in the following way:

showNotification() {    this.notificationService.add(_t("Critical error occurred. Please contact support."), {        title: "Error",        type: "danger",        sticky: true,    });}

This code line adds the sticky: true parameter to the notification configuration object. If this option is set to true, the message will remain on the screen until the user actively dismisses it, independent of any preset timeout settings. When presenting critical messages that require the user’s immediate attention, this may be quite beneficial.

Odoo owl Notifications in Odoo 17 may be enhanced with actionable buttons in addition to important information, allowing users to take quick action to resolve problems or access pertinent areas of the program. Let’s incorporate this feature into the alert:

showNotification() {

        this.notificationService.add(_t("Critical error occurred. Please contact support."), {

       title: "Error",

       type: "danger",

         buttons: [{

               onClick: () => {

               this.actionService.doAction(

                            "base_setup.action_general_configuration"

                           );

                           closeFn();

                      },

                      primary: true,

                      name: "Go to Settings",

               },

           ],

    });

}

You can click the title, an error message, and a “Go to settings” button. Clicking this button takes users to the general configuration settings, where they may correct the error by following the necessary procedures. Users can maintain the integrity of their Odoo environment and swiftly fix issues with this proactive approach.

Manifesting:

This sample explains how to incorporate files in an Odoo module using a manifest format.

'assets': {

    'web.assets_backend': [

        'awesome_dashboard/static/src/**/*',

        ],

    },

It instructs you to include every file and directory found in the awesome_dashboard/static/src directory, focusing especially on the web.assets_backend directory’s backend assets.

By following the steps in this article, you will be able to enhance user experience and increase engagement by adding integrated notifications to your Odoo apps