odoo17 owl 前端 顶部导航栏右侧添加自定义按钮

news2024/11/21 11:39:24

odoo17 前端 顶部导航栏右侧添加自定义按钮

先看图

很多时候都想要在这添加个自定义按钮或图标, 无穷下手添加

这里将展示如何在顶部header添加自定义

添加自定义模块 demo

目录结构如下

└─demo
    │  __init__.py
    │  __manifest__.py
    │
    ├─static
    │  └─src
    │      ├─systray_demo
    │      │      systray_demo.js
    │      │      systray_demo.xml

这个比较简单, 本次只做添加并响应, 不做任何逻辑处理

添加上来后显示如图

上代码

systray_demo.js 文件

/** @odoo-module **/

import {registry} from "@web/core/registry";
import {Component} from "@odoo/owl";

export class DemoItem extends Component {
    static template = "demo.SystrayDemoItem";  // 指定渲染的模板
    static props = {};

    setup() {
        this.Dmmessage = 'hello world';
    }
	// 点击后执行的方法
    onClick() {
        alert(this.Dmmessage);
    }
}
// 必须要使用这个, 然后继承操作, 不然不会显示在首页
// 当然如果有需求显示, 可在isDisplayed 方法中判断,符合条件再显示
export const systrayItem = {
    Component: DemoItem,
    isDisplayed: function (env) {
        return true;
    },
};

// 在systray 类别中添加自己定义的
registry.category("systray").add("SystrayDemoItem", systrayItem);

systray_demo.xml 这个文件就比较简单了, 制作简单的显示

<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">
    <t t-name="demo.SystrayDemoItem">
        <div>
            <span t-on-click="onClick">hello</span>
        </div>
    </t>
</templates>

好了, 当点击hello后执行js方法操作

如需应变各种需求, 还需要写xml和js方法来适配, 下拉等多种方法

结束

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Power bi中的lookupvalue函数

lookupvalue函数是一个非常实用的函数&#xff0c;它可用于在两个表之间查找相应的值。kagkupMalue函数可以将一个表中的列值作为参数传递给另一个表中的列&#xff0c;并返回在第二个表中与该值匹配的另一个列的值。在实践中&#xff0c;lookupvalue函数通常用于两个表之间的关…

golang分布式缓存项目 Day5 分布式节点

该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 1 流程回顾注&#xff1a; 我们在GeeCache 第二天 中描述了 geecache 的流程。在这之前已经实现了流程 ⑴ 和 ⑶&#xf…

[产品管理-76]:延续是创新与颠覆式创新的比较

目录 一、概述 1、定义与特征 2、市场影响与竞争策略 3、实施难度与风险 4、案例分析 二、示例 1. 延续性创新示例 2. 创新示例 3. 颠覆式创新示例 一、概述 延续性创新与颠覆式创新是技术创新领域的两种重要策略&#xff0c;它们在多个方面存在显著差异。 以下是对…

【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

AI:重塑电商行业的创新引擎,开启电商数字化转型新征程

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

语义分割数据增强,图像和标签同步对应详细增强教程(附代码)

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《图像增强》 &a…

pgsql和mysql的自增主键差异

1. 当有历史数据存在时&#xff0c; mysql的自增主键是默认从最大值自增。 pgsql的自增主键取初始值开始逐个尝试&#xff0c;所以存在可能与历史数据的主键重复的情况。 pgsql解决上述问题的方式&#xff1a;重设自增值。 SELECT SETVAL(t_db_filed_id_seq, (SELECT MAX(&q…

Spring Cloud Contract快速入门Demo

1.什么是Spring Cloud Contract &#xff1f; Spring Cloud Contract 是 Spring 提供的一套工具&#xff0c;用于帮助开发者通过契约&#xff08;Contract&#xff09;驱动的方式进行微服务的测试和集成。它主要解决微服务之间通信时&#xff0c;如何确保服务提供者和消费者之…

OceanBase JDBC (Java数据库连接)的概念、分类与兼容性

本章将介绍 OceanBase JDBC的 概念与分类&#xff0c;已帮助使用 JDBC 的用户及技术人员更好的 了解JDBC&#xff0c;以及 OceanBase JDBC在与 MySQL 及 Oracle 兼容性方面的相关能力。 一、JDBC 基础 1.1 JDBC 的概念 JDBC 一般指 Java 数据库连接。Java 数据库连接&#xf…

自定义springCloudLoadbalancer简述

概述 目前后端用的基本都是springCloud体系&#xff1b; 平时在dev环境开发时&#xff0c;会把自己的本地服务也注册上去&#xff0c;但是这样的话&#xff0c;在客户端调用时请求可能会打到自己本地&#xff0c;对客户端测试不太友好. 思路大致就是前端在请求头传入指定ip&a…

Go/Golang语言各种数据类型内存字节占用大小和最小值最大值

具体请前往&#xff1a;Go/golang语言基本数据类型字节大小和取值范围(最小值~最大值)

力扣104 : 二叉树最大深度

补&#xff1a;二叉树的最大深度 描述&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 何解&#xff1f; 树一般常用递归&#xff1a;递到叶子节点开始倒着处理

Android GPU纹理数据拷贝

在 Android 开发中读取纹理数据有以下几种方法&#xff1a; glReadPixelsImageReaderPBO&#xff08;Pixel BufferObject&#xff09; HardwareBuffer 1. glReadPixels glReadPixels 是 OpenGL ES 的 API&#xff0c;通常用于从帧缓冲区中读取像素数据&#xff0c;OpenGL ES…

畅捷通T+ RecoverPassword.aspx

用友 畅捷通T RecoverPassword.aspx 存在未授权管理员密码修改漏洞&#xff0c;攻击者可以通过漏洞修改管理员账号密码登录后台 #漏洞影响版本 12.0&#xff0c;12.1.12.2.12.3 13.0 15.0 16.0 18.0 补丁号291都影响 19.0 补丁号167之前也有影响 对于老版本畅捷通已经…

最全最简单理解迭代器

1. 迭代器的基础概念(iterator) 1.1 本质 迭代器能够用来遍历容器的对象,与能够遍历数组的指针类似,是广义指针。 1.2 作用: 能够让迭代器与算法不干扰的相互发展,最后又能无间隙的粘合起来。重载了*,++,==,!=,=运算符。用以操作复杂的数据结构。容器提供迭代…

python数据写入excel文件

主要思路&#xff1a;数据 转DataFrame后写入excel文件 一、数据格式为字典形式1 k e &#xff0c; v [‘1’, ‘e’, 0.83, 437, 0.6, 0.8, 0.9, ‘好’] 1、这种方法使用了 from_dict 方法&#xff0c;指定了 orient‘index’ 表示使用字典的键作为行索引&#xff0c;然…

[CKS] Create/Read/Mount a Secret in K8S

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于读取、创建以及挂载secret的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[C…

docker之容器设置开机自启(4)

命令语法&#xff1a; docker update --restartalways 容器ID/容器名 选项&#xff1a; --restart参数 no 默认策略&#xff0c;在容器退出时不重启容器 on-failure 在容器非正常退出时&#xff08;退出状态非0&#xff09;&#xff0c;才会重启容器 …

机器学习:决策树——ID3算法、C4.5算法、CART算法

决策树是一种常用于分类和回归问题的机器学习模型。它通过一系列的“决策”来对数据进行分类或预测。在决策树中&#xff0c;每个内部节点表示一个特征的测试&#xff0c;每个分支代表特征测试的结果&#xff0c;而每个叶节点则表示分类结果或回归值。 决策树工作原理 根节点&…

Angular 和 Vue2.0 对比

前言 &#xff1a;“业精于勤&#xff0c;荒于嬉&#xff1b;行成于思&#xff0c;毁于随” 很久没写博客了&#xff0c;大多记录少进一步探查。 Angular 和 Vue2.0 对比&#xff1a; 一.概念 1.1 Angular 框架&#xff1a; 是一款由谷歌开发的开源web前端框架&#xff08;核…