OpenERP 6.1’s web client comes with a cleaner Javascript framework which features some hook mechanism to simplify customization. In the mean time, I still have to work on older OpenERP 6.0 for customers who haven’t migrated yet. So let me present you a tiny collection of ugly (but working) Javascript hacks I use to customize some aspects of the user interface.

First, you have to learn how to inject Javascript code in the web client. My method is described in details in an article on how-to monkey-patch OpenERP’s native Javascript . Please read the later to understand how my hacks are supposed to work.

That being said, let’s start with this simple snippet that will let you force the focus on a particular field, which is great to speed-up user data input on some complicated forms:

$('#my_field_id').focus();

Once, in an heavily customized form, I had to simulate a click on a custom button each time a user would press the ++enter++ key, hence simulating a form submission. This can be done with the following code:

$("input").keydown(function(e) {
    if (e.keyCode === 13) {
        $("#my_custom_button_id").trigger('click');
    };
});

In another case of a highly customized view, I had to change the behavior of a attrs="{'invisible': [('my_column_id', '=', True)]}" directive, which make, by default, the targeted field invisible by using a display: none; CSS statement. I wanted the attrs to use the visibility: hidden; CSS instead, to let my field occupy its rendering area and not break the layout. Here is how I managed to take control of the default behavior:

// Monkey-patch form_setVisible from addons/openerp/static/javascript/form_state.js
var original_setVisible = form_setVisible;
form_setVisible = function(container, field, visible) {
    original_setVisible(container, field, visible);
    // Revert OpenERP's invisible attribute default behaviour by removing the "display: none;" it has just set,
    // then replace it by a "visibility: hidden;" statement to let our "*template_id_*" fields keeps their rendering area.
    $("td.item-group[attrs*='template_id_']:hidden").show().css('visibility', 'hidden');
};

Here is the view type selector widget, which is appearing everywhere in OpenERP in the top-right corner:

To hide it, running the following jQuery is enough:

$('#view-selector').hide();

Here are the action buttons and the object navigation pager:

If you want to hide the whole thing, then the following code will do:

$('.wrapper.action-buttons').hide();

If you’re only interested to hide the pager, use:

$(".wrapper .pager").hide();

And if you want to hide all action buttons but the “Save and Edit” one, the Javascript code is:

$(".wrapper.action-buttons li a:not([onclick*='save_and_edit'])").hide();

For the last set of hacks, there is a better way to act on each action button’s visibility. You can use the smile_buttons_access module which was created by my co-workers from Smile . This web add-on will by default make the “create”, “edit” and “delete” buttons sensible to the “create”, “write” and “unlink” rights of the current user. But this module will let you pass some variables in the context to hide each one of these buttons independently.