Odoo uses menuitems to do some actions like view data from the database and show the result corresponding to user action. These menu items are basically like button action. Odoo keeps a coding standard and also it is a platform. This blog is discussing how to invoke a js function in a menuitem click. Let's check how the menu item calls a js action.

       First, you want to create a new menuitem to trigger this action. Some basic attributes are needed for menuitem for unique operations.

Id: It’s a mandatory field and it is an identifier of a menu item. This identifier must be unique.

Name: It is used for easy to understand the use of this menu.

Parent: This attribute helps to assign the menu to a specific model or child menuitem of a model.

Action:  Specify the id of the ir.actions model.

Sequence: This is used to set a position for the menu.

<menuitem id="menu_js_action"
      name="JS Action"
      parent="module_name.parent_menu"
      action="action_toggle_js_function"
      sequence="100"/>

This menu will have appeared only when the menuitem action and a record id matches.

So create a record for getting activated on this menuitem.

In this case, one can use two types of methods to load a js function. 

Load js function by using ir.actions.server and ir.actions.client.

Load js function by only using ir.actions.client.

Load js function by using ir.actions.server and ir.actions.client

First, you want to create a record with model ir.actions.server and set the action of menuitem as id of the record.

There are some important fields for creating this type of record.

<record id=”action_toggle_js_function” model=”ir.actions.server”>
    <field name=name>Load JS Function</field>
    <field name=”model_id” ref=module_name.model_name/>
    <field name=”state”>code</field>
    <field name=”code”>action = model.env.ref(‘model.client_action_record’).read()[0]</field>
</record>

Here I am using a field state that is used for writing python code on record creation form. You can see the next line I used a code field to write a python code for another action. 

If you want to get more information about ir.actions.server 

please go through the link Types of Actions in Odoo

In this action call a record with id client_action_record. This record must be ir.actions.client.

Create a record with the model ir.actions.client and with the same id that already specified on the code of the server action.

Client action is triggered when an action is implemented by the client.

<record id=”client_action_record’” model=”ir.actions.client”>
    <field name=name> JS function</field>
    <field name=tag>js_function</field>
</record>

Here I am using a field tag. The string specified on the tag field must be added to the action registry of the js file in the same model.

You can check how this case used in website module by referring the view website_views.xml

Load js function by only using ir.actions.client

In this case, create a record with ir.actions.client. Then specify the menuitem action as record id.

So create a record,

<record id=”action_toggle_js_function”  model=”ir.actions.client”>
    <field name=name> JS function</field>
    <field name=tag>js_function</field>
</record>

These are different ways to trigger client action. Here I am using the second method to load a JS function. 

The above steps are for the XML part. So we completed the XML side of this operation. 

Let us move to the JS part of the operation.

Create JS file in static > src > js > load_js_function.js

In this js file contains:

odoo.define('module_name.load_js_funtion', function (require){
  "Use strict";
  var core = require('web.core');
  var AbstractAction = require('web.AbstractAction');
  
  var FunctionName = AbstractAction.extend({
     //You can create your own actions.
  });
  
  core.action_registry.add(‘js_function’. FunctionName); 
   //One can add multiple action_registry
});

We must specify the name of the function invoked by the corresponding ir.actions.client tag string.

After that declare a space of the js part in our asset form. To create an XML file and specify the path of the JS file. for example 

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_backend" inherit_id="web.assets_backend">
    <xpath expr="//script[last()]" position="after">
        <script type="text/javascript" src="path_of_your_js_file"/>
    </xpath>
</template>
</odoo>

Finally, ensure that all the files are correctly specified on the manifest part of your project. This is how to load JS function in menuitem click by client action model.