如何在Odoo16中继承XML文件修改视图标签文本？

我需要继承Odoo16里product模块的odoo16/addons/product/static/src/xml/price_report.xml文件，把这段代码里的原文本“Display Pricelist”改成新内容：

<div class="form-check">
  <input class="form-check-input o_is_visible_title ms-2" type="checkbox"/>
  <label class="form-check-label">Display Pricelist</label>
</div>

我用jQuery写了修改代码，在Chrome控制台里能生效，但放到Odoo环境里就没用，我的JS代码如下：

odoo.define('aretx_product_pricelist.custom', function (require) {
  "use strict";

  var core = require('web.core');
  var Widget = require('web.Widget');

  var test = $('.form-check-label').text('newText');
  $('html body .form-check-label').text('newText123');
  $('.form-check-label').text('newText123');
  $('html .form-check-label').text('newText123');
  $('body .form-check-label').text('newText132');
});

可行解决方案 #

方法一：XML继承修改（Odoo官方推荐） #

用XML继承是最稳定的方式，完全符合Odoo框架规范：

1. 在自定义模块里创建static/src/xml/price_report_inherit.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-inherit="product.price_report" t-inherit-mode="extension">
        <xpath expr="//div[@class='form-check']/label[@class='form-check-label']" position="replace">
            <label class="form-check-label">你的新文本内容</label>
        </xpath>
    </t>
</templates>

2. 打开模块的__manifest__.py，把这个XML文件添加到后端资源配置里：

'assets': {
    'web.assets_backend': [
        '你的模块名/static/src/xml/price_report_inherit.xml',
    ],
},

3. 升级模块，刷新页面就能看到修改后的文本。

方法二：正确的JS修改方式 #

之前的JS代码无效是因为DOM元素还没渲染完成就执行了jQuery选择器，Odoo组件是异步渲染的，必须等页面或组件加载完成后再操作DOM：

方式A：等待页面核心加载完成

odoo.define('aretx_product_pricelist.custom', function (require) {
    "use strict";

    var utils = require('web.utils');

    // 等页面核心组件加载完毕再执行DOM修改
    utils.ready().then(function () {
        // 精准匹配原文本的标签，避免修改其他同名class的元素
        $('.form-check-label:contains("Display Pricelist")').text('你的新文本内容');
    });
});

方式B：扩展对应组件（更可靠）

如果知道这段代码所属的Widget，直接扩展组件的渲染方法：

odoo.define('aretx_product_pricelist.custom', function (require) {
    "use strict";

    // 替换成这段代码实际所属的组件路径，比如product模块里的对应Widget
    var TargetWidget = require('product.price_report');

    TargetWidget.include({
        renderElement: function () {
            // 先执行原渲染逻辑
            this._super.apply(this, arguments);
            // 渲染完成后修改当前组件内的标签文本
            this.$('.form-check-label').text('你的新文本内容');
        }
    });
});

不管用哪种JS方式，都要把JS文件添加到__manifest__.py的assets里：

'assets': {
    'web.assets_backend': [
        '你的模块名/static/src/js/custom.js',
    ],
},

内容的提问来源于stack exchange，提问作者faizal khan