小组件代表 Odoo 中的显示屏幕、字段和属性。它允许我们使用不同的渲染模板自定义视图,它还允许我们根据自己的需求进行设计,这将有助于我们使开发更快、更简单、可扩展和更高效。
在 Odoo 中,我们有各种字段小组件,例如状态栏、复选框、单选按钮、浮点数、百分比、颜色选择器、URL 等等。
字段小组件允许我们根据其类型定义特定的字段规范。简而言之,字段组件帮助我们在我们的领域执行某些任务,这使得在 Odoo 中工作更便捷。
就“进度条”小组件来说,它以浮动字段的百分比显示值表示。“进度条”小组件的功能也是如此。因此,我们可以使用小组件添加自定义字段函数。
在这篇博客中,让我们看看如何在Odoo中创建一个字段小组件。
创建字段小组件的基本步骤
1. 创建一个小组件
import { FieldChar } from 'web.basic_fields';var CustomFieldChar = FieldChar.extend({ _renderReadonly: function () { // implement some custom logic here },});
2. 在字段注册表中注册小组件
import fieldRegistry from 'web.field_registry';fieldRegistry.add('custom-field-widget', CustomFieldWidget);
3.在视图中添加小组件
<field name="field_name" widget="custom-field-widget"/>
让我们以创建一个小组件 new_progress_bar'的示例,它与“进度条”小组件具有相同的功能。该小组件用于浮点型字段,让我们将现有的进度条更改为新样式。
现有进度条(widget=”progressbar”):-
新进度条(widget=”progress_bar_widget”):-
要创建一个新的字段小组件,首先,我们需要创建一个名为 progress_bar_widget 的模块。然后为其添加 JS、CSS 和 XML 文件。
您可以将文件添加到模块中,如下所示:
让我们在js文件中添加以下代码:
Progress_bar_widget.js:-
/** @odoo-module **/import AbstractField from 'web.AbstractField';import fieldRegistry from 'web.field_registry';var ProgressBarWidget = AbstractField.extend({ template: "ProgressBarWidget", start: function(){ this._super.apply(this, arguments); if (this.recordData[this.nodeOptions.currentValue]){ this.value = this.recordData[this.nodeOptions.currentValue] } }, _render: function() { var self = this; var value = this.value; var max_value = 100; value = value || 0; var widthComplete; if (value <= max_value){ widthComplete = parseInt(value/max_value * 100); } else{ widthComplete = 100; } this.$('.progress_number').text(widthComplete.toString() + '%'); this.$('.progress-bar-inner').css('width', widthComplete + '%'); },})fieldRegistry.add('progress_bar_widget', ProgressBarWidget);
Abstract字段是用于一目了然地呈现字段的基本字段组件。创建的组件将注册到field_registry。
与我们使用的Odoo 14 js相比
import WidgetName from 'module_name.WidgetName'; instead of web.require('module_name.WidgetName'); and removed theodoo.define('module_name.WidgetName', function(require){ 'use strict'; //code});
在代码的开头添加 /** @odoo-module **/
现在您需要将以下 XML 代码添加到组件设置的模板中。模板根据标准的 Odoo 模块格式加载到static/src/xml文件夹中。
Progress_bar_widget.xml:-
<templates id="template" xml:space="preserve"> <t t-name="ProgressBarWidget"> <div> <div class="progress_bar"> <div class="pro-bar"> <small class="progress_bar_title"> <span class="progress_number"/> </small> <span class="progress-bar-inner"/> </div> </div> </div> </t></templates>
现在我们需要为这个组件添加 CSS 来设计我们的进度条。
将以下代码添加到文件中:
Progress_bar_widget.css:-
.progress_bar .pro-bar { background: hsl(0, 0%, 97%); box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset; height: 4px; width: 200px; margin-bottom: 15px; margin-top: 10px; position: relative;}.progress_bar .progress_bar_title{ color: hsl(218, 4%, 50%); font-size: 15px; font-weight: 300; position: relative; top: -28px; z-index: 1;}.progress_bar .progress_number { float: right; margin-top: -6px; margin-right: -50px;}.progress_bar .progress-bar-inner { background-color: green; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; transition: width 1s linear 0s;}.progress_bar .progress-bar-inner:before { content: ""; background-color: hsl(0, 0%, 100%); border-radius: 50%; width: 4px; height: 4px; position: absolute; right: 1px; top: 0; z-index: 1;}.progress_bar .progress-bar-inner:after { content: ""; width: 14px; height: 14px; background-color: inherit; border-radius: 50%; position: absolute; right: -4px; top: -5px;}
然后将添加的文件加载到Assets和 Odoo 15 Assets文件中,我们可以将文件添加到清单中,如下所示:
'assets': { 'web.assets_backend': { '/progress_bar_widget/static/src/css/progress_bar_widget.css', '/progress_bar_widget/static/src/js/progress_bar_widget.js', }, 'web.assets_qweb': { '/progress_bar_widget/static/src/xml/progress_bar_widget.xml', },},
这就是我们在 Odoo 15 中创建字段小组件的方式。
我们可以通过使用widget=''progress_bar_widget''在字符字段中使用创建的小组件。
例如:
<field name="progress_value" widget="progress_bar_widget"/>
要显示小组件,请创建一个模块并添加这些文件,并创建一些字段以获取值。