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 with version 8.0, is also used for report generation 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.
To understand kanban boards, kanban is a word of Japanese origin that is used to represent a work queue management method. It takes inspiration from the Toyota Production System and Lean Manufacturing, and has become popular in the software industry with its adoption in Agile methodologies.
The kanban board is a tool to visualize the work queue. Work items are represented by cards that are organized in columns representing the stages of the work process. New work items start on the left-most column and travel through the board until they reach the right-most column, representing completed work.
The simplicity and visual impact of kanban board 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," but it can of course be extended to whatever specific process steps we may need:
Photo credits: A Scrum board suggesting using kanban by Jeff.lasovski. Courtesy of Wikipedia.
Kanban views are a distinctive Odoo feature, making it easy to implement these boards. 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 can be dynamically generated using the QWeb template engine. It processes special tag attributes in HTML elements to produce the final HTML to be presented in the web client. This brings a lot of control on how to render the content, but also make view design a more complex.
Kanban views are so flexible that there can be many different ways to design them, and it can be hard to provide a recipe to follow. A good rule of thumb is to find an existing kanban view similar to what we want to achieve, and create our new kanban view work based on it.
Looking at the kanban views used in the standard modules, it's possible to identify two main kanban view styles: vignette and card kanbans.
Examples of vignette style kanban views can be found for Customers, Products, and also Apps & Modules. They usually have no border and are decorated with an image on the left-hand side, as shown in the following image:
The card style kanban is usually used to display cards organized in columns for the process stages. Examples are CRM Opportunities and Project Tasks. The main content is displayed in the card top area and additional information can be displayed in the bottom-right and bottom-left areas, as shown in the following image:
We will see the skeleton and typical elements used in both styles of views so that you can feel comfortable adapting them to your particular use cases.