Visualise Customer Profitability with QWeb Reports

QWeb Reports in Odoo 17

by Sajjad Hussain

A clear understanding of customer profitability is essential for driving effective business strategies. Odoo 17, an open-source ERP system, offers various tools for data analysis and reporting. This article explores how to utilise QWeb reports in Odoo 17 to create visualisations that reveal key insights into customer profitability.

Numla: Empowering Data-Driven Decisions

Data is the cornerstone of effective business strategies, and Numla empowers clients with robust solutions like Odoo to extract valuable insights from their data. This blog post demonstrates how to create a custom QWeb report in Odoo 17, specifically focusing on customer profitability analysis and data visualisation.

Building the Customer Profitability Report

Here's a breakdown of the steps involved:

1. Data Fetching

Use Odoo's ORM (Object Relational Mapper) to retrieve relevant customer data from the database. This data might include revenue, gross profit margin, and receivable ageing details.

2. Data Processing and Formatting

Calculate and format the data in a way suitable for visualisation. For example, you might need to convert monetary values to a specific format or calculate percentages.

3. QWeb Report Structure

Define the structure of your QWeb report using XML and CSS. This includes creating a basic layout with headers, tables, and styling elements.

4. Data Binding

Use Odoo's templating engine to bind the fetched data to specific elements in the QWeb report. This allows dynamic content generation based on the retrieved data.

5. Visualisation with Charts

The following code uses colour bars for visualisation, but you can enhance your QWeb report by integrating other chart libraries or custom methods for more interactive and dynamic visualisations.

<tr>
  <th style="width:20%; border-bottom: solid 1px; background-color:#BEE9FA; text-align:left;" class="sketch_horizontal" scope="row">
    <span t-esc="data['x_plan']" style="color: #32CD32;">data['x_plan']</span>:
  </th>
  <td style="border-bottom: solid 1px; width:33%; text-align: left !important; vertical-align: middle !important;">
    <span class="draw_horizontal" t-attf-style="background-color: lightblue; margin-left:10px; width:{{data['sketched']}}%; text-align: left !important; vertical-align: middle !important;" style="color: #FF69B4;">
      <b style="text-align:center !important;">
        <span class="div-bb" style="text-align:center !important; color: #FF6347;" t-esc="str('{:.2f}'.format(int(data['revenue'] ) * 100) / 100)) if is_absolute_numbers else int(data['revenue'])*100)/100">
          str('{:.2f}'.format(int(data['revenue'] ) * 100) / 100)) if is_absolute_numbers else int(data['revenue'])*100)/100
        </span>
      </b>
    </span>
  </td>
  <td style="border-bottom: solid 1px; text-align: center !important; vertical-align: middle !important;">
    <t t-esc="int(data['margin_percentage']*100)/100" style="color: #32CD32;">int(data['margin_percentage']*100)/100</t>
  </td>
</tr> 

<style>
.draw_horizontal {
    width: 25%;
    font-weight: normal;
    text-align: right;
}
.sketch_horizontal {
    position: relative;
    display: block;
    height: 30px;
    background: #83C6BF;
    border: 1px solid #83C6BF;
}
.black {
    font-family: full-Black !important;
    /*font-weight: bold;*/
}
.table-border {
    border: 1px solid #808080 !important;
}
table {
    margin-bottom: 3px !important;
}
.table tr td {
    padding: 0.1rem 0.1rem !important;
}
.div-un-bordered {
    position: relative;
    background-color: lightblue;
    /* Optional: Background color for visibility */
    overflow: visible;
    /* Ensures that overflowing content is visible */
}
.div-bordered {
    position: absolute;
    left: 50%;
    background-color: transparent;
    /* Optional: Background color for visibility */
}
</style>

Code Breakdown

The provided code snippet demonstrates data binding and styling techniques in QWeb. Here's a basic explanation:

CSS classes

Classes like th_horizontal and sp_horizontal define styles for table headers and progress bars.

Data Binding

Using t-esc within elements allows displaying data retrieved from the data list.

Conditional Formatting

The code snippet showcases conditional formatting to display percentages and potentially format currency values.

Note: This blog post is a suggestion based on the provided code snippet and general QWeb report development practices. You might need to modify it to perfectly reflect your specific report structure and functionalities.​

Benefits of Visualising Customer Profitability​

Visualising customer profitability data offers several advantages:

Identify Top Revenue Generators

Easily identify customers contributing the most revenue.

Analyse Gross Profit Margins

Gain insights into profitability levels for different customer segments.

Understand Receivable Aging

Monitor outstanding receivables and potential cash flow issues.

Data-Driven Decision Making

Visualised reports empower you to make informed decisions regarding customer segmentation, pricing strategies, and resource allocation.

Going Beyond the Basics​

This blog post provides a foundational understanding of creating customer profitability reports in Odoo 17. Here are some additional considerations:

Advanced Charts and Graphs

Explore integrating custom chart libraries for more visually appealing and interactive reports.

Dynamic Filters

Allow users to filter data based on specific criteria within the report itself.

Drill-down Functionality

Implement drill-down features to analyse data at a more granular level.

Conclusion​

Numla empowers businesses to unlock the full potential of Odoo 17. We can assist you in building custom QWeb reports tailored to your specific needs. By leveraging data visualisation techniques, you can gain valuable insights into customer profitability and make informed decisions that drive business growth.

Need Help with Data Visualisation Reports?

We can assist with creating custom data visualisation reports in Odoo.

Contact Us Today

Share

Change the XML of Odoo Using lxml Tree Parser