Static Assets
Managing static assets when it comes to Odoo is not as simple. As we know, it has
extensive applications and code bases. Different apps in Odoo have specific purposes and
have different user interactions. So the assets in Odoo are not as simple or as simple
as any other application. For example, the needs of a web client, website, POS, or
mobile app are different. Also, some items may be large but rarely needed: In this case,
we might want them to be loaded lazily (if necessary). Loading large unwanted static
assets is unhealthy, and we may have to load them as needed. To avoid this example in
Odoo, we use different asset batches for various code bases.
Managing static assets:
Modern websites contain dozens of JavaScript and CSS files. When a page is uploaded to a
browser, these static files make requests to the server. A large number of requests
slows the website. Many websites offer static assets by combining multiple files to
avoid this problem. There are many tools to manage these types of items, but Odoo has
its own way of managing static assets.
Asset types:
In Odoo, There are three different types of assets that are script (JavaScript files),
style (CSS or SCSS files), and templates (XML files).
1.Script (JavaScipt files)
Odoo supports three different sorts of javascript files, and every one of them is
bundled together and served to the browser. Differing types of javascript files
supported in Odoo are plain javascript files, native javascript modules, and the
Odoo modules. During this plain javascript, files are reserved just for external
libraries and also for specific forms of low-level purposes. All the newly created
javascript files should be created within the native javascript module system. Odoo
modules are the custom module system of these javascript files are processed and
minified if they're not in asset debug mode and at last concatenated. Finally, the
results are stored as an attachment. Usually, these attachments are loaded into the
static file using the <script> tag in the <head > tag of the page.
2. Style (CSS or SCC files)
Styling can be done using CSS or SCSS files. Style files are processed in the same
way as JavaScript files and then minified and integrated. (the debug mode if not in
the debug=asset mode). SCSS files are converted to CSS. Then the files are saved as
attachments and are loaded using the <link> tag in the <head> tag.
3. Template (XML files-Qweb)
Templates are static XML files. They're visiting to be read-only once they're needed
and eventually concatenated, a small amount just like the javascript and elegance
files. Each time the browser loads Odoo, it calls the /web/WebClient/qweb/
controller to retrieve the templates.
QWeb is the first templating engine utilized by Odoo. It's an XML templating engine
and is used mostly to urge HTML fragments and pages. Template instructions are
defined as prefixed XML attributes of t, for example t-if for conditions that render
components and other attributes directly.
It is helpful to note that in most cases, the browser only performs a request when
loading the page for the first time. This is because each of these assets is linked to a
checklist included in the source of the page. It then adds a checksum to the URL, which
means that the cache headers can be safely set for a longer period of time.
Bundles
Odoo assets are grouped by bundles and every bundle could be a list of various file paths
of specific type assets like XML, JS, CSS, or SCSS. The bundles are listed within the
Odoo module's manifest files. As these files are using the global syntax, we will
declare different files of assets during a single line. While adding the bundles within
the modules __manifest__ file, a key asset containing a dictionary is devoted. The
important thing in different dictionaries is the names and values of the secret bundle
and the list of files that contain them.It looks like this:
'assets': {
'web.assets_common': [
'web/static/lib/bootstrap/**/*',
'web/static/src/js/boot.js',
'web/static/src/js/webclient.js',
],
'web.assets_backend': [
'web/static/src/xml/**/*',
],
'web.assets_frontend: [
'web/static/src/scss/style.scss,
'web/static/src/js/custom.js',
],
'web.assets_qweb: [
'web/static/src/xml/templates.xml',
],
'web.qunit_suite_tests': [
'web/static/src/js/webclient_tests.js',
],
'web.qunit_mobile_suite_tests: [
'web/static/tests/mock_tests.js',
],
},
1.web.assets_common
This bundle contains most of the common assets in the web client, website and point of
sale. It includes a boot.js file, which describes the odoo module system. Also, this can
be the bundle that containing low-level building blocks that are useful for the Odoo
framework.
2.web.assets_backend
This is the bundle that contains the code specific to the action manager/web client or
the views, i.e., basically for web clients
3.web.assets_frontend
This one is for a public website like eCommerce, portal, forum, blog, etc
4. web.assets_qweb
All static XML templates are used in the backend environment and in the point of sale.
5. web.qunit_suite_tests
All javascript qunit testing code for tests, helpers, and mocks.
6. web.qunit_mobile_suite_tests
Bundle for mobile-specific qunit testing code
Operations
Generally, Managing assets using assets_common or assets_backend is very easy. But other
operations are available to cover certain special use cases. They are given below:
- append
The append operation is used to add one or more files to the end of the bundle. This
is the most commonly used operation, and you can do this with the file name like
'web.assets_common': [
'module_name/static/src/js/file_name.js',
],
prepend
The prepend operation is used to add one or more files at the beginning of the
bundle. It is useful when adding a particular file before other files in the bundle.
It can be done with the following syntax: ('prepend', <path>). Eg,
'web.assets_common': [
('prepend', 'module_name/static/src/css/file_name.scss'),
],
before
The before operation is used to add one or multiple files before a specific file.
Creating a file at the beginning of a bundle may not be accurate enough. It can be
used to add the given files before the target file. It can be done with the
following syntax: ('before', <target>, <path>).
Eg,
'web.assets_common': [
('before', 'web/static/src/css/bootstrap_overridden.scss', 'module_name/static/src/css/file_name.scss'),
],
after
The after add one or multiple files after a specific file. Same as before, but it
adds up after the target file. It is declared by the following syntax:('after',
<target>, <path>).
Eg,
'web.assets_common': [
('after', 'web/static/src/css/list_view.scss', 'module_name/static/src/css/file_name.scss'),
],
include
Use nested bundles. The include directive could be a thanks to use a bundle in other
bundles to attenuate the dimensions of your manifest.Syntax: ('include',
<bundle>).
Eg,
'web.assets_common': [
('include', 'web._primary_variables'),
],
remove
In some cases, you may want to delete one or more files from the bundle. This can be
done using the remove operation. Syntax: ('remove', <target>)
Eg,
'web.assets_common': [
('remove', 'web/static/src/js/boot.js'),
],
replace
You want to delete an asset but also add a new version of that asset in the same
position. This can be done using the replace directive.Syntax: ('replace',
<target>, <path>)
Eg,
'web.assets_common': [
('replace', 'web/static/src/js/boot.js', 'module_name/static/src/js/boot.js'),
],