如何为Odoo CRM Lead表单视图添加自定义OWL组件？

问题背景 #

正在为Odoo的CRM Lead模型表单视图开发自定义OWL转录控制组件，执行以下操作后出现报错：

• 编写FormRenderer补丁，通过onMounted钩子尝试挂载自定义组件
• 实现了包含启动/停止逻辑的TranscriptControl组件及对应XML模板
• 继承CRM Lead表单视图，在description字段后添加组件挂载DOM节点
• 改为在setup方法中获取DOM元素时，出现this.el未定义、目标DOM元素找不到、ctx.templates未定义等错误

分步解决方案 #

1. 修正FormRenderer的生命周期钩子使用 #

Odoo FormRenderer的onMounted触发时DOM尚未完成渲染，无法获取目标节点。应改用onRendered钩子（DOM渲染完成后触发），同时限定仅在CRM Lead视图中执行：

import { patch } from "@web/core/utils/patch";
import { FormRenderer } from "@web/views/form/form_renderer";
import { TranscriptControl } from "./transcript_control";

patch(FormRenderer.prototype, "crm_lead_transcript.FormRenderer", {
    async onRendered() {
        await super.onRendered(...arguments);
        // 仅针对crm.lead模型执行
        if (this.props.resModel !== "crm.lead") return;
        
        const targetEl = this.el.querySelector("#transcript-control-container");
        if (targetEl) {
            await TranscriptControl.mount(this.env, {}, targetEl);
        }
    },
});

2. 确保自定义OWL组件的模板正确关联 #

组件模板需通过Odoo模板系统注册，且组件中需指定正确的模板ID：

组件代码

import { Component, useState } from "@odoo/owl";

export class TranscriptControl extends Component {
    // 对应XML模板的t-name值
    static template = "crm_lead_transcript.TranscriptControl";

    setup() {
        this.state = useState({
            isTranscribing: false,
        });
    }

    startTranscript() {
        this.state.isTranscribing = true;
        // 此处添加实际转录逻辑
    }

    stopTranscript() {
        this.state.isTranscribing = false;
        // 此处添加停止转录逻辑
    }
}

XML模板（需放在模块的templates目录下）

<templates id="template" xml:space="preserve">
    <t t-name="crm_lead_transcript.TranscriptControl" owl="1">
        <div class="transcript-control p-2 border rounded">
            <button 
                t-if="!state.isTranscribing" 
                t-on-click="startTranscript"
                class="btn btn-primary"
            >
                启动转录
            </button>
            <button 
                t-else 
                t-on-click="stopTranscript"
                class="btn btn-danger"
            >
                停止转录
            </button>
        </div>
    </t>
</templates>

3. 正确继承CRM Lead表单视图 #

使用xpath精准定位到description字段后，添加唯一ID的挂载容器：

<record id="crm_lead_view_form_inherit_transcript" model="ir.ui.view">
    <field name="name">crm.lead.form.inherit.transcript</field>
    <field name="model">crm.lead</field>
    <field name="inherit_id" ref="crm.crm_lead_view_form"/>
    <field name="arch" type="xml">
        <xpath expr="//field[@name='description']" position="after">
            <div id="transcript-control-container" class="mt-3"/>
        </xpath>
    </field>
</record>

4. 解决setup方法中的DOM获取错误 #

若需在setup中处理，不能直接访问this.el，需使用Owl的useRef结合onMounted钩子：

import { patch } from "@web/core/utils/patch";
import { FormRenderer } from "@web/views/form/form_renderer";
import { TranscriptControl } from "./transcript_control";
import { useRef, onMounted } from "@odoo/owl";

patch(FormRenderer.prototype, "crm_lead_transcript.FormRenderer", {
    setup() {
        super.setup(...arguments);
        // 定义ref关联视图中的容器
        this.transcriptContainer = useRef("transcript-container");

        onMounted(async () => {
            if (this.props.resModel !== "crm.lead") return;
            
            const targetEl = this.transcriptContainer.el;
            if (targetEl) {
                await TranscriptControl.mount(this.env, {}, targetEl);
            }
        });
    },
});

对应的视图继承需修改为使用t-ref：

<xpath expr="//field[@name='description']" position="after">
    <div t-ref="transcript-container" class="mt-3"/>
</xpath>

5. 解决ctx.templates未定义问题 #

该错误通常是因为组件未正确关联模板：

• 确认组件的static template值与XML模板的t-name完全一致
• 确保XML模板文件已被模块加载（检查__manifest__.py中的data列表是否包含该模板文件）

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