Chapter 11: Kanban Views and Client-Side QWeb

Kanban views support lean processes, providing a visual representation of the work in progress and the status of each work item. This can be an important tool to streamline business processes.

This chapter introduces kanban board concepts, and how they are implemented in Odoo by using the kanban view type, stage columns, and kanban states.

Kanban views are powered by QWeb – the template engine used by Odoo. It is XML-based and used to generate HTML fragments and pages. It is also used for reports and website pages, so it is an important part of Odoo that developers should be familiar with.

In this chapter, we will show how to organize a kanban view in several areas, such as the title and main content, as well as how to use the QWeb syntax to apply the widgets and effects that are available.

The QWeb template language will be described in detail to provide a complete understanding of its features.

The later sections...

Technical requirements

This chapter continues enhancing the library_checkout addon module from Chapter 10, Backend Views – Designing the User Interface. The corresponding code can be found in the ch11/ directory of the GitHub repository at https://github.com/PacktPublishing/Odoo-15-Development-Essentials.

Introducing kanban boards

Kanban is a Japanese word literally meaning billboard and is associated with lean manufacturing. More recently, kanban boards have become popular in the software industry with the adoption of agile methodologies.

A kanban board provides a visual representation of a work queue. The board is organized into columns, which represent 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, which represents the completed work.

The simplicity and visual impact of kanban boards make them a good tool to support simple business processes. A basic example of a kanban board has three columns: To Do, Doing, and Done, as shown in the following diagram:

`

Figure 11.1 – An example of a kanban board

In many cases, a kanban board is a more effective way to manage a...

Designing kanban views

The book checkout process can use a kanban view to visualize the work in progress. In this case, the kanban board columns could represent the checkout stages, and each checkout could be represented by a card.

This is what the library checkout kanban view will look like when complete:

Figure 11.5 – Library checkouts kanban view

Form views mostly use Odoo-specific XML elements such as <field> and <group>. They also use some HTML elements such as <h1> or <div>, but their use is limited. Kanban views are quite the opposite. They are HTML-based and additionally support two Odoo-specific elements: <field> and <button>.

With kanban views, the final HTML presented in the web client is dynamically generated from QWeb templates. The QWeb engine processes special XML tags and attributes in the templates to produce the final HTML. This allows a lot of control of how the content is rendered, but it...

Designing kanban cards

The design of a kanban card is quite flexible and uses HTML that is produced from QWeb templates declared in the <templates> element.

The content area will often feature several other areas. Using the CRM Pipeline as a blueprint, the following sections can be found:

• A title section, with the lead short summary
• A content section, with the amount, customer name, and lead tags
• A left footer section, with the priority and activities widgets
• A right footer section, with the salesperson avatar
• A top-right menu button, which in this case, is visible on mouse hover

This section implements the previous kanban card structure, and it populates each section to showcase the most important features. The first step for designing kanban cards is to lay out the kanban card skeleton, which is described next.

Note

The proposed kanban skeleton, as well as certain CSS classes used, is based on the CRM Pipeline kanban view. Odoo modules...

Exploring the QWeb template language

The QWeb parser looks for special directives in the templates and replaces them with dynamically generated HTML. These directives are XML element attributes and can be used in any valid tag or element – for example, <div>, <span>, or <field>.

Sometimes, a QWeb directive needs to be used, but we don't want to place it in any of the XML elements in the template. For these cases, the <t> special element can be used. It can have QWeb directives such as t-if or t-foreach, but it is silent, and it won't have any effect on the final XML/HTML produced.

The QWeb directives frequently use evaluated expressions to produce different effects that depend on record values. The language used to evaluate these expressions depends on the environment where the QWeb is being executed. There are two different QWeb implementations: client-side JavaScript and server-side Python. Reports and website pages use the server-side...

Extending kanban views

The templates used in kanban views and reports can be extended in the same way other view types are extended: that is, declare the element to match, possibly using an XPath expression, and use the position attribute to set what the extensions should do (for example, add the new elements after of before the matched element). These techniques are explained in detail in Chapter 4, Extending Modules.

In practice, kanban views and QWeb templates are more complex than the regular form view, and matching the elements to extend can be tricky.

Using <field> elements as selectors can be difficult. It is common for the same field name to be included more than once in a kanban view: at the beginning, in the field list to load, and then again inside the kanban box template. Since the selector will match the first field element found, the modification won't be applied inside the template, as intended.

For example, the //t[@t-name='kanban-box'...

Adding CSS and JavaScript assets

Kanban views are mostly HTML and make significant use of CSS classes. In this chapter, some standard CSS classes were introduced in the code examples, but modules can also provide their own CSS.

The generally used convention is to have the asset files inside the /static/src subdirectory.

Module web assets are declared in a manifest file in the assets key. This file is set with a dictionary that maps the assets bundle to be extended and the list of assets to add to it.

This provides the tool to add web assets to an Odoo module, such as CSS and JavaScript assets. These web asset files provide a structured way to better provide user interface elements for a richer user experience.

They can then be used in the module's QWeb templates, as discussed throughout the previous sections in this chapter.

Here is an example for the library_checkout addon module. Edit the __manifest__.py file to add the following:

    "...

Summary

This chapter covered kanban views and demonstrated how they can act as a powerful user interface tool. By now, you should understand kanban boards, and you are equipped with the techniques needed to design kanban views.

In this chapter, you also explored the QWeb template language that powers kanban views. With the help of the examples in this chapter, you should now know how to use its features.

As is expected for Odoo, kanban views and QWeb templates can also be extended by other modules in a similar way to other view types. Having read this chapter, you know additional techniques to use this functionality on Kanban views.

Finally, we also discussed the use of CSS and JavaScript assets in advanced kanban views. We also looked at how these assets must be provided by the modules and must be added to the backend assets. You now know how to implement this.

The next chapter will continue exploring QWeb, but this time, we'll focus on the server side and see how...

Further reading

The following reference materials complement the topics discussed in this chapter:

• The official Odoo documentation on QWeb: https://www.odoo.com/documentation/15.0/developer/reference/frontend/qweb.html
• The Bootstrap CSS documentation: https://getbootstrap.com/docs/4.1/getting-started/introduction/
• The Font Awesome icon index: https://fontawesome.com/v4.7.0/icons/