How To Use JS In Odoo Website

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. 

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!