How to Add a Custom Action on Clicking Tags in Odoo 18

How to Add a Custom Action on Clicking Tags in Odoo 18

Introduction:

The blog given demonstrates integration of functionality in the Many2Many Tags field in Odoo whereby upon clicking a tag a dialog – “are you sure” is displayed as a confirmation message. When that is agreed to, the user has a view of the Windows form in relation to the clicked item. This particular detail will be easy to grasp by both the technical and non-technical audience.

Code:

    
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) {
        if (!record.resId) {
            console.error("Record ID is missing.");
            return;
        }
        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: () => {},
        });
    },
});

1. Module Declaration

    
    /** @odoo-module */

• This line declares the JavaScript file as an Odoo module.

• Odoo automatically recognizes and loads this file when the module is installed.

2. Import Statements

    
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";

• _t: Used for multi-language translations in Odoo.

• useService: Access Odoo’s core services, like dialog management and navigation.

• Many2ManyTagsFieldColorEditable: Refers to the original Many2Many Tags widget we are enhancing.

• ConfirmationDialog: A prebuilt Odoo dialog for user confirmations.

• patch: A tool to modify existing widgets or components without rewriting them entirely.

3. Patching the Many2Many Tags Widget:

    
    patch(Many2ManyTagsFieldColorEditable.prototype, {

• This line patches the Many2ManyTagsFieldColorEditable widget. It overrides specific behaviors while keeping the rest intact.

4. Setup Function

    
    setup() {
    super.setup();
    this.action = useService("action");
    this.dialogService = useService("dialog");
    },

• The setup function initializes the patched widget.

• super.setup(): Calls the original setup method from the base widget.

• this.action: Provides navigation functionality to open forms, lists, etc.

• this.dialogService: Enables displaying dialogs (popups).

5. Tag Click Behavior

   
    onTagClick(ev, record) {

• This function defines what happens when a user clicks a tag.

• Parameters:

• ev: The click event.

• record: The tag's corresponding record.

6. Error Handling for Missing Records

    
  if (!record.resId) {
    console.error("Record ID is missing.");
    return;
  }

Checks if the clicked tag is linked to a valid record. If not, logs an error and stops further execution.

7. Displaying the Confirmation Dialog

    
    this.dialogService.add(ConfirmationDialog, {
      body: _t("To open the form view, click 'Open Form View'."),
      confirmClass: "btn-primary",
      confirmLabel: _t("Open Form View"),
      confirm: () => {

• Adds a confirmation dialog.

• body: The dialog's message text.

• confirmClass: Styles the confirmation button (e.g., blue for primary).

• confirmLabel: Text for the confirmation button.

• confirm: Action to take when the user clicks "Open Form View."

8. Opening the Form View

    
    this.action.doAction({
      type: "ir.actions.act_window",
      res_model: this.relation,
      res_id: record.resId,
      views: [[false, "form"]],
      target: "current",
});

• type: "ir.actions.act_window": Opens a form view.

• res_model: The related model of the tag.

• res_id: The specific record ID.

• views: Specifies the form view.

• target: "current": Opens the form in the current window.

9. Cancel Button Behavior

   
   cancelLabel: _t("Cancel"),
   cancel: () => {},

• Defines a cancel button with no additional behavior when clicked.

Manifest:

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

• web.assets_backend: Ensures the file is loaded for the Odoo backend.

• File Path: Points to where the JavaScript file is stored in your module.
  
  

How It Works for Users:

1.Click a Tag:

• A user clicks on a tag in the Many2Many field.

2.Popup Dialog:

A confirmation dialog appears with two options:

• Open Form View: Redirects the user to the tag's related record.

• Cancel: Closes the dialog without further action

3.Smooth Navigation:
If "Open Form View" is selected, the user is taken directly to the relevant form.

Benefits:

For Developers:

• Reusable Code: Easily extendable to other widgets.

• Clean Design: Uses Odoo’s built-in services for consistency.

• Minimal Maintenance: Only modifies the necessary parts of the widget.

For Business Users:

• Enhanced Experience: Simplifies workflows by enabling tag interaction.

• Error-Free Navigation: Prevents unintentional clicks.

Conclusion:

This adjustment advances the Many2Many Tags widget, allowing users to interact with it more easily and in a more convenient way. Thanks to the addition of a few lines of JavaScript and associating it through the manifest file, we have incorporated a functionality that improves not only the end users but also the developers productivity.

If you are looking for an ERP implementation partner with diverse industry experience feel free to contact us. We have proven track record of successful implementations across various sectors including Odoo for Manufacturing, Odoo for Trading, Odoo for FMCG, Odoo for Oil & Gas, Odoo for Diary, Odoo for Pharma, Odoo for Cosmetic Clinic, Odoo for Contracting Companies, Odoo for HVAC, Odoo for Logistics, Odoo for Automobile, Odoo for Laundry, Odoo for Field Service, Odoo for E-Commerce & many more

ZestyBeanz offers Developer / Consultant outsourcing programs, Chat with us in Whatsapp and Hire Odoo Developers, Mobile Application Developers, Consultants.

#OdooKerala #OdooKochi #OdooTrivandrum #OdooERP #ProjectManagement #OdooVansales #HireOdooDeveloper