DEV Community: ixkit

good👍

ixkit — Wed, 30 Apr 2025 06:07:03 +0000

Treekon Ventures

Mar 30 '25

Streamlined Odoo 18 Development with Docker Compose: A Developer's Guide

#odoo #webdev #programming #beginners

Comments

3 min read

A hook solution to spy the Odoo web page 🕵️

ixkit — Sat, 13 Apr 2024 07:30:15 +0000

Help you insight into the rendering Templates of the Odoo web page,light up the template snippets,speed up development process🚀

How does Odoo rendering a web page

Odoo is an Open source ERP software, also an rapid development web application framework, the Odoo main tech stack includes Python module and JavaScript framework, we think that two type rendering technique was used: QWeb and OWL.
👉 QWeb

QWeb is the primary templating engine used by Odoo. It is an XML templating engine1 and used mostly to generate HTML fragments and pages.
Odoo HTTP layer base on python WSGI, the web page render on server side, most like other language solution, eg PHP echo or JSP that allows dynamic content injection into static contents, the static contents call "Template", a pice template code like bellows:

<template id="login_layout" inherit_id="web.login_layout" name="Website Login Layout" priority="20">
    <xpath expr="t" position="replace">
        <t t-call="website.layout">
            <div class="oe_website_login_container" t-out="0"/>
        </t>
    </xpath>
</template>

above code mixed two type scripts: xml + html, it define the page layout of the login page which use for end user from web browser, eg while user try to login the odoo application from the link 'http://localhost:8120/web/login', the ir_qweb.py duty to render the path page, the web page show bellow screen snapshot

We know that the page was rendering by many different template snippets, the page HTML elements was generated by a couple of QWeb templates, "t-call" or "inherit_id" , such operation primitive organize many different location template script into one big virtual template page that will be process by QWeb engine, top-level rendering probably contains many sub-templates that is spread out in different xml file, it is not easy to trace or debug or modify.

Limited the QWeb Templates syntax rule, it does not contains meta information like template location(path), the templating engine also does not provide feature to trace each template location(path) in an rendering session, this is a big(maybe not :D) question for developer.

👉 OWL

The official definition: OWL, A web framework for structured, dynamic and maintainable applications. it also use QWeb template as layout vector to rendering the web page, the problem still exist, if a web page includes many different Owl components, it is not easy to get the component template location on the disk, why we need know the location (path), because we need modify it or review the rendering logic as well.

🔥Shortcoming of template rendering engine
if the page is complex that use variant templates, then it is hard to know current web page component, we need insight the page structure, We often offer lot of time to find the template snippets code on disk, why we need waste time to search by keyword or memory, it must be another way to easy locate the template from web page directly, just one click⚡️

Solution 🔨

so far, we only provide a hook solution to append the meta data (especially the location/path information) of the template while Odoo rendering the web page.

👉 QWeb
the ir_qweb.py file duty rendering the QWeb template in Python part, the official code comment bellows:

```.. code-block:: rst

Odoo
 ┗━► _render (returns MarkupSafe)
    ┗━► _compile (returns function)                                        ◄━━━━━━━━━━┓
       ┗━► _compile_node (returns code string array)                       ◄━━━━━━━━┓ ┃
          ┃  (skip the current node if found t-qweb-skip)                           ┃ ┃
          ┃  (add technical directives: t-tag-open, t-tag-close, t-inner-content)   ┃ ┃
          ┃                                                                         ┃ ┃
          ┣━► _directives_eval_order (defined directive order)                      ┃ ┃
          ┣━► _compile_directives (loop)    Consume all remaining directives ◄━━━┓  ┃ ┃
          ┃  ┃                              (e.g.: to change the indentation)    ┃  ┃ ┃
          ┃  ┣━► _compile_directive                                              ┃  ┃ ┃
          ┃  ┃    ┗━► t-nocache       ━━► _compile_directive_nocache            ━┫  ┃ ┃
          ┃  ┃    ┗━► t-cache         ━━► _compile_directive_cache              ━┫  ┃ ┃
          ┃  ┃    ┗━► t-groups        ━━► _compile_directive_groups             ━┫  ┃ ┃
          ┃  ┃    ┗━► t-foreach       ━━► _compile_directive_foreach            ━┫  ┃ ┃
          ┃  ┃    ┗━► t-if            ━━► _compile_directive_if                 ━┛  ┃ ┃
          ┃  ┃    ┗━► t-inner-content ━━► _compile_directive_inner_content ◄━━━━━┓ ━┛ ┃
          ┃  ┃    ┗━► t-options       ━━► _compile_directive_options             ┃    ┃
          ┃  ┃    ┗━► t-set           ━━► _compile_directive_set           ◄━━┓  ┃    ┃
          ┃  ┃    ┗━► t-call          ━━► _compile_directive_call            ━┛ ━┫ ━━━┛
          ┃  ┃    ┗━► t-att           ━━► _compile_directive_att                 ┃
          ┃  ┃    ┗━► t-tag-open      ━━► _compile_directive_open          ◄━━┓  ┃
          ┃  ┃    ┗━► t-tag-close     ━━► _compile_directive_close         ◄━━┫  ┃
          ┃  ┃    ┗━► t-out           ━━► _compile_directive_out             ━┛ ━┫ ◄━━┓
          ┃  ┃    ┗━► t-field         ━━► _compile_directive_field               ┃   ━┫
          ┃  ┃    ┗━► t-esc           ━━► _compile_directive_esc                 ┃   ━┛
          ┃  ┃    ┗━► t-*             ━━► ...                                    ┃
          ┃  ┃                                                                   ┃
          ┗━━┻━► _compile_static_node                                           ━┛```

I like the comment, it is great, , so maybe we can do something according the guide :-)
the class IrQWeb duty to parse the template and rendering data to HTML, the method _load(self, ref) use to read/load template code, so what we do just append the template location/path information to the original template in the method _load().

let use a example to demo the key steps:
A template 'brand_promotion' that use to display the odoo brand on Home web page, the code bellows:

<template id="brand_promotion" name="Brand Promotion">
        <div class="o_brand_promotion">
            <t t-call="web.brand_promotion_message">
                <t t-set="_message"></t>
                <t t-set="_utm_medium" t-valuef="portal"/>
            </t>
        </div>
    </template>

the template rendering effect on web page screen snapshot as bellow:

the template 'brand_promotion' snippets rendering effect on the whole web page :

We want it can be spy or self explained meta information like tooltip, Odoo also provide the developer mode for debug, it can display some button or web component, but the tooltip information is limited even helpless, let's make it more prefect 🔨

Our solution is append new element spy div wrap the original element, the new element div duty attach the template meta information that can be use for tooltip view.

the result of the html snippets most like bellows:

<div
  id="spy->web.brand_promotion"
  data-tooltip-template="spy.TooltipView"
  data-spy="qweb"
  data-tooltip-info=
        '{ 
            "debug": true,
            "class": "ir.ui.view",
            "view": { 
                "id": 183,
                "name": "Brand Promotion",
                "model": false,
                "key": "web.brand_promotion",
                "type": "qweb",
                "mode": "primary",
                "arch_fs": "web/views/webclient_templates.xml",
                "children_views": [ {
                    "id": 507, "name": "Brand Promotion", "model": false, "key": "website.brand_promotion", "type": "qweb", "mode": "extension", "arch_fs": "website/views/website_templates.xml"
                } 
                ],
                "template_code": "<t name=&amp;?quoteBrand Promotion&amp;?quote t-name=&amp;?quoteweb.brand_promotion&amp;?quote>\n        <div class=&amp;?quoteo_brand_promotion&amp;?quote>\n            <t t-call=&amp;?quoteweb.brand_promotion_message&amp;?quote>\n            <t t-set=&amp;?quote_message&amp;?quote>\n                Create a <a target=&amp;?quote_blank&amp;?quote href=&amp;?quotehttp://www.odoo.com/app/website?utm_source=db&amp;amp;utm_medium=website&amp;?quote>free website</a>\n            </t>\n            <t t-set=&amp;?quote_utm_medium&amp;?quote t-valuef=&amp;?quotewebsite&amp;?quote/>\n        </t>\n    </div>\n    </t>"
            }
          }' 

>
  <div class="o_brand_promotion">
     ... original html code ...
  </div>
</div>

let's see the last render effect while appended the meta tooltip view, it show popover tip view while mouse focus the element on web page bellows:

aha, that is what we want, while mouse moveover the brand element, a tooltip view popup, it disply key meta information of the source template of the element: template name, location(arch_fs) etc, we can insight the web page now! the page element is self-explanatory, especial show the location/path information, it should very helpful for debug or extends while developing application base the Odoo framework.

👉 OWL

The frontend web page of the Odoo backend (no webiste module) based on OWL framework, the code 'addons/web/static/lib/owl/owl.js' is the core logic set, the class 'TemplateSet' also 'App' which duty to parse the template script and generate the dom object in web browser side, the method '_compileTemplate' of the class 'TemplateSet' duty to process the template, we can hook the method for our purpose: append meta information on the template snippets.

the effect bellows:

it works good as expectation ✅

if you like it you can find it from the Odoo Appstore

Enjoy & Happy Coding! ☺︎

How to customize the left side menu icon of the Odoo Settings page view

ixkit — Sat, 16 Mar 2024 16:20:57 +0000

Problem or unprovided features:
The native Odoo community version 16 provide a unify Settings page view for addons modules, some time we want customize the left side menu item icon in the view, but it is not easy todo since the native code not provide relative interface yet. check issue: allow dynamic icon setting on configuration views
- #odoo Odoo 16 implement the Setting panel/form use compiler solution, accurate source code file is : ./addons/web/static/src/webclient/settings_form_view/settings_form_compiler.js
- the key step function code bellows:

      function getAppIconUrl(module) {

          return module === "general_settings"
              ? "/base/static/description/settings.png"
              : "/" + module + "/static/description/icon.png";
      }

the code above hard code that seem can not be customized and extends unless modify the original js code directly ❓❓❓

Solution
- brief:
- in this article we show a solution that inject new logic code into exist original code make the Setting view menu icons can be customized 🔨
- original logic workflow :
  - while odoo frontend init (load web html page), workflow will add settings_form_view to registry.category("views") with key 'base_settings',
  - the 'base_settings' use to render the Setting_page view .
  - entry js file: addons/web/static/src/webclient/settings_form_view/settings_form_view.js
  - it declare const value 'settingsFormView' which collect MVC classes for render Settings page .
```
          export const settingsFormView = {
            ...
              Model: SettingsRelationalModel,
              ControlPanel: ControlPanel,
              Controller: SettingsFormController,
            Compiler: SettingsFormCompiler, // <--- this class is key point
            Renderer: SettingsFormRenderer,
          }
          registry.category("views").add("base_settings", settingsFormView);
```
- the class SettingsFormCompiler contains a property 'compilers' which is array that keep all relative compilers,
- the setting tab area (which contains the left side module menus ) was generate by the function compileSettingsPage(el, params) , so then what we can do is replace the exist inner function logic ~

steps:

1💡 find the exist settingsFormView.

since the settingsFormView was register in category 'views', the category is inherit from EventBus, EventBus mechanism is Observer pattern that can use to listener 'UPDATE' event while a view class was add into current runtime session, so hook code bellows:

          const viewRegistry = registry.category("views");

          viewRegistry.on("UPDATE", null, function (...args) {
              console.log(...args);
              const {operation,key,value} = args[0];

              if (operation === 'add' && 'base_settings' === key){ 
                  console.log('⚒️  inject base_settings, key?, value?', key, value); 
                  on_hook(value);
              }

          });

          function on_hook(settingsFormView){ 
              console.log('⚒️ onHook',settingsFormView)
          }

start running the frontend code ( launcher Odoo python server, open web browser, navigate to odoo http entry point ), we use console check the log.
the console logout the class view 'settingsFormView' , most like bellows:

you see that is easy to intercept any view class that was defined base on owl framework❗️ ✅
the settingsFormView use to render the setting page in Odoo, the attribute 'Compiler' is the class 'SettingsFormCompiler' ('defined in file: settings_form_compiler.js')

now we got the target : settingsFormView, next step 🔨 it, we need redefine the attribute 'Compiler' of the value settingsFormView with new class SetingCustomizeAbleCompiler

              function on_hook(settingsFormView){ 
                  console.log('⚒️ onHook',settingsFormView)
                  const settingsFormCompiler = settingsFormView.Compiler;

                  if (settingsFormCompiler){
                      settingsFormView.Compiler = SetingCustomizeAbleCompiler;
                      return ;
                  } 
              }

2💡 override class SettingsFormCompiler apply with new log - We declare new class CustomizeAbleSettingsFormCompiler bellows

              class CustomizeAbleSettingsFormCompiler extends SettingsFormCompiler {

                  setup() {
                      super.setup(); 
                      console.debug('inherited, this?',  this);

                      const list = this.compilers;
                      for (let index = 0; index < list.length; index++) {
                          const item = list[index];
                          //match to:  { selector: "div.settings", fn: compileSettingsPage },
                          if (item.selector === "div.settings"){ 
                              const original_hanlder = item.fn;
                              item.fn = compileSettingsPage; // assgin with new logic handler ~
                          }
                      }
                  }
              }

notice above code, we only need hack the selector 'div.settings' , because the routine duty to generate the 'settings_tab' view that render the left side menu area, the function compileSettingsPage should be copy from original source code.
key step to make the menu icon can be configuration :

```
          //@ modify logic here 
          function getAppIconUrl(module) {
              console.log('⚒️ getAppIconUrl, module?', module)
              // apply new logic 
              let value = getMenuIcon(module);
              if (value) {
                  return value;
              }
              // continue old logic
              return module === "general_settings"
                  ? "/base/static/description/settings.png"
                  : "/" + module + "/static/description/icon.png";
          }

          function getMenuIcon(name){
            if (name === 'purchase'){
                return '/myModule/static/src/icon/purchase.png'
              }
                if (name === 'stock'){
                return '/myModule/static/src/icon/stock.png'
              }  
              // add more configuration here 

              return null;
          }
```

3💡 finally run see the update
- if lucky then the left side menu icon was updated as expectation:
-
Conclusion
- Odoo offered a great data driver framework for ERP system, that is rapid development even low code solution, in this article we give a tips for customize the SettingView, the idea also can apply to other even whole page view in frontend development of owl.
- Hope this is helpful, if you have more better idea or suggestion, feel free leave comment or contact with us .

Happy coding and fun 👏