Add CSS and Javascript files to Odoo module

Syntax#

Note about XML syntax: As the record is made inside of XML file, you can not leave any tag unclosed as you could in a plain HTML, like: <link rel=‘stylesheet’ href=”…” >, Close the link tag instead, like:
- <link rel=‘stylesheet’ href=”…” />

Parameters#

Possible values of inherit_id parameter	meaning
web.assets_backend	Used in internal pages only, NOT included in a public website.
website.assets_frontend	Used in a public website only (via ”website” module).
web.assets_common	Used in both, public website and internal pages.
## Remarks#
If you are not sure about which option is suitable for you, then try the first option (backend) as it is used in most cases and nearly in all cases if you have not installed the “website” module. Odoo differentiates between “backend” and “frontend” assets because the public website provided by the “website” module uses different styling and JS code than internal pages meant to be used for ERP tasks, i.e. “frontend” is associated with the public website and “backend” is associated with internal pages for ERP (meaning of “frontend” and “backend” are Odoo specific here, but they are both “frontend” in more general sense).

You can not only choose and use one of the options, but also use any combination of them (two of them or all of them) in the same module. Factor a backend, a frontend and a common JS/CSS code into separated files to better adhere to DRY and have suitable code in the public website and in the internal pages.

Do not forget to add “web” (when using option 1) or “website” (when using option 2) to the dependency list in the __openerp__.py manifest.

Store CSS and JS files correctly in Odoo module

CSS and JS files should be reside under ‘static’ directory in the root directory of module (the rest of subdirectory tree under ‘static’ is an optional convention):

static/src/css/your_file.css
static/src/js/your_file.js

Then add links to these files unsing one of the 3 ways listed in the following examples.

Option 1: [BACKEND] Add CSS and Javascript files to use in internal pages

Odoo v8.0 way is to add corresponding record in the XML file:

Add XML file to the manifest (i.e. __openerp__.py file.):

…
‘data’ : [ ‘your_file.xml’ ],
…
Then add following record in 'your_file.xml':

    <openerp>
        <data>  
            <template id="assets_backend" name="your_module_name assets" inherit_id="web.assets_backend">  
                <xpath expr="." position="inside">  
                    <link rel='stylesheet' href="/your_module_name/static/src/css/your_file.css"/>  
                    <script type="text/javascript" src="/your_module_name/static/src/js/your_file.js"></script>  
                </xpath>  
            </template>  
        ....  
        ....  
        </data>  
     </openerp>

Option 2: [FRONTEND] Add CSS and Javascript files to use in a public website

Note: you should use this way if you’ve installed a “website” module and you have a public website available.

Add following record in 'your_file.xml':

    <openerp>
        <data>  

            <template id="assets_frontend" name="your_module_name assets" inherit_id="website.assets_frontend">  
                <xpath expr="link[last()]" position="after">  
                    <link rel='stylesheet' href="/your_module_name/static/src/css/your_file.css"/>  
                </xpath>  
                <xpath expr="script[last()]" position="after">  
                    <script type="text/javascript" src="/your_module_name/static/src/js/your_file.js"></script>  
                </xpath>  
            </template>  

        </data>  
     </openerp>

Option 3: [COMMON] Add CSS and Javascript files to use in all pages (backend & frontend)

Add following record in 'your_file.xml':

    <openerp>
        <data>  

            <template id="assets_common" name="your_module_name assets" inherit_id="web.assets_common">  
                <xpath expr="." position="inside">  
                    <link rel='stylesheet' href="/your_module_name/static/src/css/your_file.css"/>  
                    <script type="text/javascript" src="/your_module_name/static/src/js/your_file.js"></script>  
                </xpath>  
            </template>  
  
        </data>  
     </openerp>