Stop Losing $197K on Vendor Verification: Build Custom Many2One Widget in Odoo 18

# -*- coding: utf-8 -*-
from odoo import api, models

class ResPartner(models.Model):
    _inherit = 'res.partner'

    @api.model
    def get_partner_info(self, vals):
        """
        Fetch partner information for display in widget popover.
        
        Args:
            vals: Partner ID (integer as list/value)
        
        Returns:
            List of dict containing partner name, email, phone
        """
        partner_id = self.browse(int(vals))
        data = [{
            'name': partner_id.name or 'N/A',
            'email': partner_id.email or 'No email',
            'phone': partner_id.phone or 'No phone'
        }]
        return data

/** @odoo-module **/

import { registry } from '@web/core/registry';
import { Many2OneField, many2OneField } from '@web/views/fields/many2one/many2one_field';
import { usePopover } from "@web/core/popover/popover_hook";
import { useState, useRef } from "@odoo/owl";

export class Many2OneFieldWidget extends Many2OneField {
    static template = "my_module.Many2OneFieldWidget";
    
    static props = {
        ...Many2OneField.props,
    }

    setup() {
        super.setup();
        
        // Initialize popover hook
        this.popover = usePopover(
            this.constructor.components.Popover, 
            { position: "top" }
        );
        
        // Reference to popover element
        this.DetailPop = useRef("detail_pop");
        
        // Component state for partner data
        this.state = useState({
            ...this.state,
            data: []
        });
    }

    /**
     * Toggle popover display and fetch partner info
     */
    async showPopup(ev) {
        const popoverEl = this.DetailPop.el;
        
        if (popoverEl.classList.contains("d-none")) {
            // Fetch partner data from server
            const partnerId = this.props.record.data.partner_id[0];
            
            if (partnerId) {
                this.state.data = await this.orm.call(
                    'res.partner',
                    'get_partner_info',
                    [partnerId]
                );
            }
            
            // Show popover
            popoverEl.classList.remove("d-none");
        } else {
            // Hide popover
            popoverEl.classList.add("d-none");
        }
    }
}

export const many2OneFieldWidget = {
    ...many2OneField,
    component: Many2OneFieldWidget,
    fieldDependencies: [
        ...(many2OneField.fieldDependencies || []),
    ],
    extractProps({ options }) {
        const props = many2OneField.extractProps(...arguments);
        return props;
    },
};

// Register widget
registry.category("fields").add("partner_info", many2OneFieldWidget);

<?xml version="1.0" encoding="UTF-8" ?>
<templates>
    <t t-name="my_module.Many2OneFieldWidget" 
       t-inherit="web.Many2OneField"
       t-inherit-mode="primary">
       
        <!-- Add info button next to field -->
        <xpath expr="//t[@t-if='hasExternalButton']" position="before">
            <button class="btn btn-sm btn-outline-primary ms-1"
                    t-on-click="showPopup"
                    title="View partner details">
                <i class="fa fa-info-circle"/>
            </button>
        </xpath>
        
        <!-- Add popover for partner details -->
        <xpath expr="//div[hasclass('o_field_many2one_extra')]" position="before">
            <div class="popover d-none shadow-lg border" 
                 style="max-width: 300px; z-index: 1050;"
                 t-ref="detail_pop">
                 
                <div class="popover-header bg-primary text-white">
                    Partner Information
                </div>
                
                <div class="popover-body">
                    <t t-foreach="state.data" t-as="item" t-key="item_index">
                        <div class="mb-2">
                            <strong>Name:</strong> 
                            <span t-esc="item.name"/>
                        </div>
                        <div class="mb-2">
                            <strong>Email:</strong> 
                            <span t-esc="item.email"/>
                        </div>
                        <div class="mb-2">
                            <strong>Phone:</strong> 
                            <span t-esc="item.phone"/>
                        </div>
                    </t>
                </div>
            </div>
        </xpath>
    </t>
</templates>

{
    'name': 'Custom Many2One Widget',
    'version': '18.0.1.0.0',
    'category': 'Technical',
    'summary': 'Enhanced Many2One field with info popover',
    'depends': ['web', 'purchase'],
    'data': [
        'views/purchase_order_views.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'my_module/static/src/js/many2one_widget.js',
            'my_module/static/src/xml/many2one_widget.xml',
        ],
    },
    'installable': True,
    'application': False,
}

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <record id="purchase_order_form_custom" model="ir.ui.view">
        <field name="name">purchase.order.form.custom</field>
        <field name="model">purchase.order</field>
        <field name="inherit_id" ref="purchase.purchase_order_form"/>
        <field name="arch" type="xml">
            <xpath expr="//field[@name='partner_id']" position="attributes">
                <attribute name="widget">partner_info</attribute>
            </xpath>
        </field>
    </record>
</odoo>

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <record id="sale_order_form_custom" model="ir.ui.view">
        <field name="name">sale.order.form.custom</field>
        <field name="model">sale.order</field>
        <field name="inherit_id" ref="sale.view_order_form"/>
        <field name="arch" type="xml">
            <xpath expr="//field[@name='partner_id']" position="attributes">
                <attribute name="widget">partner_info</attribute>
            </xpath>
        </field>
    </record>
</odoo>

@api.model
def get_partner_info(self, vals):
    partner_id = self.browse(int(vals))
    
    # Format address
    address_parts = [
        partner_id.street,
        partner_id.street2,
        partner_id.city,
        partner_id.state_id.name,
        partner_id.zip,
        partner_id.country_id.name
    ]
    full_address = ', '.join(filter(None, address_parts))
    
    data = [{
        'name': partner_id.name or 'N/A',
        'email': partner_id.email or 'No email',
        'phone': partner_id.phone or 'No phone',
        'mobile': partner_id.mobile or 'No mobile',
        'website': partner_id.website or 'No website',
        'vat': partner_id.vat or 'No tax ID',
        'address': full_address or 'No address'
    }]
    return data

<div class="popover-body">
    <t t-foreach="state.data" t-as="item" t-key="item_index">
        <div class="mb-2"><strong>Name:</strong> <span t-esc="item.name"/></div>
        <div class="mb-2"><strong>Email:</strong> <span t-esc="item.email"/></div>
        <div class="mb-2"><strong>Phone:</strong> <span t-esc="item.phone"/></div>
        <div class="mb-2"><strong>Mobile:</strong> <span t-esc="item.mobile"/></div>
        <div class="mb-2"><strong>Website:</strong> <span t-esc="item.website"/></div>
        <div class="mb-2"><strong>Tax ID:</strong> <span t-esc="item.vat"/></div>
        <div class="mb-2"><strong>Address:</strong> <span t-esc="item.address"/></div>
    </t>
</div>