DEV Community: RayMiles

Mastering QWeb PDF Reports in Odoo 19: From Beginner to Advanced

RayMiles — Sun, 02 Aug 2026 15:51:30 +0000

Learn how to build professional PDF reports in Odoo 19 using QWeb. This guide covers everything from creating your first report to advanced techniques like reusable templates, custom paper formats, barcodes, multilingual reports, RTL support, and performance optimization.

Introduction

Every Odoo application relies on reports.

Whether you're printing:

Sales Quotations
Customer Invoices
Purchase Orders
Delivery Slips
Manufacturing Orders
Inventory Labels
Payroll Documents
Custom Certificates

you're using QWeb, Odoo's XML-based templating engine.

Although creating a basic report is straightforward, building maintainable, scalable, and professional reports requires understanding how the entire reporting pipeline works.

In this tutorial, we'll build a complete report from scratch while exploring best practices used by experienced Odoo developers.

By the end of this guide, you'll be able to:

Create custom PDF reports
Understand how Odoo generates PDFs
Design reusable templates
Display relational data
Build dynamic tables
Format currencies and dates correctly
Add company logos, images, barcodes, and QR codes
Create custom paper formats
Pass additional data from Python
Optimize report performance
Debug common QWeb issues

How Odoo Generates a PDF

Before writing any XML, it's important to understand the report generation process.

User clicks "Print"
        │
        ▼
ir.actions.report
        │
        ▼
Report Model (_get_report_values)
        │
        ▼
QWeb Template
        │
        ▼
Rendered HTML
        │
        ▼
wkhtmltopdf
        │
        ▼
PDF Download

Each step has a specific responsibility:

Component	Responsibility
ir.actions.report	Registers the report
Report Model	Prepares business data
QWeb	Generates HTML
wkhtmltopdf	Converts HTML into PDF

Understanding this workflow makes debugging significantly easier.

Project Structure

A clean module structure helps keep reports maintainable.

my_module/
│
├── models/
│   └── sale_order.py
│
├── report/
│   ├── sale_order_report.xml
│   ├── report_action.xml
│   └── paperformat.xml
│
├── security/
│
├── views/
│
└── __manifest__.py

Keeping reports inside a dedicated report directory is considered best practice.

Step 1 — Create the Report Action

Every report starts with an ir.actions.report.

This record tells Odoo:

which model the report belongs to
which template should be rendered
whether it should generate HTML or PDF
where the report appears in the UI

<record id="action_sale_order_custom" model="ir.actions.report">

    <field name="name">Sale Order PDF</field>

    <field name="model">sale.order</field>

    <field name="report_type">qweb-pdf</field>

    <field name="report_name">
        my_module.sale_order_report
    </field>

    <field name="report_file">
        my_module.sale_order_report
    </field>

    <field name="binding_model_id"
           ref="sale.model_sale_order"/>

    <field name="binding_type">
        report
    </field>

</record>

After installing the module, your report automatically appears inside the Print menu.

💡 Pro Tip: Always use descriptive report IDs. It makes debugging much easier.

Step 2 — Create the QWeb Template

The template defines the visual appearance of your report.

<template id="sale_order_report">

<t t-call="web.html_container">

<t t-foreach="docs" t-as="o">

<t t-call="web.external_layout">

<div class="page">

<h2>Sale Order</h2>

<p>

<strong>Customer:</strong>

<span t-field="o.partner_id"/>

</p>

<p>

<strong>Date:</strong>

<span t-field="o.date_order"/>

</p>

</div>

</t>

</t>

</t>

</template>

Although this template is small, it demonstrates the three most important building blocks of every QWeb report.

Understanding Every XML Tag

`web.html_container`

Creates the HTML document wrapper required before converting HTML into PDF.

<t t-call="web.html_container">

`web.external_layout`

Adds the standard company layout automatically.

It includes:

Company Logo
Company Address
Header
Footer
Page Numbers

Without this layout your report will not look like a standard Odoo document.

`div.page`

Every printable page should be wrapped inside:

<div class="page">

This tells wkhtmltopdf where pages begin.

Accessing Data

When multiple records are printed, Odoo sends them to the template inside the variable:

docs

This loop iterates over every selected record.

<t t-foreach="docs" t-as="o">

Think of it like Python:

for o in docs:

Displaying Fields

The preferred way to display model fields is:

<span t-field="o.partner_id"/>

Why?

Because t-field automatically applies:

Translations
Currency formatting
Date formatting
Timezone conversion
Decimal precision

Whenever you're displaying an Odoo field, prefer t-field over t-out.

`t-field` vs `t-out`

t-field

<span t-field="o.amount_total"/>

Automatically formats values.

t-out

<t t-out="o.amount_total"/>

Outputs the raw evaluated expression.

Use it when displaying Python expressions instead of model fields.

Creating Tables

Most reports display one2many records.

Example:

<table class="table">

<thead>

<tr>

<th>Product</th>

<th>Qty</th>

<th>Unit Price</th>

<th>Total</th>

</tr>

</thead>

<tbody>

<tr t-foreach="o.order_line" t-as="line">

<td>

<span t-field="line.product_id"/>

</td>

<td>

<span t-field="line.product_uom_qty"/>

</td>

<td>

<span t-field="line.price_unit"/>

</td>

<td>

<span t-field="line.price_total"/>

</td>

</tr>

</tbody>

</table>

This works exactly like iterating over a Python list.

Conditional Rendering

Display content only when necessary.

<t t-if="o.state == 'sale'">

<div class="alert alert-success">

Confirmed Order

</div>

</t>

Else:

<t t-if="o.amount_total > 1000">

VIP Customer

</t>

<t t-else="">

Regular Customer

</t>

Images

Company Logo

<img
t-if="o.company_id.logo"
t-att-src="image_data_uri(o.company_id.logo)"
style="height:80px;"/>

Product Image

<img
t-if="line.product_id.image_128"
t-att-src="image_data_uri(line.product_id.image_128)"
style="width:60px;"/>

Barcodes

Odoo can generate barcodes without additional libraries.

<img
t-att-src="'/report/barcode/Code128/%s' % o.name"/>

Useful for:

Inventory
Manufacturing
Shipping
Warehouses

QR Codes

Generating QR codes follows the same principle.

Perfect for:

Payment Links
Product URLs
Customer Verification
Digital Certificates

Custom Paper Formats

Need receipts?

Shipping labels?

A5?

Letter?

Create a custom paper format.

<record id="paperformat_custom"
        model="report.paperformat">

    <field name="name">A5 Landscape</field>

    <field name="format">A5</field>

    <field name="orientation">Landscape</field>

</record>

Then assign it to your report action.

Passing Extra Data from Python

Complex calculations belong in Python—not XML.

class SaleOrderReport(models.AbstractModel):

    _name = "report.my_module.sale_order_report"

    def _get_report_values(self, docids, data=None):

        docs = self.env["sale.order"].browse(docids)

        return {

            "docs": docs,

            "grand_total": sum(
                docs.mapped("amount_total")
            ),

        }

Inside QWeb:

<t t-out="grand_total"/>

💡 Best Practice: Keep business logic inside Python. Use QWeb only for presentation.

Calling Reports from Python

Generate reports programmatically.

return self.env.ref(
    "my_module.action_sale_order_custom"
).report_action(self)

Perfect for:

Buttons
Wizards
Scheduled Actions
Automated Workflows

Reusable Templates

Instead of duplicating headers or tables, extract them into reusable templates.

<t t-call="my_module.report_header"/>

This dramatically reduces maintenance.

Multilingual Reports

Odoo automatically translates field labels according to the customer's language.

Always use translated strings whenever possible.

RTL Support

Need Arabic reports?

Add RTL CSS.

body{

direction:rtl;

text-align:right;

}

Use fonts that support Arabic glyphs for consistent rendering.

Performance Tips

Large reports can become slow.

Follow these recommendations:

Move calculations into Python.
Avoid nested loops.
Minimize database queries.
Reuse templates.
Cache expensive computations.
Use mapped() instead of repeated traversals.

Common Mistakes

❌ Putting business logic inside XML.

❌ Using t-out instead of t-field.

❌ Forgetting web.external_layout.

❌ Missing <div class="page">.

❌ Large nested loops.

❌ Hardcoded text instead of translations.

Debugging Checklist

If the PDF is blank:

Check XML syntax.
Verify the template ID.
Confirm the report action.
Test HTML rendering.
Review server logs.

If CSS is broken:

Remember that wkhtmltopdf doesn't support every modern CSS feature.

Keep layouts simple.

Best Practices

✅ Use descriptive template names.

✅ Keep XML focused on presentation.

✅ Put calculations in Python.

✅ Reuse templates.

✅ Test with realistic data.

✅ Support multiple languages.

✅ Follow Odoo coding standards.

Conclusion

QWeb is much more than an XML templating engine—it's the foundation of every printable business document in Odoo.

By understanding the entire reporting pipeline, structuring templates correctly, separating business logic from presentation, and following best practices, you can build reports that are scalable, maintainable, and production-ready.

Whether you're creating invoices, quotations, delivery slips, manufacturing work orders, inventory labels, or custom business documents, mastering QWeb is an essential skill for every Odoo developer.

If you're just starting with Odoo reporting, begin with a simple template, experiment with dynamic fields and loops, then progressively explore advanced topics like reusable templates, multilingual reports, RTL support, custom paper formats, and report optimization.

Happy coding! 🚀

16 Websites Like HackerNoon Every Developer Should Know

RayMiles — Sun, 02 Aug 2026 15:47:55 +0000

If you're a developer, software engineer, startup founder, or technical writer, chances are you've read articles on HackerNoon. It's one of the most popular platforms for sharing deep technical insights, programming tutorials, startup stories, AI research, and software engineering experiences.

But HackerNoon isn't the only place where high-quality technical content lives.

Whether you're looking to publish your own articles, grow your personal brand, or simply discover great engineering content, here are the best HackerNoon alternatives.

1. Medium

Best for: General technology, AI, startups, and software engineering

Medium is one of the largest publishing platforms on the internet. Thousands of developers write about programming, cloud computing, cybersecurity, AI, and entrepreneurship.

Pros

Massive audience
Easy publishing
Supports technical formatting
Great SEO

Best if: You want maximum exposure.

2. DEV Community (dev.to)

Best for: Programming tutorials and developer experiences

DEV Community is one of the friendliest places for developers to share knowledge. Articles range from beginner tutorials to advanced architecture discussions.

3. Hashnode

Best for: Building your own developer blog

Hashnode lets you publish on your own custom domain while benefiting from an active developer community.

Why developers love it

Free custom domain support
Great Markdown editor
Fast SEO indexing
Developer-focused audience

4. DZone

Best for: Enterprise software development

DZone focuses on professional software engineering topics such as:

Java
Spring Boot
Microservices
Cloud Computing
Databases
DevOps

Unlike HackerNoon, articles go through editorial review.

5. InfoQ

Best for: Senior engineers and software architects

InfoQ publishes high-quality technical articles about:

Software architecture
Distributed systems
Kubernetes
AI
Performance engineering

Content is editorially curated, making it one of the most respected engineering publications.

6. The New Stack

Best for: Cloud-native technologies

Topics include:

Kubernetes
Docker
Linux
Cloud Infrastructure
Platform Engineering
AI Infrastructure

If you work with modern cloud technologies, this should be on your reading list.

7. freeCodeCamp News

One of the largest programming education platforms.

You'll find:

Complete programming guides
Career advice
Web development tutorials
Machine learning
Open-source projects

Perfect for beginners and experienced developers alike.

8. CodeProject

One of the oldest programming communities on the web.

Great for:

C#
C++
.NET
Desktop development
Algorithms

If you're a Microsoft stack developer, you'll probably enjoy CodeProject.

9. Java Code Geeks

As the name suggests, this site focuses on:

Java
Spring Boot
JVM
Kafka
Maven
Gradle

Ideal for backend developers.

10. KDnuggets

A must-read if you're interested in:

Artificial Intelligence
Machine Learning
Data Science
LLMs
Analytics

11. Towards AI

One of the fastest-growing AI publications.

12. Towards Data Science

Hosted on Medium, this publication features in-depth articles on:

Python
Deep Learning
Statistics
Data Engineering
LLMs

13. CSS-Tricks

A classic resource for frontend developers.

Topics include:

CSS
HTML
JavaScript
Accessibility
UI Design

14. Smashing Magazine

One of the highest-quality web development magazines covering:

UX
Frontend
Performance
Accessibility
Design Systems

15. Daily.dev

Unlike the others, Daily.dev aggregates the best developer articles from across the internet into one personalized feed.

It's an excellent way to discover new writers and publications.

16. Substack

If your goal is building a personal audience, Substack lets you publish articles and newsletters directly to subscribers.

Many experienced engineers have moved to Substack to create independent technical publications.

Which Platform Should You Choose?

Goal	Best Choice
Reach the largest audience	Medium
Join an active developer community	DEV Community
Own your personal blog	Hashnode
Enterprise software engineering	DZone
Software architecture	InfoQ
Cloud & Kubernetes	The New Stack
AI & Machine Learning	Towards AI
Data Science	Towards Data Science
Frontend development	CSS-Tricks
Long-term personal brand	Substack

Final Thoughts

HackerNoon remains one of the best places to publish technical content, but it's far from the only option. Depending on your goals, you may benefit from publishing across multiple platforms.

For example:

Write tutorials on DEV Community.
Publish long-form technical articles on Medium.
Build your personal brand with Hashnode or Substack.
Submit enterprise-focused content to DZone or InfoQ.

The best strategy is not to choose just one platform—it's to consistently create valuable content and share it where your target audience spends time.

What other developer publishing platforms do you recommend? Share your favorites in the comments!

How to Create a Simple Widget in Odoo 19

RayMiles — Wed, 15 Apr 2026 09:25:43 +0000

Odoo 19 uses the OWL (Odoo Web Library) framework for building frontend components. Widgets are reusable UI elements that allow you to customize how fields are displayed and interacted with in the interface.

This guide explains how to create a simple custom field widget.

1. Create a Custom Module

Start by generating a new module:

odoo-bin scaffold my_widget_module addons/

The structure will look like:

my_widget_module/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       ├── xml/
│       └── css/

2. Update the Manifest

Edit __manifest__.py and include your assets:

'assets': {
    'web.assets_backend': [
        'my_widget_module/static/src/js/my_widget.js',
        'my_widget_module/static/src/xml/my_widget.xml',
        'my_widget_module/static/src/css/my_widget.css',
    ],
},

3. Create the Widget (OWL Component)

Create the file:

static/src/js/my_widget.js

/** @odoo-module **/

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyWidget extends Component {

    get value() {
        return this.props.record.data[this.props.name] || "No value";
    }
}

MyWidget.template = "my_widget_module.MyWidget";

registry.category("fields").add("my_widget", {
    component: MyWidget,
    supportedTypes: ["char"],
});

4. Create the Template

Create:

static/src/xml/my_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates>

    <t t-name="my_widget_module.MyWidget" owl="1">
        <div class="o_my_widget">
            <span t-esc="value"/>
        </div>
    </t>

</templates>

5. Use the Widget in a View

Apply the widget to a field in your XML view:

<field name="name" widget="my_widget"/>

Example:

<record id="view_form_example" model="ir.ui.view">
    <field name="name">example.form</field>
    <field name="model">res.partner</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field name="name" widget="my_widget"/>
                </group>
            </sheet>
        </form>
    </field>
</record>

6. Add Optional Styling

Create:

static/src/css/my_widget.css

.o_my_widget {
    color: blue;
    font-weight: bold;
}

7. Restart and Upgrade

Run:

./odoo-bin -u my_widget_module -d your_db

Then refresh your browser using a hard reload.

Key Concepts

Widgets in Odoo 19 are OWL components.
Field values are accessed using:

  this.props.record.data[this.props.name]

The widget must be registered in the fields registry.
supportedTypes defines which field types the widget can handle.

Conclusion

Creating a widget in Odoo 19 involves defining an OWL component, linking it to a template, registering it, and using it in a view. With this structure, you can extend the widget to include interactivity, backend communication, or more advanced UI behavior.

Setting Up Nerd Fonts in Alacritty on Ubuntu

RayMiles — Wed, 04 Mar 2026 14:29:00 +0000

1. Download & Install the Nerd Font

# Create fonts directory
mkdir -p ~/.local/share/fonts

# Download JetBrainsMono Nerd Font (or any you prefer)
wget https://github.com/ryanoasis/nerd-fonts/releases/latest/download/JetBrainsMono.zip

# Unzip
unzip JetBrainsMono.zip -d ~/.local/share/fonts/JetBrainsMono

# Refresh font cache
fc-cache -fv

2. Verify the Exact Font Name

fc-list | grep -i "JetBrains"

You should see output like:

~/.local/share/fonts/JetBrainsMono/JetBrainsMonoNerdFont-Regular.ttf: JetBrainsMono Nerd Font:style=Regular
~/.local/share/fonts/JetBrainsMono/JetBrainsMonoNerdFontMono-Regular.ttf: JetBrainsMono Nerd Font Mono:style=Regular

✅ Use → JetBrainsMono Nerd Font
❌ Avoid → JetBrainsMono Nerd Font Mono

3. Configure Alacritty

# Create config directory if it doesn't exist
mkdir -p ~/.config/alacritty

# Open config file
nano ~/.config/alacritty/alacritty.toml

Add this to the file:

[font]
size = 13.0

[font.normal]
family = "JetBrainsMono Nerd Font"
style = "Regular"

[font.bold]
family = "JetBrainsMono Nerd Font"
style = "Bold"

[font.italic]
family = "JetBrainsMono Nerd Font"
style = "Italic"

[font.bold_italic]
family = "JetBrainsMono Nerd Font"
style = "Bold Italic"

Save with Ctrl+O → Enter → Ctrl+X

4. Install Alacritty (if not yet installed)

# Ubuntu 22.04+
sudo apt install alacritty

# Or via snap
sudo snap install alacritty --classic

5. Restart Alacritty

# Simply close and reopen, or:
alacritty &

That's it! Your icons in tools like Starship, lsd, eza, or Neovim should now render at full size. 🎉

[Boost]

RayMiles — Sat, 14 Feb 2026 20:39:54 +0000

Ghassen Ben Hadj Lassoued

Dec 28 '25

Computekit — Reusable heavy computations for JS & React

#react #webassembly #performance #typescript

1 min read

DEV Community: RayMiles

Mastering QWeb PDF Reports in Odoo 19: From Beginner to Advanced

Introduction

How Odoo Generates a PDF

Project Structure

Step 1 — Create the Report Action

Step 2 — Create the QWeb Template

Understanding Every XML Tag

web.html_container

web.external_layout

div.page

Accessing Data

Displaying Fields

t-field vs t-out

t-field

t-out

Creating Tables

Conditional Rendering

Images

Barcodes

QR Codes

Custom Paper Formats

Passing Extra Data from Python

Calling Reports from Python

Reusable Templates

Multilingual Reports

RTL Support

Performance Tips

Common Mistakes

Debugging Checklist

Best Practices

Conclusion

16 Websites Like HackerNoon Every Developer Should Know

1. Medium

Pros

2. DEV Community (dev.to)

Popular topics

3. Hashnode

Why developers love it

4. DZone

5. InfoQ

6. The New Stack

7. freeCodeCamp News

8. CodeProject

9. Java Code Geeks

10. KDnuggets

11. Towards AI

12. Towards Data Science

13. CSS-Tricks

14. Smashing Magazine

15. Daily.dev

16. Substack

Which Platform Should You Choose?

Final Thoughts

How to Create a Simple Widget in Odoo 19

1. Create a Custom Module

2. Update the Manifest

3. Create the Widget (OWL Component)

4. Create the Template

5. Use the Widget in a View

6. Add Optional Styling

7. Restart and Upgrade

Key Concepts

Conclusion

Setting Up Nerd Fonts in Alacritty on Ubuntu

1. Download & Install the Nerd Font

2. Verify the Exact Font Name

3. Configure Alacritty

4. Install Alacritty (if not yet installed)

5. Restart Alacritty

[Boost]

Computekit — Reusable heavy computations for JS & React

`web.html_container`

`web.external_layout`

`div.page`

`t-field` vs `t-out`