How to Manage Asset Bundles in Odoo 16
In Odoo, we have different kinds of assets. Managing all of these assets is not easy. Usually, we do not need to use all of these assets. We only need to load each static asset according to our needs. In Odoo, we use different asset bundles based on the different codes.
We have three distinct asset types in Odoo. They are :
1 - code
2 - style
3 - templates
Code
It specifies the JS files in Odoo. In Odoo, we have three different types of javascript files. They are plain javascript files, native javascript modules, and finally Odoo modules. Plain JavaScript does not have a module system. They contain arbitrary content. These files prevent the leakage of local variables to the global scope. Native Javascript modules are used in most new Odoo javascript modules. Comparatively, native JavaScript is more straightforward. Also, it brings a better developer experience. Odoo modules is a defined small module system. When we process all the files, the native javascript file will be transformed into Odoo modules. Once the processing is completed, all files will be concatenated. Before the concatenation, if the debug is not in asset mode, then it will be minified. After all of these, the final results will be stored as file attachments. In normal cases, all these attachments are loaded in a static file using the <head> tag of the page using the <script> tag.
Style
In Odoo, we can do styling using either CSS or SCSS. As we discussed in javascript files, these style files are also processed, minified, and finally concatenated. During the time of processing, the SCSS files will be converted to CSS files. And the minified is happen only if the debug is not in asset mode. After all of these, the style file is also saved as an attachment file. And these files are loaded in the <link> tag of the <head> tag of the page.
Templates
Static XML files are the templates. In Odoo, they are manipulated in a different method. These XML files are read-only whenever they are needed and concatenated like javascript and style files. It calls the controller ‘/web/WebClient/qweb/’ to get the templates whenever the browser loads Odoo.
Bundles
In Odoo, Bundles are defined as groups of assets. We can define bundles as a list, that contains the file path of different assets. That is the path of XML, CSS or SCSS, and Javascript. We can list these bundles in the __manifest__.py file of the module. If we use globe syntax to declare the files, we can use a single line to declare several assets.
When we define the asset bundles in the manifest file of a module, they are specified with an asset key, which includes a dictionary. Each dictionary has a key representing the name and values as a list of files.
For example:
'assets': {
'mail.assets_messaging': [
'hr/static/src/models/*.js',
],
'web.assets_backend': [
'hr/static/src/views/**/*.js',
'hr/static/src/components/**/*',
'hr/static/src/user_menu/*.js',
'hr/static/src/scss/hr.scss',
'hr/static/src/js/m2x_avatar_employee.js',
'hr/static/src/js/standalone_m2o_avatar_employee.js',
'hr/static/src/js/work_permit_upload.js',
'hr/static/src/xml/*.xml',
],
'web.qunit_suite_tests': [
'hr/static/tests/helpers/*.js',
'hr/static/tests/m2x_avatar_employee_tests.js',
'hr/static/tests/m2x_avatar_employee_legacy_tests.js',
'hr/static/tests/standalone_m2o_avatar_employee_tests.js',
],
'web.assets_tests': [
'hr/static/tests/tours/hr_employee_flow.js',
],
},There are some important bundles in Odoo that we must know. They are
1. web.assets_backend: This bundle is specifically for the web client, views, and action manager. That means for the web clients. Also, it includes all the static XML templates for the backend.
2. web.assets_frontend: This bundle is used explicitly for eCommerce,blogs, etc., mainly for public websites.
3. web.assets_common: Low-level building blocks that are useful for the Odoo framework are usually included in these bundles. These bundles are used for web clients, point of sale, and websites. boot.js files that are used for defines the Odoo module system are also included in this bundle.
4. web.qunit_suite_tests: These bundles are specified for all javascript qunit testing codes.
5. web.qunit_mobile_suite_tests: These bundles are used for mobile-specified qunit testing code.
There is another asset bundle that we used in Odoo 15. It is the web.asset_qweb mainly includes all the static XML templates used in the backend environment and in point of sale. In Odoo 16, we do not use this asset bundle. Instead, we include this type of static XML template in the web.asset_backend, web.asset_frontend, and point of sale based on their uses.
Operations
It is easy to handle the asset bundles by using assets_common or using asset_backend. But sometimes, we need to use other operations. They are append, prepend, before, after, include, remove, and replace. All of these operations are similar to Odoo 15.