Breadcrumbs are a useful navigation tool that helps users understand their current location within a website and easily navigate back to previous pages. By implementing breadcrumbs in the customer portal, you can enhance the user experience and improve the overall navigation flow. In this blog, we will explore how to add breadcrumbs to the customer portal in Odoo 17. We will discuss the step-by-step process of adding breadcrumbs to the customer portal and provide code snippets for better understanding.
Understanding Breadcrumbs in the Customer Portal
Before we dive into the implementation process, let's first understand what breadcrumbs are and why they are important in the customer portal. Breadcrumbs are a type of navigation aid that indicates the user's location within a website hierarchy. They typically appear at the top of a page and consist of clickable links that represent the user's path from the homepage to the current page. Breadcrumbs serve as a visual reminder of the user's journey and allow them to easily navigate back to previous pages.
Steps to Add Breadcrumbs to the Customer Portal
To add breadcrumbs to the customer portal in Odoo 17, follow these steps:
Step 1: Create an XML Template
The first step is to create an XML template that will display the breadcrumbs in the custom menu. This template will be used to show the records in the custom menu. Here's an example of how the XML template can be structured:
<template id="portal_car_service" name="My Car Service">
<t t-call="portal.portal_layout">
<t t-if="car_service_portal" t-call="portal.portal_table">
<thead>
<tr class="active">
<th>Order Reference</th>
<th class="text-end">Service Type</th>
<th class="text-end">Date</th>
<th class="text-end">State</th>
</tr>
</thead>
<t t-foreach="car_service_portal" t-as="contract">
<tr>
<td>
<a t-attf-href="/service_portal/#{contract.id}">
<t t-out="contract.reference_no"/>
</a>
</td>
<td class="text-end">
<span t-field="contract.service_package_id"/>
</td>
<td class="text-end">
<span t-field="contract.date"/>
</td>
<td class="text-end">
<span t-field="contract.state"/>
</td>
</tr>
</t>
</t>
</t>
</template>
In this template, we define the structure of the table that will display the records in the custom menu.
Step 2: Include Breadcrumbs in the Template
Next, we need to include the breadcrumbs in the template. To do this, we will call the portal.portal_searchbar template and set the breadcrumbs_searchbar value to True. Here's an example of how this can be done:
<template id="portal_car_service" name="My Car Service">
<t t-call="portal.portal_layout">
<t t-set="breadcrumbs_searchbar" t-value="True"/>
<t t-call="portal.portal_searchbar">
<t t-set="title">Car Service</t>
</t>
<t t-if="car_service_portal" t-call="portal.portal_table">
<!-- Table structure goes here -->
</t>
</t>
</template>
In this code snippet, we set the breadcrumbs_searchbar value to True, which enables the display of breadcrumbs in the customer portal. We also set the title of the page to "Car Service" using the t-set directive.
Step 3: Pass Page Name through the Controller
To specify the breadcrumbs for each page, we need to pass the page name through a controller. In the controller, we can retrieve the relevant data and render the template with the necessary context. Here's an example of how the controller can be defined:
@http.route(['/service_portal'], type='http', auth='public',
website=True)
def portal_my_service(self):
service_booking = request.env['service.booking'].sudo().search(
[('partner_id.id', '=', request.env.user.commercial_partner_id.id)])
return request.render('website_fleet_service.portal_car_service',
{'car_service_portal': service_booking,
'page_name': 'car_service_booking'})
In this controller, we retrieve the service records for the current user and pass them to the template. We also specify the page name as "'car_service_booking'" using the page_name parameter.
Step 4: Create Breadcrumbs Template
The final step is to create a template for the breadcrumbs and inherit the portal.portal_breadcrumbs template. This template will define the breadcrumbs for each page based on the page name passed through the controller. Here's an example of how this can be done:
<template id="portal_my_home_menu_service"
name="Portal layout : car service menu entries"
inherit_id="portal.portal_breadcrumbs">
<xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
<li t-if="page_name == 'car_service_booking'"
class="breadcrumb-item active">
<span>Car Service</span>
</li>
</xpath>
</template>
In this template, we use the t-if directive to check if the page_name is equal to "car_service_booking". If it is, we display the "Payslips" breadcrumb as an active link. This template can be customized for different pages by adding additional li elements and checking the page_name accordingly.
Conclusion
In this blog, we have learned how to add breadcrumbs to the customer portal in Odoo 17. Breadcrumbs are a valuable navigation tool that improves the user experience and helps users easily navigate through the customer portal. By following the step-by-step process outlined in this blog, you can enhance the navigation flow and provide a more intuitive user interface in your Odoo 17 customer portal.