Up until now, we have presented the user with a list of records that can be opened to show a form. While those lists are efficient when presenting a lot of information, they tend to be rather dull given the lack of design possibilities. In this recipe, we'll have a look at kanban views, which allow us to present lists of records in a more appealing way.
- Define a view of type kanban:
<record id="kanban_all_customers" model="ir.ui.view"> <field name="model">res.partner</field> <field name="arch" type="xml"> <kanban> - List the fields you're going to use in your view:
<field name="name" /> <field name="supplier" /> <field name="customer" /> - Do some design:
<templates> <t t-name="kanban-box"> <div class="oe_kanban_card"> <a type="open"> <field name="name" /> </a> <t t-if="record.supplier.raw_value or record.customer.raw_value"> is <t t-if="record.customer.raw_value"> a customer <t t-if="record.supplier.raw_value"> and </t> </t> <t t-if="record.supplier.raw_value"> a supplier </t> </t> </div> </t> </templates> - Close all the tags:
</kanban> </field> </record> - Add this view to one of your actions. This is left as an exercise for the reader.
We need to give a list of fields to load in (2) in order to be able to access them later. The content of the templates element must be a single t element with the attribute t-name set to the value kanban-box.
What you write inside this element will be repeated for each record, with special semantics for the t elements and the t-* attributes. For details about that, refer to Chapter 15, Web Client Development, and the recipe Client side QWeb because, technically, kanban views are a repetition of QWeb templates.
There are a few modifications which are peculiar to kanban views. You have access to the variables instance, read_only_mode, record, and widget. Fields can be accessed by using record.fieldname, which is an object with the properties value and raw_value, where value is the field's value formatted in a way presentable to the user and raw_value is the field's value as it comes from the database.
Note the type attribute of the link at the top of the template. This attribute makes Odoo generate a link that opens the record in the view mode (open) or in the edit mode (edit), or it deletes the record (delete). The type attribute can also be object or action, which will render links that call a function of the model or an action. In both cases, you need to supplement the attributes for buttons in form views as outlined earlier. Instead of the a element, you can also use the button element; the type attribute has the same semantics there.
There are a few more helper functions worth mentioning. If you need to generate a pseudo-random color for some element, use the function kanban_color(some_variable), which will return a CSS class that sets the background and color properties. This is usually used in the t-att-class elements.
If you want to display an image stored in a binary field, use kanban_image(modelname, fieldname, record.id.raw_value), which returns a data URI if you included the field in your fields list and the field is set, a placeholder if the field is not set, or a URL that makes Odoo stream the field's contents if you didn't include it in your fields list. Do not include the field in the fields list if you need to display a lot of records simultaneously or you expect very big images. Usually, you'd use this in a t-att-src attribute of an img element.
For arbitrary length text fields, consider using kanban_text_ellipsis(yourstring, size), which crops the string to the given size and adds an ellipsis (...).