Integrating Dynatree into OpenERP

par Christophe Combelles, mis à jour le 16/03/2013


Dynatree is a jQuery plugin that allows to dynamically create tree view controls using JavaScript. It basically looks like this and is extremely flexible and powerful :

OpenERP is full of tree-like structures, such as accounts, categories, companies, or any other object with a parent field. And we have a customer with a bike shop who needed to quickly select a product sub-category without having to remember the name of the category. The dynatree was a perfect candidate for an OpenERP integration because we now feel comfortable with the development techniques in the new web client.

Our first goal was to create a search widget for the 6.1 client. It basically looks like a text search widget, except that you will notice the small triangle at the left:

When you click on this small triangle, the dynatree opens, and let you select your choice :

Source code

The module is available here :

You will notice that we currently have two branches, one for 6.1 and one for 7.0, as we're integrating this module in a newer project for which we need to select multiple analytic accounts in different analytic trees, and dynamically see the result as we select leafs or nodes in the trees.

How to use it

This dynatree plugin is already integrated in our hierarchical project management tool Anytracker. You can see below as an example how simple it is to enable it for a search field :

    <field name="parent_id" widget="dynatree_selection"
           options='{"child_field": "child_ids"}'

You just have to add the "widget" XML attribute, and optionally specify the name of the child field with the "options" attribute.

What's next ?

We already created a many2one widget using this dynatree plugin, and we plan to create a tree view as well, if technically possible. We may also support other features of dynatree, such as partial selections, etc.

Here is a sample of the dynatree many2one widget on OpenERP 7 :