(#66) How to Open the Form View of Many2many Clicking Tag in Odoo 18

In Odoo, the Many2many field is commonly used to define relationships between records. To improve user experience, you may want to enable users to directly open a form view by clicking on a tag within a Many2many field. In Odoo 18, this can be achieved through JavaScript customizations, providing a seamless interaction.

In order to open the many2many tag, we need to patch the existing Many2ManyTagsFieldColorEditable to handle the tag clicks. For this, we can use the following js code:

/** @odoo-module */
import { _t } from "@web/core/l10n/translation";
import { useService } from "@web/core/utils/hooks";
import { Many2ManyTagsFieldColorEditable } from "@web/views/fields/many2many_tags/many2many_tags_field";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { patch } from "@web/core/utils/patch";
patch(Many2ManyTagsFieldColorEditable.prototype, {
? ?setup() {
? ? ? ?super.setup();
? ? ? ?this.action = useService("action");
? ? ? ?this.dialogService = useService("dialog");
? ?},
? ?onTagClick(ev, record) {
? ? ? ?this.dialogService.add(ConfirmationDialog, {
? ? ? ? ? ?body: _t("To open the form view, click 'Open Form View'."),
? ? ? ? ? ?confirmClass: "btn-primary",
? ? ? ? ? ?confirmLabel: _t("Open Form View"),
? ? ? ? ? ?confirm: () => {
? ? ? ? ? ? ? ?this.action.doAction({
? ? ? ? ? ? ? ? ? ?type: 'ir.actions.act_window',
? ? ? ? ? ? ? ? ? ?res_model: this.relation,
? ? ? ? ? ? ? ? ? ?res_id: record.resId,
? ? ? ? ? ? ? ? ? ?views: [[false, 'form']],
? ? ? ? ? ? ? ? ? ?target: 'current',
? ? ? ? ? ? ? ?});
? ? ? ? ? ?},
? ? ? ?cancelLabel : _t("Cancel"),
? ? ? ? ? ?cancel: () => { },
? ? ? ?})
? ?}
})        

First, we start by importing the necessary files. The setup() function is executed during the component's initialization, making it an ideal place for initialization logic. Calling super.setup() ensures that the parent class's setup logic is executed as well. The useService("action") and useService("dialog") hooks are utilized to interact with Odoo’s core services for handling actions and dialogs.

To implement the customization, we extend the Many2ManyTagsFieldColorEditable prototype in the many2many_tags_field.js file. This allows us to override the onTagClick() function. The onTagClick(ev, record) function is triggered when a user clicks on a tag in a Many2many field. Here, ev represents the event object, and record provides details about the selected record.

When a tag is clicked, a confirmation dialog is displayed with an Open Form View button. If the user clicks this button, the form view of the selected record is opened using the this.action.doAction() method, which defines the action for opening the record in a form view.

In the manifest.py file, include theJavaScript file in the assets:

'assets': {
? ?'web.assets_backend':
? ? ? ?[
? ? ? ? ? ?'many2many_tag_open/static/src/js/many2many_tags_fields.js',
? ? ? ?]
},        

Here’s an example of a user interface showcasing this functionality. In the Contacts form view, there is a Many2many field called "Tags" that uses the many2many_tags widget

After clicking on it, a dialog box opens.??

If you click on the Open Form view button, we can open the form view selected tag.

This is how we can open the form view of many2many tags upon clicking on it.

By extending the functionality of the Many2many_tags widget in Odoo 18, we have enhanced the user experience by enabling direct access to the form view of a related record through a tag click. This improvement simplifies navigation and provides quick access to detailed record information, streamlining workflows within the interface. With minimal JavaScript customization and appropriate configuration, you can further tailor the behavior of Many2many fields, making Odoo an even more user-friendly and efficient platform for managing complex relationships.