I am in odoo 17, and I need to create a report which will have many invoice details, this will make it have many pages, so I need to have a fixed header and footer so that it is displayed on each page, I have been looking for information but I can't find how do it
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project
- MRP
This question has been flagged
Hi,
To add the header and footer for each page, try with the following.
1- Create a custom layout and add header and footer to the custom layout.
<template id="report_custom_external_layout">
<!-- Multicompany -->
<t t-if="not o and doc">
<t t-set="o" t-value="doc"/>
</t>
<t t-if="o and 'company_id' in o">
<t t-set="company" t-value="o.company_id"></t>
</t>
<t t-if="not o or not 'company_id' in o">
<t t-set="company" t-value="res_company"></t>
</t>
<div class="header">
<div class="row">
<img t-if="company.custom_report_header"
t-att-src="image_data_uri(company.custom_report_header)"
alt="Logo" width="100%"/> # optional
</div>
</div>
<div class="footer o_standard_footer" style="position: relative;">
<div style="width: 100%;">
<img t-if="company.custom_report_footer"
t-att-src="image_data_uri(company.custom_report_footer)"
alt="Logo" width="100%"/> # optional
</div>
</div>
<div class="article o_report_layout_standard"
t-att-data-oe-model="o and o._name"
t-att-data-oe-id="o and o.id"
t-att-data-oe-lang="o and o.env.context.get('lang')">
<t t-raw="0"/>
</div>
</template>
2- While calling the template, add the custom layout.
<template id="report_template">
<t t-call="web.html_container">
<t t-call="module_name.report_custom_external_layout">
#
#
# Table contents
#
#
</t>
</t>
</template>
This will result header and footer displaying on each page.
Hope it helps
To create a report in Odoo 17 with a fixed header and footer that appears on every page, you can leverage QWeb reports and CSS properties. Here's a step-by-step guide:
1. Design Your Report Template
The QWeb report is an XML-based template that defines how your report is rendered. To add fixed headers and footers:
Header and Footer in the Template
Use <header> and <footer> tags in your QWeb template to define content that repeats on every page.
Example:
xmlCopy code<?xml version="1.0" encoding="UTF-8"?>
<template id="report_invoice_document">
<t t-call="web.html_container">
<t t-foreach="docs" t-as="doc">
<t t-call="web.external_layout">
<div class="page">
<!-- Fixed Header -->
<header class="header">
<div>Invoice Report</div>
<div>Company: <t t-esc="doc.company_id.name" /></div>
<div>Date: <t t-esc="doc.date_invoice" /></div>
</header>
<!-- Main Content -->
<div class="content">
<h3>Invoice Details</h3>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr t-foreach="doc.invoice_line_ids" t-as="line">
<td><t t-esc="line.product_id.name" /></td>
<td><t t-esc="line.quantity" /></td>
<td><t t-esc="line.price_unit" /></td>
<td><t t-esc="line.price_subtotal" /></td>
</tr>
</tbody>
</table>
</div>
<!-- Fixed Footer -->
<footer class="footer">
<div>Page <span class="page-number"></span> of <span class="page-total"></span></div>
<div>Company Address: <t t-esc="doc.company_id.partner_id.contact_address" /></div>
<div>Thank you for your business!</div>
</footer>
</div>
</t>
</t>
</t>
</template>
2. Add CSS for Fixed Positioning
To ensure the header and footer remain fixed on every page, add the following CSS rules to your report styles:
xmlCopy code<?xml version="1.0" encoding="UTF-8"?>
<template id="report_styles" inherit_id="web.report_assets_common">
<xpath expr="." position="inside">
<style>
/* Ensure the header is fixed at the top */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* Adjust height as needed */
background-color: #f5f5f5;
text-align: center;
border-bottom: 1px solid #ddd;
padding: 10px;
}
/* Ensure the footer is fixed at the bottom */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* Adjust height as needed */
background-color: #f5f5f5;
text-align: center;
border-top: 1px solid #ddd;
padding: 10px;
}
/* Content area - Avoid overlap with header/footer */
.content {
margin-top: 60px; /* Adjust according to header height */
margin-bottom: 60px; /* Adjust according to footer height */
}
/* Page break styling */
.page {
page-break-after: always;
}
</style>
</xpath>
</template>
3. Link Your Stylesheet to the Report
Ensure your custom stylesheet is linked to the report. Add this to your report XML:
xmlCopy code<template id="report_invoice_document_action" inherit_id="account.report_invoice_document">
<xpath expr="//t[@t-call='web.external_layout']" position="replace">
<t t-call="your_module_name.report_invoice_document" />
</xpath>
</template>
Replace your_module_name with the name of your module.
4. Adjust Pagination for PDF Rendering
Odoo uses wkhtmltopdf to render reports as PDFs. Ensure proper pagination and accurate display of headers/footers:
- Use the @media print CSS rule for print-specific adjustments.
- Ensure page-break-inside: avoid; is used for critical elements like tables.
Example:
cssCopy code@media print {
.content table {
page-break-inside: avoid;
}
}
5. Enable Dynamic Page Numbers
For page numbers, add placeholders in your footer that wkhtmltopdf recognizes:
xmlCopy code<footer class="footer">
<div>Page <span class="page-number"></span> of <span class="page-total"></span></div>
</footer>
Ensure wkhtmltopdf is updated to a compatible version (0.12.6 or higher) for the best results.
6. Test Your Report
- Go to Settings > Technical > Reports.
- Locate your report, ensure it is correctly linked, and print a preview.
- Adjust the layout if necessary.
Can I do these with a specific paper format say"A4 Portrait"?
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign up| Related Posts | Replies | Views | Activity | |
|---|---|---|---|---|
|
|
2
Apr 25
|
1475 | ||
|
|
1
Apr 25
|
1880 | ||
|
|
2
Mar 25
|
2468 | ||
|
|
4
Nov 24
|
7855 | ||
|
|
1
Mar 24
|
2737 |
Have you got solution for this? I am also having similar kind of requirement, I have to display header and footer on all pages. It was working on Odoo16 but not working on odoo17.