Odoo17免费开源ERP开发技巧:如何在表单视图中调用JS类

2024-03-19 04:20

本文主要是介绍Odoo17免费开源ERP开发技巧:如何在表单视图中调用JS类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文/Odoo亚太金牌服务·开源智造 老杨

在Odoo最新V17新版中,其突出功能之一是能够构建个性化视图,允许用户以独特的方式与数据互动。本文深入探讨了如何使用 JavaScript 类来呈现表单视图来创建自定义视图。通过学习本教程,你将获得关于开发Odoo 17前端交互的开发指南与建议,改善Odoo原有的本土化用户体验不佳的问题。

我们将探讨如何使用JavaScript类功能在Odoo中自定义表单视图。我们将首先向 XML 视图添加一个自定义按钮,单击该按钮将触发 JavaScript 函数。我们将逐步浏览 JavaScript 代码以理解它是如何工作的。在本文的最后,您将更好地了解如何使用JavaScript来增强Odoo的功能。

JavaScript 类函数通过为特定视图注册类来运行。当我们将此类添加到窗体视图时,它会将自定义视图注入到窗体中。为此,我们必须将自定义视图创建为模板,将其注册为组件,然后将其链接到表单控制器。因此,表单控制器在加载视图时检测到指定的类时将执行视图。

在下面的截图中,会注意到使用 JavaScript 类“model_info”集成到表单视图中的“Info”按钮。

在这里,我们继承了销售订单窗体,并添加了值为“model_info”的属性“js_class”。

<?xml version="1.0"?>
<odoo><record id="view_sale_order_form_inherit" model="ir.ui.view"><field name="name">sale.order</field><field name="model">sale.order</field><field name="inherit_id" ref="sale.view_order_form"/><field name="arch" type="xml"><xpath expr="//form" position="attributes"><attribute name="js_class">model_info</attribute></xpath></field></record>
</odoo>

首先,表单控制器验证 JS 类是否保存在注册表中。为此,我们在核心注册表中的自定义视图中注册该类。

在这里,我们通过添加按钮作为模板来继承基本窗体视图。

<templates><t t-name="blog_js_class.modelInfoBtn" t-inherit="web.FormView"><xpath expr="//t[@t-set-slot='layout-actions']" position="inside"><button class="btn btn-primary" t-on-click="actionInfoForm">Info</button></xpath></t>
</templates>

在这里,我们有一个按钮标签,里面有一个点击函数“actionInfoForm()”。现在,我们将模板扩展到组件中,以呈现视图以及从按钮单击调用的函数。

/** @odoo-module **/
import { FormController } from "@web/views/form/form_controller";
import { formView } from '@web/views/form/form_view';
import { registry } from "@web/core/registry";
import { jsClassDialog } from "@blog_js_class/js/js_blog_dialog";
class jsClassModelInfo extends FormController {actionInfoForm(){this.env.services.dialog.add(jsClassDialog, {resModel: this.props.resModel,resDesc: "This is a demo pop-up; feel free to customize the functionality to meet your requirements."});}
}
jsClassModelInfo.template = "blog_js_class.modelInfoBtn";
export const modelInfoView = {...formView,Controller: jsClassModelInfo,
};
registry.category("views").add("model_info", modelInfoView);

在此代码块中,我们导入注册模板所需的类。我们通过扩展formController创建一个新类,并将模板保存到其中。然后,我们使用常量将其导出到控制器。最后,我们在核心注册表的视图类别下注册它,js_class为“model_info”。

现在模板已经注册,在这个扩展类中,你将找到函数actionInfoForm(),它会弹出一个对话框。在Odoo17中,要弹出对话框,我们需要创建一个新组件。在这里,您可以看到在 Owl 组件类中注册的对话框模板及其值。

/** @odoo-module **/
import { Component } from "@odoo/owl";
import { Dialog } from "@web/core/dialog/dialog";
import { _t } from "@web/core/l10n/translation";
export class jsClassDialog extends Component{clickClose() {this.props.close()}
}
jsClassDialog.template = "blog_js_class.infoDialog";
jsClassDialog.components = { Dialog };
jsClassDialog.title = _t("Model Info"),
jsClassDialog.props = {confirmLabel: { type: String, optional: true },confirmClass: { type: String, optional: true },resModel: { type: String, optional: true },tools: Object,close: { type: Function, optional: true },};
jsClassDialog.defaultProps = {confirmLabel: _t("Close"),confirmClass: "btn-primary",
};
<templates><t t-name="blog_js_class.infoDialog"><Dialog size="'md'" title="'Model Info'" modalRef="modalRef"><div class=""><h6>Model:</h6><span><t t-esc="props.resModel"/></span><br/><h6>Description:</h6><span><t t-esc="props.resDesc"/></span></div><t t-set-slot="footer"><button class="btn" t-att-class="props.confirmClass"t-on-click="clickClose" t-esc="props.confirmLabel"/></t></Dialog></t>
</templates>

通过导入类 “jsClassDialog” 并将其添加到环境对话框服务中,我们可以弹出该对话框。

import { jsClassDialog } from "@blog_js_class/js/js_blog_dialog";
actionInfoForm(){this.env.services.dialog.add(jsClassDialog, {resModel: this.props.resModel,resDesc: "This is a demo pop-up; feel free to customize the functionality to meet your requirements."});
}

现在,让我们在单击“Info”按钮时看到对话框。

总之,Odoo中的JS类功能对于开发人员来说是一个宝贵的资源,提供了根据需要自定义工作流程的灵活性。它为集成JavaScript功能提供了许多可能性,从而增强了具有JS类功能的Odoo表单视图,并最大限度地发挥了其潜力。最终,这将为用户带来更具适应性和效率的开源ERP系统。

这篇关于Odoo17免费开源ERP开发技巧:如何在表单视图中调用JS类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/824777

相关文章

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++