Add CSS and Javascript files to Odoo module
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__.pyfile.):...
'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>
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. |
Contributors
Topic Id: 3401
Example Ids: 11705,11706,11707,11708
This site is not affiliated with any of the contributors.