How to Add Drag & Drop on Kanban View Odoo Development Tutorial

Adding drag & drop functionality on Kanban view Odoo development tutorial can transform your Odoo applications by enhancing user interaction and workflow management. This comprehensive guide will walk you through the steps to implement drag & drop features in Odoo’s Kanban views, ensuring a seamless and intuitive user experience. By integrating these functionalities, you can create dynamic and user-friendly Kanban boards that streamline your business processes.

Understanding Odoo’s Kanban View and Drag & Drop

Odoo’s Kanban view is a powerful tool for visualizing records as cards within columns, making it ideal for managing tasks, projects, and various workflows. Incorporating drag & drop functionality into the Kanban view allows users to reorder records effortlessly, improving the efficiency and flexibility of task management. This tutorial will cover the necessary steps to achieve this integration, including model updates, view modifications, and styling enhancements.

Prerequisites for Implementing Drag & Drop

Before you begin, ensure you have the following:

• Odoo Development Environment: Properly set up and configured with necessary dependencies.
• Basic Knowledge of Odoo Models and Views: Familiarity with Odoo’s ORM and XML view architecture.
• Python Programming Skills: Required for customizing Odoo models.
• Access to Odoo Modules: Ability to create or modify existing modules.

Step 1: Defining the Sequence Field in Your Odoo Model

To enable drag & drop functionality, start by defining a sequence field in your Odoo model. This field will manage the order of records within the Kanban view.

from odoo import models, fields

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

    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')
    sequence = fields.Integer(string="Sequence", default=10)

Explanation: The sequence field is an integer that determines the order of records. By setting _order = 'sequence', Odoo will display records based on this field in ascending order. This setup is essential for implementing drag & drop, as it allows dynamic reordering of records.

Step 2: Creating the Kanban View with Drag & Drop Handles

Next, create an XML view to define how the Kanban view should display each record, including the drag & drop handles.

<odoo>
    <record id="view_wb_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">
                <field name="sequence"/>
                <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>
                        <div class="oe_kanban_bottom_right">
                            <span class="o_kanban_record_handle" t-att-data-id="record.id"/>
                        </div>
                    </t>
                </templates>
                <kanban_mobile default_group_by="status"/>
            </kanban>
        </field>
    </record>
</odoo>

Explanation: The kanban-box template defines the structure of each card in the Kanban view. The o_kanban_record_handle span acts as the drag handle, enabling users to click and drag the record to reorder it. Including the sequence field at the top ensures that Odoo recognizes the field used for ordering.

Step 3: Enhancing the Tree View for Drag & Drop

To facilitate the drag & drop functionality, modify the tree view to include the handle widget that interacts with the sequence field.

<odoo>
    <record id="wb_student_tree_view" model="ir.ui.view">
        <field name="name">wb.student.tree</field>
        <field name="model">wb.student</field>
        <field name="arch" type="xml">
            <tree string="Students">
                <field name="sequence" widget="handle"/>
                <field name="name"/>
                <field name="status"/>
                <field name="hobby_list"/>
            </tree>
        </field>
    </record>
</odoo>

Explanation: The widget="handle" attribute on the sequence field adds a draggable handle to each record in the tree view. This enables users to reorder records by dragging them up or down, which updates the sequence field accordingly.

Step 4: Modifying the Form View for Image Upload

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

<odoo>
    <record id="view_wb_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"/>
                        <field name="sequence"/>
                    </group>
                </sheet>
            </form>
        </field>
    </record>
</odoo>

Explanation: Including the student_image field with the widget="image" attribute in the form view allows users to upload and manage images directly from the form interface, enhancing the visual representation of each student record.

Step 5: Applying Custom CSS for Enhanced Styling

To improve the appearance of images and drag handles, apply custom CSS styles.

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

.kanban-class .o_kanban_record_handle {
    cursor: move;
    width: 20px;
    height: 20px;
    background: url('/your_module/static/src/img/handle_icon.png') no-repeat center;
    display: inline-block;
}

Explanation: The CSS styles ensure that avatar images are uniformly sized and circular, providing a clean and consistent look. The o_kanban_record_handle class styles the drag handles, making them easily identifiable and ensuring a smooth drag experience.

Step 6: Updating the Module Manifest

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

# __manifest__.py
{
    'name': 'Student Management with Drag & Drop',
    'version': '1.0',
    'depends': ['base', 'web'],
    'data': [
        'views/wb_student_kanban_view.xml',
        'views/wb_student_form_view.xml',
        'views/wb_student_tree_view.xml',
        'security/ir.model.access.csv',
    ],
    'assets': {
        'web.assets_backend': [
            'your_module/static/src/css/kanban_custom.css',
            'your_module/static/src/img/handle_icon.png',
        ],
    },
}

Explanation: The manifest file lists all necessary XML files for views and security, as well as includes the custom CSS and handle icon image for styling purposes.

Step 7: Implementing the Drag & Drop Logic in Python

To make the drag & drop functionality work, override the write method in your model to update the sequence field when records are reordered.

from odoo import models, fields, api

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

    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')
    sequence = fields.Integer(string="Sequence", default=10)

    @api.model
    def create(self, vals):
        if 'sequence' not in vals:
            vals['sequence'] = self.search([], limit=1, order='sequence desc').sequence + 1
        return super(Student, self).create(vals)

    @api.multi
    def write(self, vals):
        if 'sequence' in vals:
            # Additional logic can be added here if needed
            pass
        return super(Student, self).write(vals)

Explanation: The create method initializes the sequence field for new records by assigning the next available sequence number. The write method can be customized further if additional logic is required during updates. This setup ensures that when records are reordered via drag & drop, their sequence values are updated accordingly.

Step 8: Installing and Testing the Module

After setting up the fields, views, styles, and logic, install your custom module from the Odoo Apps. Once installed, navigate to the Kanban view of the student model to see the drag & drop functionality in action.

Testing Tips:

• Reorder Records: Drag and drop student cards to different positions and verify that the order is updated correctly.
• Image Uploads: Upload various images to ensure they display properly within the Kanban view.
• Responsiveness: Check the Kanban view on different devices to ensure it remains responsive.
• Data Integrity: Confirm that the sequence field updates accurately and maintains the correct order of records.

Troubleshooting Common Issues

While adding drag & drop functionality in Odoo is straightforward, you might encounter some common challenges:

• Drag Handles Not Visible: Ensure that the o_kanban_record_handle class is correctly applied and that the CSS for the handle icon is properly loaded.
• Sequence Field Not Updating: Verify that the sequence field is correctly defined in both the model and views, and that the Python methods are properly overriding the default behavior.
• Performance Lag: Large images or a high number of records can slow down the Kanban view. Optimize images and limit the number of records displayed per column if necessary.
• Styling Issues: Double-check your CSS paths and class names to ensure styles are applied correctly.

Best Practices for Managing Drag & Drop 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.
• Manage Access Rights: Control who can reorder records to maintain data integrity.
• Regularly Update CSS: Keep your custom styles updated to align with Odoo’s updates and ensure compatibility.
• Backup Data: Regularly back up your database to prevent data loss during development and customization.

Extending Functionality: Adding Priority Levels and Filters

Enhance your Kanban view by adding priority levels and filters based on these priorities. This allows users to quickly identify and manage high-priority tasks.

<odoo>
    <record id="view_wb_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">
                <field name="sequence"/>
                <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><field name="priority"/></div>
                        </div>
                        <div class="oe_kanban_bottom_left">
                            <field name="hobby_list"/>
                        </div>
                        <div class="oe_kanban_bottom_right">
                            <span class="o_kanban_record_handle" t-att-data-id="record.id"/>
                        </div>
                    </t>
                </templates>
                <kanban_mobile default_group_by="status"/>
            </kanban>
        </field>
    </record>
</odoo>

Explanation: Adding a priority field and displaying it within the Kanban box provides additional context for each record. Users can incorporate filters to sort or group records based on priority levels, enhancing task management capabilities.

Leveraging Odoo’s JavaScript for Advanced Drag & Drop Features

For more advanced drag & drop features, such as snapping to specific positions or integrating with external systems, you can extend Odoo’s JavaScript components.

odoo.define('your_module.kanban_drag_drop', function (require) {
    "use strict";

    var KanbanView = require('web.KanbanView');
    var KanbanController = require('web.KanbanController');

    KanbanController.include({
        _onDragStart: function (event) {
            // Custom drag start logic
            this._super(event);
        },
        _onDragEnd: function (event) {
            // Custom drag end logic
            this._super(event);
        },
    });
});

Explanation: By extending the KanbanController, you can customize the behavior of drag & drop interactions. This allows for advanced features such as validation during reordering, integration with other modules, or custom notifications upon changes.

Conclusion

Integrating drag & drop functionality into the Kanban view of your Odoo applications significantly enhances user interaction and workflow management. By following this tutorial, you can implement a dynamic and intuitive Kanban board that elevates the efficiency of your business processes. Remember to adhere to best practices for optimization, styling, and data management to maintain a seamless and effective user experience.

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