How to Add a Button to the Action Menu in Odoo 17

In the dynamic landscape of business applications, efficiency and customization are paramount. Odoo 17, a robust open-source ERP system, offers extensive customization capabilities to tailor the platform to specific business needs. One such customization is adding a custom button to the Action Menu in form views, enabling users to trigger specific actions directly from the interface. This guide provides a step-by-step walkthrough on how to add a button to the Action Menu in Odoo 17, enhancing user experience and streamlining operations.

Understanding the Action Menu in Odoo

The Action Menu in Odoo’s form views provides users with quick access to various operations related to the current record, such as duplicating, archiving, or deleting. By default, these actions are predefined, but Odoo’s flexible architecture allows developers to extend this menu with custom actions, thereby improving workflow efficiency and user interaction.

Things You Should Know before Proceeding

• A working Odoo 17 development environment.
• Basic knowledge of Python and JavaScript.
• Familiarity with Odoo’s module structure and development practices.

Step 1: Create a Custom Module

Begin by creating a new custom module to encapsulate your changes. This modular approach ensures maintainability and ease of deployment.

Directory Structure:

custom_action_button/
├── __init__.py
├── __manifest__.py
├── models/
│   └── custom_model.py
├── security/
│   └── ir.model.access.csv
├── static/
│   └── src/
│       └── js/
│           └── form_controller.js
├── views/
│   ├── custom_model_views.xml
│

manifest.py:

{
    'name': "Custom Action Button",
    'version': '17.0.1.0.0',
    'category': 'Tools',
    'summary': 'Adds a custom button to the action menu in form views',
    'description': """Enhances form views by adding a custom action button to the action menu.""",
    'depends': ['base'],
    'assets': {
        'web.assets_backend': [
            'custom_action_button/static/src/js/form_controller.js',
        ],
    },
    'data': [
        'security/ir.model.access.csv',
        'views/custom_model_views.xml',
        'views/custom_model_menu.xml',
    ],
    'installable': True,
    'application': False,
}

This manifest file defines the module’s metadata and specifies the JavaScript file to be included in the backend assets “web.assets_backend”.

Step 2: Extend the FormController in JavaScript

Firstly, we need to import the required things from Odoo’s OWL framework:

/** @odoo-module **/
import { FormController } from '@web/views/form/form_controller';
import { patch } from "@web/core/utils/patch";

Explanation:

• Import Statements: Import the necessary modules to extend the FormController.

To add a custom button to the Action Menu, you’ll need to patch the FormController class in Odoo’s web client.

Patching is a way to extend or modify the behavior of existing classes without changing the source code.

patch(FormController.prototype, {
    getStaticActionMenuItems() {
        const items = super.getStaticActionMenuItems();
        items['custom_action'] = {
            sequence: 50,
            description: "Custom Action",
            callback: () => {
                this.env.services.action.doAction({
                    type: 'ir.actions.act_window',
                    name: 'Custom Action',
                    res_model: 'custom.model',
                    target: 'new',
                    views: [[false, 'form']],
                });
            },
            skipSave: true,
        };
        return items;
    },
});

Explanation:

• patch Function: Utilize the patch function to extend the getStaticActionMenuItems method, which defines the items in the Action Menu.
• Custom Menu Item: Add a new item with a unique key ('custom_action') and define its properties:
  • Sequence: Determines the order of the item in the menu.
  • Description: The label is displayed in the menu.
  • callback: In the text, a callback function with a doAction method is explained. Usually, callback functions are executed in response to specific events. Here, it is the doAction method that opens the wizard that guides the creation of a sales order. Since it initiates the user interaction that will collect the data required to generate the sales order, this step is vital. The function is executed when the item is clicked. Here, it triggers an action to open a form view of the custom.model.
  • skipSave: Prevents the current record from being saved before executing the action.

Step 3: Define the Model and View

To ensure the action functions correctly, define the model custom.model and its corresponding view.

Python Model (models/custom_model.py):

from odoo import models, fields

class CustomModel(models.Model):
    _name = 'custom.model'
    _description = 'Custom Model'

    name = fields.Char(string='Name')

XML View (views/custom_model_views.xml):

<odoo>
    <record id="view_custom_model_form" model="ir.ui.view">
        <field name="name">custom.model.form</field>
        <field name="model">custom.model</field>
        <field name="arch" type="xml">
            <form string="Custom Model">
                <sheet>
                    <group>
                        <field name="name"/>
                    </group>
                </sheet>
            </form>
        </field>
    </record>

    <record id="action_custom_model" model="ir.actions.act_window">
        <field name="name">Custom Model</field>
        <field name="res_model">custom.model</field>
        <field name="view_mode">form</field>
        <field name="view_id" ref="view_custom_model_form"/>
        <field name="target">new</field>
    </record>
    
    <menuitem id="menu_custom_root"
              name="Custom App"
              sequence="10"/>

    <!-- Submenu -->
    <menuitem id="menu_custom_model"
              name="Custom Model"
              parent="menu_custom_root"
              action="action_custom_model"
              sequence="1"/>
</odoo>

Explanation:

• Model Definition: Define a simple model with a name field.
• Form View: Create a form view for the model.
• Action Window: Define an action to open the form view in a modal (target='new'), which is triggered by the custom button.

Step 4: Add Access Rights with CSV

You also need to define access permissions using a CSV file so users can see the model in the UI.

security/ir.model.access.csv

id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
access_custom_model,access.custom.model,model_custom_model,base.group_user,1,1,1,1

Step 5: Update the Module and Assets

Ensure that your modules __init__.py and __manifest__.py Files are correctly set up to include the new model and views.

__init__.py

from . import models

manifest.py

'depends': ['base'],
'data': [
    'views/custom_model_views.xml',
],
'assets': {
    'web.assets_backend': [
        'custom_action_button/static/src/js/form_controller.js',
    ],
},

Step 6: Install and Test the Module

1. Update App List: In Odoo, navigate to Apps and click on “Update Apps List” to recognize the new module.
2. Install Module: Search for “Custom Action Button” and install it.
3. Test the Button:
   • Open any form view where the Action Menu is present.
   • Click on the Action Menu and verify that the “Custom Action” button appears.
   • Click the button to ensure it opens the custom model’s form view in a modal.

Related Post

>> Understanding OWL JS Lifecycle Hooks in Odoo 17

>> How to Change the Color on a Progress Bar in Odoo 17

>> How to Add Chatter in Form View in Odoo 17

Additional Points for adding a Button to the Action Menu

Access Rights: Ensure that appropriate access rights are set for the custom.model to prevent unauthorized access.

Multiple Views: If you want the custom button to appear in specific models or views, implement conditional logic within the getStaticActionMenuItems A method to check the current model or view.

Localization: For multi-language support, consider using Odoo’s translation mechanisms to localize the button’s description.

Conclusion: How to Add a Button to the Action Menu in Odoo 17

Adding a custom button to the Action Menu in Odoo 17 is a simple yet powerful way to enhance user experience and streamline workflows. It allows you to trigger specific actions directly from the form view, saving time and reducing clicks.

With this blog, “How to Add a Button to the Action Menu in Odoo 17,” and just a bit of JavaScript and XML, you can make Odoo work exactly the way your business needs. This customization not only improves productivity but also highlights how flexible and developer-friendly Odoo truly is.

Whether you’re building for a client or your own company, mastering small customizations like the one explained in “How to Add a Button to the Action Menu in Odoo 17” can go a long way in delivering smarter, more efficient ERP solutions.

For further customization or assistance, consider consulting with Odoo experts or exploring Odoo’s extensive documentation and community forums.

If you want any type of customization in Odoo, contact us. We’d love to help!

Happy Development!