How To Inherit JS In Xml?

How To Inherit JS In Xml?

Add custom css and javascript files in odoo.

 

Topic-1:Adding static resources (CSS and JavaScript) to Odoo

Example :

  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: New XML file

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:

Add the XML to __openerp__.py

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?

<?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?

  1. Creating your CSS / JavaScript files

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:

Folder structure for custom CSS file–>/your_module/static/src/css/yourfile.css

 

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:

<?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>

Note:inherit_id :web.assets_backend –>This is the id of xml file which is mapping file in web where we are defining our css and javascript file path i.e. mapping css and javascript file by giving their path That means, script tag will be in that file by xpat h 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:

Folder structure for custom JS file–>/your_module//static/src/js/yourFileName.js.

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:

<?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>

 

inherit_id :web.assets_backend –>This is the id of xml file which is mapping file in web where we are defining our css and javascript file path i.e. mapping css and javascript file by giving their path That means, script tag will be in that file by xpath

  1. 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!