Build a Hybrid Kanban-List View for Odoo 17 CRM: Filter Leads by Customer
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:
- Create a new component
HybridKanbanControllerthat extends the baseKanbanControllerfrom@web/views/kanban/kanban_controller. - Define a new view object that inherits all properties from the core
KanbanView(imported from@web/views/kanban/kanban_view), overriding only theControllerproperty with your newHybridKanbanController. - Register this custom view in Odoo's view registry under the name
hybrid_kanban. - Update the CRM Kanban view arch in
hybrid_kanban/views/views.xmlto use your custom view by setting thejs_classattribute on the<kanban>node tohybrid_kanban.
2. Develop the CustomerSidebar Component
Next, create the sidebar component to display the customer list:
- Build a
CustomerSidebarcomponent that initially renders a placeholder text div. This component should accept anonCustomerSelectcallback prop. - Extend the Kanban controller's template using an XPath to insert the
CustomerSidebarcomponent before the main Kanban renderer. Pass an empty placeholder function to theonCustomerSelectprop initially.
<xpath expr="//t[@t-component='props.Renderer']" position="before">
<CustomerSidebar onCustomerSelect="props.onCustomerSelect"/>
</xpath>
- Update your
HybridKanbanControllerto include theCustomerSidebaras a child component, ensuring it's rendered alongside the Kanban view. - 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:
- In the
onWillStartlifecycle hook ofCustomerSidebar, fetch all customer records from theres.partnermodel where the record is classified as a customer. - Render the list of customers in the component's template using Odoo's
t-foreachdirective to loop through the fetched records. - Attach a click event handler to each customer item that triggers the
onCustomerSelectprop 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:
- Implement the
onCustomerSelectmethod in the controller. This method will use Odoo'ssearchModelto 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
}]);
- Ensure selecting a new customer replaces any existing customer filter instead of adding multiple filters. Retrieve all existing filters marked with
isFromHybridKanbanand 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);
}
});
- Pass the implemented
onCustomerSelectmethod from theHybridKanbanControllerto theCustomerSidebarcomponent'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:
- Insert a checkbox input in the
CustomerSidebartemplate with the label "Active Customers (with Leads)". - 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_idsfield onres.partner).