how-to-add-css-javascript-in-odoo.png
Blogger_636316574414355870.jpg
By: Saritha

How to add CSS/JAVASCRIPT in Odoo?

Technical

Adding CSS and javascript(and jQuery)  enables with changing the design in odoo and also opening a new set of possibilities in adding an extra option in Odoo.

Let's look in how CSS/JAVASCRIPT file can be added in  Odoo.

1. Creating XML
The first step is to create a new XML file in your custom module under your ModuleName/views, as cited below:

how-to-add-css-javascript-in-odoo-1


Nextly add this new XML file to __manifest__ file
Open up __manifest__.py and add in a line in the data block. 
Make  sure you give the right path and filename

how-to-add-css-javascript-in-odoo-2

Now return to your XML file. 
As all CSS and JavaScript in Odoo are added to the assets, the first step should be to create an inherit_id calling, in next we’ll use an XPath to add our custom coded files. Adding resources is much like adding a field to a view with inheritance, you’re just referring to a file and not a field.

how-to-add-css-javascript-in-odoo-3

The ‘web.assets_backend’ is already created by Odoo and it contains all  CSS/JavaScript code. Therefore we’ll simply inherit them to add our files within.  The XPath expression is indicating Odoo to add those files to the main path of ‘web.assets_backend’. 

2. Creating your CSS / JavaScript files
Now we have to create  CSS or JavaScript files, therefore firstly create them. As per guidelines of Odoo, create a new folder named ‘static’. Open up this folder and create a new folder ‘src’. After you’ve created the folder ‘src’ you should create a new one named ‘css’, ‘js’ or ‘images’ depending on the file you need to add.

2.1 CREATING YOUR CSS FILES
Create a new folder ‘css’. This is the official structure for adding CSS files to Odoo! Now create a new CSS file in this folder. I’ve named it message.css’ just for demo purposes, but you can rename this whatever you like. The final result will now look like this:

how-to-add-css-javascript-in-odoo-4

As Odoo is unknown to the  path of CSS file,  open your XML file again and add the path to the CSS file:

how-to-add-css-javascript-in-odoo-5

It is very important to add the name of your module in the path and then continue with /static/src/css/yourFileName.css.

2.2 CREATING YOUR JAVASCRIPT FILES
Create a new folder ‘js’ and then create a new JS file in it.

how-to-add-css-javascript-in-odoo-6

As Odoo is not known to the CSS file path, once again open your XML file and add the path to the  CSS file:

how-to-add-css-javascript-in-odoo-7


For more reference, you can refer our custom modules published in Odoo Apps. One of the module link is attached below.

Refer to our previous blog to know the usage of "use strict" in JavaScript. It indicates that the code should be executed in strict mode. Strict mode improves JavaScript code by enforcing better programming practices and eliminating some of the language’s insecure and ill-advised features. To know more about What is the Use of Strict in Javascript

Odoo Blogs Odoo Development Tutorials Odoo Apps


If you need any assistance in odoo, we are online, please chat with us.


cybrosys youtube

Comments

2

Karniz

How to add JavaScript Accordion to Show and Hide code under form view?. I added Js code but it is not working. same code is working perfectly in Qweb. Code is given below

28/11/2019

-

3:34AM


Abdul Rasheed

The blog helps to know more about Js. It is always complicated for a few developers. As an Odoo Technical consultant, I'm developing an Odoo module. While designing custom views and also designing its documentation and I want to make designing more interactive by adding CSS and javascript. This blog helped to make it easier

17/04/2020

-

4:18AM




Leave a comment

 
Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message