How to customize the OpenERP 6.1 WebClient HTML DOM?

Question

The page of OpenERP web client can get really wide with many columns in a list view. On short screens, this is a trouble as the centered menu runs out of reach to the right with the content. I decided to find a quick fix for this: Make the menu align to left. With normal websites, this would be a piece of cake with standard JQuery, but this OpenERP web thing is pretty much completely generated in JS!

The generated HTML has the following structure for the menu:

<div class="menu" id="oe_menu">
  <table align="left">
    <tbody>
      <tr>
        <td>
          <a href="#" data-menu="3">
            Settings
          </a>
        </td>
        <!--other menus...-->
      </tr>
    </tbody>
  </table>
</div>

The way to go with JQuery is (tested in JS console):

$('div.menu table[align=center]').attr('align','left');

Though the usual $(document).ready() will fail because the time the DOM is loaded is only the initialization of the OpenERP web client.

My requirement is that this needs to be managed from a module. Simahawk got his answer for a similar topic - hooking into the logout event which pointed me in the right direction, but did not fix my task.

Robert Cutajar Robert Cutajar · Accepted Answer · 2012-07-02T20:50:33

I found and modified a piece of code from the web_livechat module which finally worked. My module is called camara and that is important, because the new method of the openerp object must be called after your module - static/src/js/tweaks.js:

// openerp.camara(openerp) is executed when the module is loaded - UI is not rendered yet!

openerp.camara = function(openerp) {

    // so we hook into (override) the Header do_update() call 
    // which is executed upon session validation by the WebClient
    // we have to call the overriden parent method
    // then we hook onto the update_promise 
    // which executes our code after the update is done.

    openerp.web.Header.include({
        do_update: function() {
        var self = this;
        this._super();
        this.update_promise.then(function() {
            // change menu alignment to the left
            // because with wide views, it runs out of reach
            $('div.menu table[align=center]').attr('align','left')
        });
        }
    });

}

The js file needs to be included in the __openerp__.py:

'js': ["static/src/js/tweaks.js"]

Questions remaining:

Do you like this and find it an appropriate approach?
If not, please offer other solutions.

I myself find this rather clumsy, that's why I ask. I thought of using CSS but did not manage to override the table's align attribute.

How to customize the OpenERP 6.1 WebClient HTML DOM?

1 Answers