如何在Odoo 18中实现OWL通知服务

如何在Odoo 18中实现OWL通知服务

    OWL(Odoo Web Library)是Odoo的前端框架,用于构建现代化的动态响应式用户界面。在早期版本中,Odoo 前端设计与开发使用的是诸如 QWeb 这类较为老旧的框架,而随着 Odoo 每发布一个新版本,OWL 都在逐步取代 QWeb,尤其是在构建与后端交互流畅的 UI 组件方面。
    OWL的“通知服务(Notification Service)”是框架的一部分,允许开发者以统一的方式向用户显示通知消息。OWL 通知服务使我们能够为用户生成定制化的、友好的反馈,比如警告、错误消息、一般信息、成功消息等等。
    本文将演示如何在Odoo 18中实现OWL通知服务。首先要做的是实现 XML 代码,以便 Odoo 18 UI 中的任何组件能够触发 Javascript 中定义的相应方法,该方法会向用户显示相应的通知。

定义XML模板

为了使通知服务正常工作,首先我们需要实现 XML 模板,以确定触发通知弹出的操作。为此,我们来看一个示例代码,它会在 Odoo 后端 UI 上显示一个简单的 “铃铛” 图像作为系统托盘图标。我们知道,Odoo 通知栏中的系统托盘图标是一项快速访问功能。用户无需通过主界面和菜单导航到其他 Odoo 模块,借助系统托盘图标就能轻松与 Odoo 系统的相关功能进行交互。
我们以一个系统托盘(Systray)的“铃铛图标”为例,点击该图标时触发通知。XML代码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve"><t t-name="systray_icon" owl="1"><t t-set-slot="default"><button><div t-on-click="_notify"><i id="notify_msg"class="fa fa-bell fa-1.5x"role="img"/></div></button></t></t>
</templates>

这里,当铃铛图标被点击时,图标通过t-on-click属性设置为_notify,这会渲染在 Javascript 组件中创建的_notify()函数。这个铃铛图标就是用户与提醒进行交互的地方。class=“fa fa-bell”:使用Font Awesome图标库显示铃铛图标。
系统托盘部分的图标看起来会像这样。
在这里插入图片描述

实现JavaScript组件

在JavaScript中定义SystrayIcon类,继承自OWL的Component,并通过notificationService显示通知:

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Component } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";class SystrayIcon extends Component {setup() {super.setup(...arguments);this.notificationService = useService("notification");}_notify() {{this.notificationService.add(_t("成功消息提示。"), {title: "成功",type: "success"});}}
}SystrayIcon.template = "systray_icon";
export const systrayItem = { Component: SystrayIcon,};
registry.category("systray").add("SystrayIcon", systrayItem, { sequence: 1 });

第一步是添加/** @odoo-module **/这行代码,并导入registry、useService、Owl 组件以及用于字符串翻译的_t。
SystrayIcon类是通过扩展从 Owl 库导入的Component类创建的。
我们使setup()方法调用super来为其添加通知服务,通知内容在_notify()方法中定义如下:

  _notify() {{this.notificationService.add(_t("成功消息提示。"), {title: "成功",type: "success"});}}

注意:notificationService.add():核心方法,用于显示通知。
参数说明:
1、add:通过点(.)运算符,“add” 用于显示通知内容,内容需用引号括起来。在内容中,可以使用的属性有:
·title:通知标题,要显示的消息或字符串内容。
· type:定义消息的类型,可以是 “success”(成功)、“info”(信息)、“warning”(警告)或 “danger”(危险)。
· button:用于添加自定义按钮,并可带有诸如 name、onClick ()、primary 等属性。
·sticky:可以是 “True” 或 “False”,用于确定消息是否应一直显示在视图中,直到用户手动关闭,默认自动消失。
·duration:指定消息应在屏幕上显示多长时间(以毫秒为单位的时长)。
2、remove:与 “add” 相反,用于移除特定的通知。
3、clear:清除通知。
点击铃铛图标后,显示如下成功通知:
在这里插入图片描述

高级示例:带按钮的错误通知
以下代码演示如何显示带按钮的“危险”类型通知:

_notify() {this.notificationService.add(_t("发生严重错误,请联系支持或通过下方按钮跳转设置。"),{title: "错误",type: "danger",buttons: [{onClick: () => {this.actionService.doAction("base_setup.action_general_configuration"); // 跳转到设置页面closeFn(); // 关闭通知},primary: true,  // 高亮按钮name: "前往设置", }],});
}

效果如下:
在这里插入图片描述

注册静态资源

设计好所需的通知后,.xml 和.js 文件会添加到模块清单文件中 “assets” 下的 “web.assets_backend” 键内。在我们的例子中,由于模块名称是 “test_model”,manifest.py清单文件的 “assets” 键定义如下:

'assets': {'web.assets_backend': ['test_model/static/src/**/*', // 包含所有静态文件],
},

注意事项

  • 确保使用/** @odoo-module **/标记ES6模块。
  • 多语言支持需通过_t()函数实现。
  • 按钮的onClick事件需处理关闭逻辑(如closeFn())。

总结

OWL 通知服务可以通过 XML 实现,并集成到 Javascript 中,以便以完善的方式向用户传递各种友好且定制化的消息。其用例可以是处理错误、表单成功提交以及根据我们设计的工作流程处理各种系统事件。这为在 Odoo 18 中通过及时反馈提升用户体验铺平了道路。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35114.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unet nn-Unet

Unet && nn-Unet&#xff1a; 文章题目&#xff1a;U-Net: Convolutional Networks for Biomedical Image Segmentation 代码&#xff1a;https://lmb.informatik.uni-freiburg.de/people/ronneber/u-net/ 文章题目&#xff1a;nnU-Net: Self-adapting Framework for U…

【扩散模型入门】Latent Diffusion

1. 概述 扩散模型为公众所知的一个主要原因是Stable Diffusion(SD)的推出展现出了远超以往的图像合成效果,而SD的主要技术就是Latent Diffusion Model(LDM)。 实际上,LDM的核心idea非常简单: 为了确保生成质量,LDM尽可能提升去噪模型的规模。提升模型规模往往也会同步…

搭建主从服务器

任务需求 客户端通过访问 www.nihao.com 后&#xff0c;能够通过 dns 域名解析&#xff0c;访问到 nginx 服务中由 nfs 共享的首页文件&#xff0c;内容为&#xff1a;Very good, you have successfully set up the system. 各个主机能够实现时间同步&#xff0c;并且都开启防…

SAP HANA on AWS Amazon Web Services

SAP HANA on AWS Amazon Web Services

vue项目如何实现条件查询?

目录 1.前端 2.后端 3.mybatis的sql语句 结语 1.前端 说白了就是&#xff0c;无论该参数是否是空字符串&#xff0c;都会传递到后端。&#xff08;反正不是null就行&#xff09;。 2.后端 在controller层中&#xff0c;使用RequestParam注解接收名为registerName的参数&…

C++:类对象的存储方式

如何计算类对象的大小 class A { public: void PrintA() { cout<<_a<<endl; } private: char _a; }; 类中既可以有成员变量&#xff0c;又可以有成员函数&#xff0c;那么一个类的对象中包含了什么&#xff1f;如何计算 一个类的大小&#xff1f; 类对象的存储方…

Windows 图形显示驱动开发-WDDM 3.0功能- 硬件翻转队列(一)

WDDM 3.0 之前的翻转队列模型 许多新式显示控制器支持对按顺序显示的多个帧排队的能力。 从 WDDM 2.1 开始&#xff0c;OS 支持将在下一个 VSync 中显示的多个未完成的翻转覆盖请求。 显示微型端口驱动程序 (KMD) 通过 DXGK_DRIVERCAPS 中的 MaxQueuedMultiPlaneOverlayFlipVS…

OSPF-5 3类LSA SummaryLSA

上一期我们介绍了2类LSA Network LSA的内容信息以及怎样从2类LSA中的信息描绘出一张具体的拓扑信息以及网段信息 这一期我们将介绍3类LSA Summary LSA区域间的LSA看看3类LSA是怎样把域间的路由信息传递到别的区域的 一、概述 由于3类LSA是用来描述我们域间的路由信息所以它是…

AI驱动的视频字幕提取与翻译工具

青梧字幕是一款基于Whisper技术的AI字幕提取工具&#xff0c;专为视频制作者、翻译人员和自媒体创作者设计。它通过先进的语音识别算法&#xff0c;能够自动从视频文件中提取字幕内容&#xff0c;并支持多种语言和字幕格式&#xff0c;极大地简化了字幕制作流程。 目前暂支持 …

ONNX:统一深度学习工作流的关键枢纽

引言 在深度学习领域&#xff0c;模型创建与部署的割裂曾是核心挑战。不同框架训练的模型难以在多样环境部署&#xff0c;而 ONNX&#xff08;Open Neural Network Exchange&#xff09;作为开放式神经网络交换格式&#xff0c;搭建起从模型创建到部署的统一桥梁&#xff0c;完…

第十一次CCF-CSP认证(含C++源码)

第十一次CCF-CSP认证 打酱油满分题解 公共钥匙盒满分题解solution 1solution 2&#xff08;优先队列优化&#xff09; 通信网络&#xff08;图的遍历问题&#xff09;满分题解 打酱油 题目链接 满分题解 思路&#xff1a;做完这题我觉得这里有点像贪心算法但又是常识性问题&a…

深入解析Hosts文件:从原理到实战应用(文末附Qwins下载)

深入解析Hosts文件&#xff1a;从原理到实战应用 在网络世界中&#xff0c;一个看似普通的系统文件——Hosts文件&#xff0c;却隐藏着操控域名解析的“上帝权限”。无论是开发者的本地测试、网络安全防护&#xff0c;还是普通用户屏蔽广告&#xff0c;都离不开它的身影。本文将…

SpringBoot 和vue前后端配合开发网页拼图10关游戏源码技术分享

今天分享一个 前后端结合 的网页游戏 开发项目源码技术。 这也是我第一次写游戏类的程序&#xff0c;虽然不是特别复杂的游戏&#xff0c;但是是第一次写&#xff0c;肯定要记录一下了&#xff0c;哈哈。 游戏的内容 就是 我们显示中玩的那个 拼图碎片的 游戏&#xff0c;类似下…

TSB - AD 解读 — 迈向可靠、透明的 TSAD 任务

目录 一 文章动机 二 TSAD 领域内的两类缺陷 三 数据集的构建 四 实验结果及结论 项目宣传链接&#xff1a;TSB-AD 代码链接&#xff1a; TheDatumOrg/TSB-AD: TSB-AD: Towards A Reliable Time-Series Anomaly Detection Benchmark 原作者解读&#xff1a;NeurIPS 2…

Java 大视界 -- Java 大数据机器学习模型的对抗攻击与防御技术研究(137)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

Python 鼠标轨迹算法 - 防止游戏检测

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序&#xff0c;它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言&#xff0c;原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势&#xff1a; 模拟…

C++11 lambda表达式、包装器、Bind绑定

Hello&#xff01;大家早上中午晚上好&#xff01;&#xff01;今天来复习C11三个新加的特性&#xff01;&#xff01; 一、lambda 表达式 1.1什么是lambda表达式&#xff1f; 语法&#xff1a;[捕捉列表]&#xff08;参数列表&#xff09;->返回值{函数体}&#xff1b; …

计算机网络:(二)计算机网络在我国发展与网络类别与性能 (附带图谱更好对比理解)

计算机网络&#xff1a;&#xff08;二&#xff09;计算机网络在我国发展与网络类别和性能 前言一、计算机网络在我国的发展二、计算机网络的类别1. 计算机网络的定义2. 不同类别的计算机网络&#xff08;1&#xff09;按覆盖范围分类&#xff08;2&#xff09;按传输技术分类…

CoreData 调试警告:多个 NSEntityDescriptions 声明冲突的解决

概述 目前在苹果生态 App 的开发中&#xff0c;CoreData 数据库仍然是大部分中小应用的优先之选。不过&#xff0c;运行时 CoreData 常常产生各种“絮絮叨叨”的警告不禁让初学的秃头小码农们云里雾里。 这不&#xff0c;对于下面这一大段 CoreData 警告&#xff0c;大家是否一…

解决QT_Debug 调试信息不输出问题

方式1 &#xff1a;手动通过添加环境变量解决 ->使用命令&#xff1a; QT_LOGGING_TO_CONSOLE1 qtcreator启动 ->如若还未输出qDebug调试信息 则在程序中引<QLoggingCategory>包 #include <QLoggingCategory> ->在程序入口添加 QLoggingCategory::defa…