Account

Default Behavior of Many2One Field in Odoo In Odoo 15, when clicking the external link button next to a Many2One field, a pop-up form view of the linked model appears. This feature allows users to quickly edit or create records associated with the field.

However, there are scenarios where this default behavior may not be ideal. For instance, instead of displaying a form view, we may want to show a list view listing all records of the Many2One field. This is particularly useful when we want to navigate to a category listing without creating multiple menu items in the user interface.

Objective: Adding a List View Button

To address this, we introduce a button that opens the list view of the Many2One field records, as shown below:

When clicking the button, the system displays a list view where users can add new records or edit existing ones without needing to navigate through multiple menus.

Implementation Steps

To achieve this, we extend the FieldMany2One widget.

1. Extending the Many2One Field

Create a new JavaScript file in static/src/js/many2one_button_list.js:

odoo.define('autonsi_hr_seyoung_korea.Many2OneButtonLink', function (require) {
    "use strict";

    const FieldMany2One = require('web.relational_fields').FieldMany2One;
    const registry = require('web.field_registry');

    const Many2OneButtonList = FieldMany2One.extend({
        events: _.extend({}, FieldMany2One.prototype.events, {
            'click .button-link-button': '_onLinkButtonClick',
        }),

        _renderEdit: function () {
            this._super.apply(this, arguments);

            if (this.nodeOptions && this.nodeOptions.no_external_link) {
                return;
            }
        
            const $selectionDiv = this.$el.find('.o_field_many2one_selection');
            const $button = $('<button>', {
                type: 'button',
                class: 'fa fa-list-ul button-link-button',
                title: 'Open List',
                style: 'border: none;background: transparent;color:blue;',
            });

            this.$el.find('.button-link-button').remove();

            if ($selectionDiv.length) {
                $selectionDiv.append($button);
            } else {
                this.$el.append($button);
            }
        },

        _onLinkButtonClick: function () {
            const self = this;
            const action_name = this.nodeOptions?.action;

            if (action_name) {
                self.do_action(action_name, {}).then(() => {
                    var footer = $(".modal-footer");
                    var closeButton = $('<button/>', {
                        text: 'Close',
                        class: 'btn btn-secondary o_form_button_cancel',
                        css: {'float': 'left'},
                        click: function () {
                            $('.close').trigger('click');
                        }
                    });
                    footer.append(closeButton);
                });
            } else {
                alert("No record selected.");
            }
        },
    });

    registry.add('many2one_button_list', Many2OneButtonList);
});

** Explanation of Code**

• The _renderEdit function ensures that the button only appears in edit mode and is positioned next to the Many2One field.
• The _onLinkButtonClick function checks for an action option, which represents the XML ID of the action linked to the list view.
• If an action is provided, the list view is opened, and a Close button is dynamically added to the modal footer.

3. Usage in Form View or Tree View

To use the widget, apply it to the Many2One field in your XML file as follows:

<field name="leave_kind_id" widget="many2one_button_list"
    options="{'no_quick_create':True, 'no_create_edit':True, 'no_open': True, 'action':'autonsi_hr_seyoung_korea.action_hr_outing_request_leave_kind'}" />

Conclusion

This enhancement allows users to navigate and manage records more efficiently by providing direct access to the list view from the Many2One field. It reduces the need for additional menus, making the interface cleaner and more user-friendly.