Home Blog How To Use JS In Odoo Website
How To Use JS In Odoo Website

How To Use JS In Odoo Website

Odoo is an ERP software that handles many business operations. It is one of the most used open-Source ERP software

Odoo provides a modular structure to handle all of your business functionalities- ranging from sales to HR to CRM. 

This also includes handling the website and customer portals. In odoo, websites are handled with different coding languages. Odoo uses XML for templates, CSS for designing, Python for handling routes, and API and JS for handling ongoing processes on the website. 

On the Odoo website, JS can be used in two ways. The first way of using JS is the basic way, which means calling the JS function in the document.ready function. The other way of using JS is by calling the JS function by Odoo way, which means inheriting public.widget class and using it.

In this blog, we will learn how to call Internal and External JS in odoo. Also, We are going to explore both ways of using JS in odoo. 

First, we will traverse through the ways of calling Internal and External. 


Internal JS:

This type of JS is to be used when we want to perform short and simple activities/processes on the website. For this, we write code directly in an XML file. We use the <script> tag for that purpose. We can also call some other JS files into the XML using this tag. Some of the examples of internal JS.

External JS:

This type of JS is used for big, complex JS functions. We can even use it for short and simple JS codes. However, we should mostly use external JS. This gives clarity to the code and makes it more readable. 

For this, we put JS files in our manifest file. We add it in the web.assets_frontend section which is part of the assets section. The way of adding JS changes in various odoo versions. In 14 and lower than 14 versions, we add this in the XML file in the same section whereas, in 15 and above than 15, we add this in the manifest file.

The way of adding JS files in 14 or less than 14 versions. 


The way of adding JS files in 15 or above 15 versions.

Now we will explore the ways of writing JS code in both the classical way and the Odoo class approach. We are going to create functions so that we can easily understand and learn the way of writing JS code easily.

JS Classical Approach:

For using this approach, we have to call our Event Listener functions and other functions in a main function that should be called each and every time, so that if we create any event listener it acts as soon as possible. For this, we use document.ready function as the main function. We then call all the other functions inside of it. 

In the above pic, we are calling the Onclick function on a tag that has id=”blog-example”. Here, we are using JQuery, instead of old classic JS because it makes it easy to code and write as well.


If we break the above example, then $(‘CSS selector’).on(‘Event Name’, ‘call’, function(arguments or no arguments) { Here goes the JS code }). This is the analysis of the code written above.

Odoo Default Approach:

In this approach, we use web.public.widget JS file for creating document.ready type environment. We create our own new class with the help of the widget class of web.public.widget file. 

In this, we first add our base/main/root selector in which all the other selectors exist. Now, we add events in the ‘events’ dictionary, which takes the key as the combination of event and CSS selector and value as the name of the function that is connected to this event. 

Here, we are first declaring the events along with their complementary functions and later on will define those functions. 

The following are the codes for better understanding. 

The above code is a way of declaring events and functions according to the odoo default approach. The following is the way of defining those functions.

We can use any kind of event for odoo. Some of them may have slightly different names other than JQuery one, but all will work properly. We can use JQuery operators and functions while defining a function. This gives a more flexible way of writing even complex code in a simple form.

Conclusion:

Odoo provides developers with the option of using Internal or External JS, offering more flexibility in implementing the functionality of the website. The classical approach is best suited for simple tasks whereas the Odoo default approach, with its structured event handling and inheritance, is apt for managing more complex JS functions.

Looking for Odoo expertise? Contact Kanak Infosystems for all your implementation needs. Get in touch now for more information!

Leave a Comment

Your email address will not be published.

Submit
Your comment is under review by our moderation team.