How to display additional count near progress bar in Enquiry Screen?

Question

I am working on Odoo 18 and need to modify the Enquiry Screen to display additional counts near the progress bar. The current progress bar already shows the Expected Revenue, but I want to add more details for better visibility.

Requirements

CHECK THIS IMAGES 👇

Current view

Expected View

For the "NEW" Stage: The display format should be:

525K - 12 (10)

525K → Expected Revenue (already displayed)

12 → Total Enquiries for the Year

(10) → Count of enquiries currently in this stage

For all other stages: The display format should be:

525K - 6

6 → Count of enquiries currently in this stage

My Questions

1. Where should I modify the code to achieve this?
2. Should it be done in a custom module, or can it be handled via the XML views?
3. How can I fetch and display these counts dynamically for each stage in Odoo 18?
4. If it needs changes in OWL JS, how should I approach updating the progress bar component?

What I Have Tried

I checked the model (crm.lead or similar) but didn’t find an existing field that directly provides the total count of enquiries per year.

I explored the OWL JS components but am unsure how to modify the display logic near the progress bar.

Answer 1

To display an additional count near the progress bar in Odoo 18's Enquiry Screen, follow these steps:

1. Template Inheritance:
   Extend the existing ColumnProgress template from the crm module using XML. This allows you to inject custom elements into the progress bar's structure.

2. XPath Positioning:
   Use an XPath expression to target the <AnimatedNumber> element (which displays the current value) and insert your additional count after it.

3. Manifest Configuration:
   Ensure your module's __manifest__.py declares a dependency on crm and loads the XML asset in the backend.

---

Code Solution:

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <!-- Inherit and extend the CRM progress bar template -->
    <t t-inherit="crm.ColumnProgress" t-inherit-mode="extension">
        <!-- Insert additional count after the AnimatedNumber element -->
        <xpath expr="//AnimatedNumber" position="after">
            <span class="ml-2">
                <!-- Replace 'your_field' with the actual field name -->
                #######
            </span>
        </xpath>
    </t>
</templates>

---

Manifest File (__manifest__.py):

{
    # ... other manifest keys
    'assets': {
        'web.assets_backend': [
            'your_module/static/src/xml/your_template.xml',  # XML asset path
        ],
    },
    # ... other manifest keys
}