QWeb is a template engine used by Odoo. It is XML-based and is used to generate HTML fragments and pages. QWeb was first introduced in version 7.0 to enable richer kanban views and, since version 8.0, is also used for report design and CMS website pages.
Here you will learn about the QWeb syntax and how to use it to create your own kanban views and custom reports. Let's get started by learning more about kanban boards.
Kanban is a Japanese word used to represent a work queue management method. It takes inspiration from the Toyota Production System and Lean Manufacturing. It has become popular in the software industry with the adoption of Agile methodologies.
The kanban board is a tool to visualize the work queue. The board is organized in columns representing the stages of the work process. Work items are represented by cards placed on the appropriate column of the board. New work items start from the leftmost column and travel through the board until they reach the rightmost column, representing completed work.
The simplicity and visual impact of kanban boards make them excellent to support simple business processes. A basic example of a kanban board can have three columns, as shown in the following image: To Do, Doing, and Done.
It can, of course, be extended to whatever specific process steps we may need:
Photo credits: "A Scrum board suggesting to use kanban" by Jeff.lasovski. Courtesy of Wikipedia.
For many business use cases, a kanban board can be a more effective way to manage the corresponding process than the typically heavier workflow engine. Odoo supports kanban board views, along with the classic list and form views. This makes it easy to implement this type of view. Let's learn how to use them.
In form views, we use mostly specific XML elements, such as <field> and <group>, and few HTML elements, such as <h1> or <div>. With kanban views, it's quite the opposite; they are HTML-based templates and support only two Odoo-specific elements, <field> and <button>.
The HTML is dynamically generated using QWeb templates. The QWeb engine processes special XML tags and attributes to produce the final HTML to be presented in the web client. This brings a lot of control over how to render the content but also makes view design more complex.
The kanban view design is quite flexible, so we'll do our best to prescribe a straightforward way for you to quickly build your kanban views. A good approach is to find an existing kanban view similar to what you need, and inspect it to for ideas on how to build yours.
We can see two different ways to use kanban views. One is a card list. It is used in places like contacts, products, employee directories or apps.
Here is how the Contacts kanban view looks:
But this is not a true kanban board. A kanban board is expected to have the cards organized in columns, and of course, the kanban view also supports that layout. We can see examples in the Sales | My Pipeline or in Project Tasks.
Here is how the Sales | My Pipeline looks:
The most striking difference between the two is the kanban board column organization of the cards. This is achieved by the Group By feature, similar to what the list views provide. Usually, the grouping is done on a stage field. One very useful feature of kanban views is that it supports drag and dropping cards between columns, automatically assigning the corresponding value to the field the view is grouped by.
Looking at the cards in both examples, we can see some differences. In fact, their design is quite flexible, and there is not a single way to design a kanban card. But these two examples can provide a starting point for your designs.
The Contact cards basically have an image at the left-hand side, and a bold title in the main area, followed by a list of values. The My Pipeline cards have a bit more structure. The main card area also has a title followed by a list of relevant information as well as a footer area, in this case with a priority widget on the left-hand side, and the responsible user at the right-hand side. It is not visible in the image, but the cards also have an options menu at the top-right, shown when hovering the mouse pointer over it. This menu allows, for example, to change the background color of the card.
We will be using this more elaborate structure as a model for the cards on our Todo kanban board.