Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Build a Hybrid Kanban-List View for Odoo 17 CRM: Filter Leads by Customer

Tech May 18 2

A hybrid of Kanban and List views would streamline CRM workflows: imagine a customer list panel on the left side of the CRM Kanban view. When you select a customer from this sidebar, the Kanban view on the right automatically filters to display only leads associated with that selected customer. This implementation will extend Odoo 17's core Kanban components to build this integrated experience.

1. Build a Custom Hybrid Kanban View

To implement this integrated view, we first extend Odoo's core Kanban view for CRM:

  1. Create a new component HybridKanbanController that extends the base KanbanController from @web/views/kanban/kanban_controller.
  2. Define a new view object that inherits all properties from the core KanbanView (imported from @web/views/kanban/kanban_view), overriding only the Controller property with your new HybridKanbanController.
  3. Register this custom view in Odoo's view registry under the name hybrid_kanban.
  4. Update the CRM Kanban view arch in hybrid_kanban/views/views.xml to use your custom view by setting the js_class attribute on the <kanban> node to hybrid_kanban.

2. Develop the CustomerSidebar Component

Next, create the sidebar component to display the customer list:

  1. Build a CustomerSidebar component that initially renders a placeholder text div. This component should accept an onCustomerSelect callback prop.
  2. Extend the Kanban controller's template using an XPath to insert the CustomerSidebar component before the main Kanban renderer. Pass an empty placeholder function to the onCustomerSelect prop initially.
<xpath expr="//t[@t-component='props.Renderer']" position="before">
    <CustomerSidebar onCustomerSelect="props.onCustomerSelect"/>
</xpath>
  1. Update your HybridKanbanController to include the CustomerSidebar as a child component, ensuring it's rendered alongside the Kanban view.
  2. Verify the component appears in the CRM Kanban view to confirm setup.

3. Fetch and Display Customer Data

Modify the CustomerSidebar to load and render the customer list:

  1. In the onWillStart lifecycle hook of CustomerSidebar, fetch all customer records from the res.partner model where the record is classified as a customer.
  2. Render the list of customers in the component's template using Odoo's t-foreach directive to loop through the fetched records.
  3. Attach a click event handler to each customer item that triggers the onCustomerSelect prop with the selected customer's ID and name.

4. Implement Lead Filtering on Customer Selection

Update the HybridKanbanController to filter the Kanban view when a customer is selected:

  1. Implement the onCustomerSelect method in the controller. This method will use Odoo's searchModel to create a new filter that restricts leads to those linked to the selected customer.
this.env.searchModel.createNewFilters([{
    description: selectedCustomerName,
    domain: [["partner_id", "=", selectedCustomerId]],
    isFromHybridKanban: true, // Custom flag to identify our filters
}]);
  1. Ensure selecting a new customer replaces any existing customer filter instead of adding multiple filters. Retrieve all existing filters marked with isFromHybridKanban and deactivate them before adding the new filter:
const existingCustomerFilters = this.env.searchModel.getSearchItems((item) =>
    item.isFromHybridKanban
);
existingCustomerFilters.forEach(filter => {
    if (filter.isActive) {
        this.env.searchModel.toggleSearchItem(filter.id);
    }
});
  1. Pass the implemented onCustomerSelect method from the HybridKanbanController to the CustomerSidebar component's prop to enable filtering.

5. Filter Customers to Only Active Ones

Add a checkbox to the CustomerSidebar to show only customers with associated leads:

  1. Insert a checkbox input in the CustomerSidebar template with the label "Active Customers (with Leads)".
  2. Bind the checkbox's state to a reactive varible in the component. When the state changes, adjust the domain used to fetch customers to include only those with atleast one linked lead (using the opportunity_ids field on res.partner).

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.