Wasting $5,100? Use Odoo 18 Many2XAutocomplete in Custom Dialogs

/** @odoo-module **/
import { Component, useState } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Many2XAutocomplete } from "@web/views/fields/relational_utils";

export class ProductSelectorPopup extends Component {
    static components = { Many2XAutocomplete };
    static template = "custom_wizard.ProductSelectorPopup";
    
    setup() {
        // Reactive state
        this.state = useState({
            selectedProduct: null,
            selectedProductName: "Choose a Product"
        });
        
        // Odoo services
        this.orm = useService("orm");
        this.notification = useService("notification");
    }
    
    // Called when user selects product from dropdown
    async onSelectionChange(selection) {
        if (selection && selection.length > 0) {
            this.state.selectedProduct = selection[0];
            this.state.selectedProductName = selection[0].display_name;
        } else {
            this.state.selectedProduct = null;
            this.state.selectedProductName = "Choose a Product";
        }
    }
    
    // Domain to filter available products
    getRecordDomain() {
        // Only show active products that can be sold
        return [
            ["active", "=", true],
            ["sale_ok", "=", true]
        ];
    }
    
    // Save selection and close popup
    async saveSelection() {
        if (!this.state.selectedProduct) {
            this.notification.add("Please select a product", { type: "warning" });
            return;
        }
        
        try {
            // Example: Add product to some record
            await this.orm.call("your.model", "add_product", [
                [this.props.recordId],
                this.state.selectedProduct.id
            ]);
            
            this.notification.add("Product added successfully!", { type: "success" });
            this.props.close();
        } catch (error) {
            console.error("Error saving product:", error);
            this.notification.add("Error adding product", { type: "danger" });
        }
    }
    
    // Cancel and close popup
    cancel() {
        this.props.close();
    }
}

// Register as client action
registry.category("actions").add("product_selector_popup", ProductSelectorPopup);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="custom_wizard.ProductSelectorPopup">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                
                <!-- Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Select Product</h4>
                    <button type="button" class="btn-close" t-on-click="cancel"></button>
                </div>
                
                <!-- Body -->
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Product</label>
                        <Many2XAutocomplete
                            value="state.selectedProductName"
                            resModel="'product.product'"
                            fieldString="'Product'"
                            getDomain.bind="getRecordDomain"
                            update.bind="onSelectionChange"
                            activeActions="{}"
                            isToMany="false"
                        />
                    </div>
                    
                    <div t-if="state.selectedProduct" class="alert alert-info">
                        <strong>Selected:</strong> <t t-esc="state.selectedProductName"/>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="modal-footer">
                    <button class="btn btn-secondary" t-on-click="cancel">
                        Cancel
                    </button>
                    <button class="btn btn-primary" t-on-click="saveSelection">
                        <i class="fa fa-check"></i> Confirm
                    </button>
                </div>
                
            </div>
        </div>
    </t>
</templates>

async onSelectionChange(selection) {
    // selection is array of selected records
    // For Many2one (single selection), always check [0]
    if (selection && selection.length > 0) {
        const record = selection[0];
        
        // record contains:
        // - id: Database ID
        // - display_name: Human-readable name
        // - other fields if requested
        
        this.state.selectedProduct = record;
        this.state.selectedProductName = record.display_name;
    } else {
        // User cleared selection
        this.state.selectedProduct = null;
        this.state.selectedProductName = "Choose a Product";
    }
}

getRecordDomain() {
    // Return Odoo domain (list of tuples)
    return [
        ["active", "=", true],          // Only active records
        ["sale_ok", "=", true],         // Only sellable products
        ["type", "!=", "service"],      // Exclude services
        ["categ_id", "=", 5]            // Specific category
    ];
    
    // Can also use dynamic domains:
    // return [["partner_id", "=", this.props.partnerId]];
}

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="action_product_selector" model="ir.actions.client">
        <field name="name">Select Product</field>
        <field name="tag">product_selector_popup</field>
    </record>
    
    <menuitem
        id="menu_product_selector"
        name="Product Selector"
        action="action_product_selector"
        sequence="10"/>
</odoo>

{
    'name': 'Custom Product Wizard',
    'version': '18.0.1.0.0',
    'depends': ['base', 'web', 'product'],
    'data': [
        'views/client_action.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'custom_wizard/static/src/components/**/*',
        ],
    },
    'installable': True,
    'application': False,
}

setup() {
    this.state = useState({
        selectedProduct: null,
        selectedProductName: "Choose Product",
        selectedCustomer: null,
        selectedCustomerName: "Choose Customer"
    });
    this.orm = useService("orm");
}

// Separate callbacks
onProductChange(selection) {
    if (selection && selection.length > 0) {
        this.state.selectedProduct = selection[0];
        this.state.selectedProductName = selection[0].display_name;
    }
}

onCustomerChange(selection) {
    if (selection && selection.length > 0) {
        this.state.selectedCustomer = selection[0];
        this.state.selectedCustomerName = selection[0].display_name;
    }
}

// Separate domains
getProductDomain() {
    return [["sale_ok", "=", true]];
}

getCustomerDomain() {
    return [["customer_rank", ">", 0]];
}

<div class="modal-body">
    <div class="mb-3">
        <label class="form-label">Customer</label>
        <Many2XAutocomplete
            value="state.selectedCustomerName"
            resModel="'res.partner'"
            fieldString="'Customer'"
            getDomain.bind="getCustomerDomain"
            update.bind="onCustomerChange"
            activeActions="{}"
            isToMany="false"
        />
    </div>
    
    <div class="mb-3">
        <label class="form-label">Product</label>
        <Many2XAutocomplete
            value="state.selectedProductName"
            resModel="'product.product'"
            fieldString="'Product'"
            getDomain.bind="getProductDomain"
            update.bind="onProductChange"
            activeActions="{}"
            isToMany="false"
        />
    </div>
</div>