Steps To Add CSS and JavaScript Files In Odoo Module

Introducing CSS and javascript (and jQuery) allows you to modify the style of Odoo. It allows a user to open up a new set of options for adding an option in Odoo.

This write-up will explain how to add CSS and JavaScript files in Odoo modules.

Follow the step-by-step process to successfully add a CSS and JavaScript file in Odoo ERP.

1. Create an XML file under the views folder. This XML will attach the CSS and javascript files in the module.

2. Add this XML file path to your module manifest. This will load the XML file when the starting up for running.

Note: Ensure that you give the correct path and filename so that you can use it instantly without missing the file.

‘data’: [

   ‘views/assets.xml’,

],

3. We need to inherit the Odoo assets backend template in assets.xml where all the CSS and javascript are linked in a bundle.

When all CSS and JavaScript in Odoo are uploaded to assets, the initial step should be to call inherit id.

You can utilize an ‘XPath’ to add your code files. Furthermore, adding resources is similar to adding a field to a view using inheritance.

Here, you are only referring to a file instead of a field.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<odoo>
 <template
      id=”assets_backend”
      name=”Student Assets Backend ”
      inherit_id=”web.assets_backend”>
      <xpath expr=”.” position=“inside”>
       </xpath>
    </template>
</odoo>

The “web.assets_backend” is already designed by Odoo that has all the JavaScript and CSS code. A user can inherit them for adding its CSS and javascript files within. 

The </xpath> expression suggests Odoo for introducing those files to the web.assets_backend main path.

Creating CSS /JavaScript Files in Odoo

Let’s get started to generate CSS and JavaScript files in Odoo. 

• Create a new folder called ‘static’ under Odoo’s recommendations.
• Open this folder and make a new folder called ‘src.’
• After creating the ‘src’ folder, make a new one called ‘CSS,’ ‘js,’ or ‘images,’ based on the file you need to include.

• Create a CSS file

Follow the continuing steps to learn how to create a CSS file.

4. Create a CSS file in the module, according to Odoo guidelines CSS files are always created under the ‘static/src/css’ folder.

5. Link this CSS file path in the assets XML file.

Note: It is extremely important to add the name of your module to the path. After adding the module name then continue with static/src/css/yourfilename.css”/>.

• Create a JavaScript File

6. Create a Js file in the module, according to Odoo guidelines Js files are always created under the ‘static/src/js’ folder.

7. Link this Js file path in the assets XML file.

8. At last, restart the Odoo server and update your module to check the changes.

Wrapping Up!

Adding CSS and JavaScript files in the Odoo module is easy when you take the expert’s advice. Without missing a single code line, add important files into the Odoo smoothly.

For reaching out to the Odoo consultant, reach out to the following address:

Website: https://store.ksolves.com/
Phone:+1(646)-203-1075, +91-7498170227
Email: sales@ksolves.com

Leave your comments below to get better clarification on CSS/Js files in Odoo.