Hi guys,
In this tutorial I will learn you how to add CSS and JavaScript to your custom Odoo module. This gives you the ability to change the design of things in Odoo, to execute JavaScript (and jQuery) and opens up a whole new set of possibilities to add extra options in Odoo.
In this example I will learn you how to add new JS/CSS files to Odoo and how they should be added to Odoo by the official guidelines. At the end you can also find a link to a demo module so you can always look at a code example too!
1. Creating the XML
The first step is to create a new XML file in your custom module. Create a new XML file under yourModuleName/views, like this:
Now the first thing to do is to tell __openerp__.py that you’ve added this new XML file, otherwise Odoo will not load it. Open up __openerp__.py and add in a line in the data block. Be sure to give it the correct path and filename:
Now return to your XML file. All CSS and JavaScript in Odoo is added to the assets so the first step is to create an inherit_id calling this, then we’ll use an xpath to add in 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. So how does this look in code?
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="UTF-8"?> <openerp> <data> <!-- Adds all assets in Odoo --> <template id="assets_backend" name="static_resources_demo assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <!-- All links to CSS and JS files should be added in here. --> </xpath> </template> </data> </openerp> |
Let us break this down! We’ve created a new template called ‘assets_backend’, which has a name ‘static_resource_demo assets’ and which inherits ‘web.assets_backend’. The ‘web.assets_backend’ is already created by Odoo and contains all the CSS/JavaScript code so we’ll simply inherit it to add our files to it. The xpath expression is simply telling Odoo let us add those files to the main path of ‘web.assets_backend’. Simple, isn’t it?
2. Creating your CSS / JavaScript files
Alright so now that we have the basis done for adding in CSS or JavaScript files we should first create them. The guidelines of Odoo say that you should create a new folder named ‘static’, so do so. 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 which file you need to add. In this example I will explain both. If you want to add CSS files read part 2.1, if you want to add JavaScript files read part 2.2 and if you want to do both, well read both.
2.1 Creating your CSS files
Create a new folder ‘css’ for this example and open it up. This is now the official structure for adding CSS files to Odoo! Now create a new CSS file in this folder. I’ve named it ‘cssfile.css’ just for demo purposes, but you can name this whatever you like. The final result will now look like this:
So in my example I’ve created a custom module named ‘static_resources_demo’ in which I created the folders. From here on you can add all the CSS in your CSS file as you like!
This leaves us with one more thing to do. Odoo doesn’t know the path to the CSS file yet so open up your XML file again (in my case named resources.xml) and add the path to your CSS file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="UTF-8"?> <openerp> <data> <!-- Adds all assets in Odoo --> <template id="assets_backend" name="static_resources_demo assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <!--These links will be called when loading your Odoo --> <link rel="stylesheet" href="/static_resources_demo/static/src/css/cssfile.css"/> </xpath> </template> </data> </openerp> |
An important note is that you should also add the name of your module in! The xpath and template know the path up in to the folder addons but from there on Odoo is lost if you don’t tell it where to look. So first add your module name and then continue with /static/src/css/yourFileName.css.
2.2 Creating your JavaScript files
Create a new folder ‘js’ for this example and open it up. This is now the official structure for adding JavaScript files to Odoo! Now create a new JS file in this folder. I’ve named it ‘javascriptfile.js’ just for demo purposes, but you can name this whatever you like. The final result will now look like this:
So in my example I’ve created a custom module named ‘static_resources_demo’ in which I created the folders. From here on you can add all the JS in your JS file as you like!
This leaves us with one more thing to do. Odoo doesn’t know the path to the JS file yet so open up your XML file again (in my case named resources.xml) and add the path to your JS file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="UTF-8"?> <openerp> <data> <!-- Adds all assets in Odoo --> <template id="assets_backend" name="static_resources_demo assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <!--These links will be called when loading your Odoo --> <script type="text/javascript" src="/static_resources_demo/static/src/js/javascriptfile.js"></script> </xpath> </template> </data> </openerp> |
3. Conclusion
Adding CSS or JavaScript to your custom module is very easy and has a lot of possibilities. This is ideal if you want to change the layout of your Odoo, if you want to create another theme or if you want to have extra control with JavaScript. Adding extra resources gives you almost unlimited possibilties such as creating new widgets or adding external JS libraries in!
Do you want to try a demo module and see the source code of this tutorial? You can view on my Github account.
Has this tutorial helped you, do you have any feedback or questions? Post away!
