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. 

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.