Customize Header and Footer for All Reports in Odoo 15

Reports are important documents for a company for monitoring information. Odoo has different reports.

Sale Orders, Purchase orders, and Accounting reports. There are Odoo defines some report layouts. Some of them are external_layout_standard, external_layout_striped, and external_layut_bold. Odoo15 reports are written using qweb or HTML. We can design the header and footer for a report by developing a new layout or inheriting the existing layout.

When setup the debug mode is on your computer, we have settings for selecting the layout for the document.

Now I have selected ‘external_layout_striped.’

We can inherit the template from the front side by pressing the edit layout->inherit view option, then create the inherit view, and also we can inherit the layout by using the backend code as well.

Now We can inherit a template by specifying the inherit_id.

<template inherit_id=”module_name.layout name” id=””>

This is the default one now, so I have inherited the external_layout_striped.

<template id=”custom_purchase_header_footer1″  inherit_id=”web.external_layout_striped”>

<xpath expr=”//div[2]” position=”replace”>

<div t-attf-class=”o_company_#{company.id}_layout header” t-att-style=”report_header_style”>

<div class=”o_background_header” style=”position:absolute;”>

<div class=”float-right”>

<h3 class=”mt0 text-right” t-field=”company.report_header”/>

</div>

<div class=”header_content float-right”>

<div class=”logo” style=””>

<img t-if=”company.logo” style=”max-width:260px;max-height:89px;”

t-att-src=”image_data_uri(company.logo)”

class=”float-left” alt=”Logo”/>

</div>

</div>

<div class=”float-left”>

<div class=”details”>

<table class=”table_partner” style=”width:120%;”>

<tr>

<td><b style=”color:black;”> CLIENT Details:</b></td>

</tr>

<tr>

<td>

<b>

<span style=”color:black;” t-if=”company”

t-esc=”o.partner_id.name”/>

</b>

<br></br>

<t t-if=”o.partner_id.street”>

<span t-esc=”o.partner_id.street”/>

<br></br></t>

<t t-if=”o.partner_id”>

<span t-esc=”o.partner_id.city”/>

<br></br>

</t>

</td>

</tr>

</table>

</div>

</div>

</div>

</div>

</xpath>

<xpath expr=”//div[hasclass(‘text-center’)]” position=”replace”>

<center>

<h5 style=”color:black;”><b><t t-esc=”o.company_id.name”/></b></h5>

<h6 style=”color:black;”>Your company details</h6>

Page: <span class=”page”/> / <span class=”topage”/>

</center>

</xpath>

</template>

After inheriting the template we can write our XML language for the custom header and footer for reports by using the XPath expression in odoo 15. Depending on our design, we can use different values in xpath like before position values replace, after.

<xpath expr=”//div[2]” position=”replace”>

Here, I have replaced the second div, which includes the header in external_layout_striped, and created the designed header with some customer information.

<xpath expr=”//div[hasclass(‘text-center’)]” position=”replace”>

Like, using the XPath option also replaces the footer of the report block and adds a custom footer in odoo 15 reports.

Here ‘ the company name and “page no” are also included in the footer of the report

<span class=”page”/>

<span class=”topage”/>

These 2 span classes give the page number details to our qweb report, and we can also use this class inside both the header and footer classes in the report.

We can also get the regarding model on the variables ‘o’ or from ‘docs’ and can use the dotted path like ‘o.customer_id.name’ to get other models from the existing model. We can also use ‘t-field’ or t-esc, we can print the values stored in the variables.

<Span t-esc=”o”> or <span t-field=”o”>

Taking the t-call, we can call different layouts to our inherited layouts. This will help to minimize the need to customize the same layout again. Instead, we can also use this t-call.

<t-call=”module_name.layout_name”>like this.

The usual header and footer of the report for the external_layout_striped include the ‘company logo’ on the header and page no. on the footer of the report. Here I have printed the purchase order from the Odoo 15 purchase module.

After designing the header and footer for the report, the report layout for the PO looks like the image below showed.

Now we have completed the design. In this way, we can customization of the header and footer for all reports by inheriting the existing layout in odoo 15.

DOWNLOAD ERP