Chapter 10 - Odoo 15 Development Book

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'),
    ],
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message