Adding Images in Kanban View with Odoo: Step-by-Step Guide

Enhancing your Odoo applications with images in the Kanban view can significantly improve visual representation and user experience. This tutorial will guide you through the process of adding images to the Kanban view in Odoo, ensuring your data is both informative and visually appealing. By the end of this guide, you’ll be able to seamlessly integrate images into your Kanban boards, making your Odoo modules more interactive and user-friendly.

Understanding the Kanban View in Odoo

The Kanban view in Odoo is a versatile tool that allows users to visualize records as cards within columns. This view is particularly useful for tracking tasks, projects, and various workflows. By incorporating images into the Kanban view, you can provide a more intuitive and engaging interface for users.

Prerequisites for Adding Images

Before diving into the implementation, ensure you have the following:

• Odoo Development Environment: Set up and configured.
• Basic Knowledge of Odoo Models and Views: Familiarity with Odoo’s ORM and view architecture.
• Access to Odoo Modules: Ability to create or modify modules as needed.

Step 1: Defining the Image Field in Your Model

To display images in the Kanban view, start by defining an image field in your Odoo model. This field will store the image data associated with each record.

from odoo import models, fields

class Student(models.Model):
    _name = 'wb.student'
    _description = 'Student Information'

    name = fields.Char(string="Name", required=True)
    student_image = fields.Image(string="Student Image")
    hobby_list = fields.Many2many(
        comodel_name="wb.hobby",
        relation="student_hobby_list_relation",
        column1="student_id",
        column2="hobby_id",
        string="Hobbies",
        help="Select hobby list for this student!",
    )
    status = fields.Selection([
        ('draft', 'Draft'),
        ('confirmed', 'Confirmed'),
        ('done', 'Done')
    ], string="Status", default='draft')

Explanation: Here, we define a student_image field using fields.Image. This field will store the image for each student record. Additionally, other fields like name, hobby_list, and status are defined to manage student information.

Step 2: Modifying the Kanban View to Include Images

Next, update the Kanban view to display the image alongside other record details.

<odoo>
    <record id="view_student_kanban" model="ir.ui.view">
        <field name="name">wb.student.kanban</field>
        <field name="model">wb.student</field>
        <field name="arch" type="xml">
            <kanban class="kanban-class">
                <templates>
                    <t t-name="kanban-box">
                        <div class="oe_kanban_global_click">
                            <field name="student_image" widget="image" class="oe_avatar"/>
                            <strong><field name="name"/></strong>
                            <div><field name="status"/></div>
                        </div>
                        <div class="oe_kanban_bottom_left">
                            <field name="hobby_list"/>
                        </div>
                    </t>
                </templates>
                <kanban_mobile default_group_by="status"/>
            </kanban>
        </field>
    </record>
</odoo>

Explanation: In this XML snippet, we define a Kanban view for the wb.student model. The student_image field is incorporated using the widget="image" attribute, and the oe_avatar class ensures proper styling. The student’s name and status are also displayed, along with their hobbies.

Step 3: Adjusting the Form View for Image Upload

To allow users to upload images, modify the form view of the student model to include the image field.

<odoo>
    <record id="view_student_form" model="ir.ui.view">
        <field name="name">wb.student.form</field>
        <field name="model">wb.student</field>
        <field name="arch" type="xml">
            <form string="Student Form">
                <sheet>
                    <group>
                        <field name="name"/>
                        <field name="student_image" widget="image" class="oe_avatar"/>
                    </group>
                    <group>
                        <field name="hobby_list"/>
                        <field name="status"/>
                    </group>
                </sheet>
            </form>
        </field>
    </record>
</odoo>

Explanation: The form view includes the student_image field with the widget="image" attribute, allowing users to upload images directly from the form interface. This setup ensures that images are easily manageable alongside other student details.

Step 4: Applying CSS for Enhanced Styling

To make the images appear more appealing in the Kanban view, apply custom CSS styles.

/* static/src/css/kanban.css */
.kanban-class .oe_avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

Explanation: This CSS snippet styles the avatar images to be circular with a consistent size, enhancing the visual layout of the Kanban cards.

Step 5: Updating the Module Manifest

Ensure that your module’s manifest file includes the necessary dependencies and assets.

# __manifest__.py
{
    'name': 'Student Management',
    'version': '1.0',
    'depends': ['base', 'web'],
    'data': [
        'views/student_kanban_view.xml',
        'views/student_form_view.xml',
        'security/ir.model.access.csv',
    ],
    'assets': {
        'web.assets_backend': [
            'your_module/static/src/css/kanban.css',
        ],
    },
}

Explanation: The manifest file lists all the necessary XML files for views and security, as well as includes the custom CSS for styling the Kanban view.

Step 6: Installing and Testing the Module

After setting up the fields, views, and styles, install your custom module from the Odoo Apps. Once installed, navigate to the Kanban view of the student model to see the images displayed alongside other details.

Testing Tips:

• Upload Various Images: Ensure different image sizes and formats display correctly.
• Check Responsiveness: Verify that the Kanban view remains responsive across different devices.
• Validate Data Integrity: Confirm that images are correctly associated with their respective records.

Troubleshooting Common Issues

While adding images to the Kanban view in Odoo is straightforward, you might encounter some common challenges:

• Images Not Displaying: Ensure that the widget="image" attribute is correctly set in both Kanban and form views.
• Styling Problems: Double-check your CSS to ensure that classes are applied correctly and paths to assets are accurate.
• Performance Lag: Large image files can slow down the Kanban view. Consider optimizing images for web use.

Best Practices for Managing Images in Odoo

To maintain an efficient and user-friendly system, adhere to the following best practices:

• Optimize Image Sizes: Use compressed images to reduce load times without compromising quality.
• Consistent Image Dimensions: Ensure all images have uniform dimensions for a cohesive appearance.
• User Permissions: Manage access rights to control who can upload or modify images.

Extending Functionality: Adding Image Filters

Enhance your Kanban view by adding filters based on image attributes or other related fields.

<filter string="Has Image" domain="[('student_image','!=', False)]"/>
<filter string="No Image" domain="[('student_image','=', False)]"/>

Explanation: These filters allow users to quickly identify records with or without images, improving data management and segmentation.

Leveraging Odoo’s Image Widget

Odoo’s built-in image widget offers various customization options. Explore these to further enhance the image display in your Kanban view.

• Thumbnail Sizes: Adjust the size of thumbnails to fit your design requirements.
• Hover Effects: Implement hover effects to display additional information when users interact with images.
• Click Actions: Enable actions like enlarging images or linking to detailed views upon clicking.

Conclusion

Integrating images into the Kanban view of your Odoo applications elevates the visual appeal and functionality of your modules. By following this step-by-step guide, you can effortlessly add and manage images, providing a richer and more interactive experience for your users. Remember to adhere to best practices for image optimization and styling to maintain performance and aesthetics.

For more detailed information on Odoo’s Kanban views and image management, visit the Odoo Documentation.