Create Odoo Custom Dashboard From Scratch

/
Odoo Dashboard/
Create Odoo Custom Dashboard From Scratch

In this tutorial, we are going to create a nice looking sales dashboard with different KPI's for quotations, orders, revenue and average order. We will also add different graphs like bar chart, line chart, pie chart and others. But your'e not limited for these charts since there are a lot more samples that you can use.

We will be using ChartJS Open https://www.chartjs.org/ Free library which is the same what Odoo is using. However, we will be implementing the latest version of ChartJS Open but in the last part of this tutorial, we will be using the same version of Odoo.

We also have date filter that you can select, and once selected, the values will also change as well as the charts will re-render. In addition, clicking each KPI or Chart will redirect you to a specific views with the correct values based on the filter.

Why Create a Custom Dashboard?

I know there's already existing dashboard in Odoo which I believe will cover most of this. However, this tutorial will be beneficial if some specific requirements are needed, like simply changing the colors of the graph, showing different KPI's in a presentable manner, or just by changing the look and feel of a dashboard that will impress your clients right?

Actually, there's a better version of this, by using Odoo Spreadsheet. The values you see above are coming from a spreadsheet module. However, you need to install the Documents module which is available only in Enterprise version. So if you're using community, you're not be able to this.

But maybe your asking, why I have a dashboard here? Well, they did this report using json format under spreadsheet_dashboard_sale module Open . For example the sale dashboard, it's under sales_dashboard.jsonOpen .

The one you see in dashboard sales and product is actually these files. If you open this files, you can see a lot of data regarding the spreadsheet. So it's impossible to just copy this code just to do the same version of Odoo enterprise.

Create New Component and Template

Before we create the component, let's first prepare the necessary files for our custom dashboard module. We need the manifest and init file just to make our module work. But we are not going to use any python code for our custom dashboard. It's pure javascript using OWL Javascript Framework and XML for the menus, client action and OWL templates.

Manifest File

__manifest__.py

py

# -*- coding: utf-8 -*-
{
    'name' : 'Owl Tutorial',
    'version' : '1.0',
    'summary': 'OWL Tutorial',
    'sequence': -1,
    'description': """OWL Tutorial Custom Dashboard""",
    'category': 'OWL',
    'depends' : ['base', 'web', 'sale', 'board'],
    'data': [
        'views/sales_dashboard.xml',
    ],
    'demo': [
    ],
    'installable': True,
    'application': True,
    'assets': {
        'web.assets_backend': [
            'owl/static/src/components/**/*.js',
            'owl/static/src/components/**/*.xml',
            'owl/static/src/components/**/*.scss',
        ],
    },
}

Menu and Client Action

views/sales_dashboard.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <data>
        <record id="action_owl_sales_dashboard" model="ir.actions.client">
            <field name="name">Sales Dashboard</field>
            <field name="tag">owl.sales_dashboard</field>
        </record>
        <menuitem name="OWL Tutorial" id="menu_owl_tutorial" sequence="10">
            <menuitem name="Sales Dashboard" id="menu_owl_sales_dashboard" sequence="10" action="action_owl_sales_dashboard"/>
        </menuitem>
    </data>
</odoo>

Dashboard Component

static/src/components/sales_dashboard.js

js

/** @odoo-module */

import { registry } from "@web/core/registry"
import { KpiCard } from "./kpi_card/kpi_card"
import { ChartRenderer } from "./chart_renderer/chart_renderer"
const { Component } = owl

export class OwlSalesDashboard extends Component {
    setup(){

    }
}

OwlSalesDashboard.template = "owl.OwlSalesDashboard"
OwlSalesDashboard.components = { KpiCard, ChartRenderer }

registry.category("actions").add("owl.sales_dashboard", OwlSalesDashboard)

Dashboard Template

static/src/components/sales_dashboard.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="owl.OwlSalesDashboard" owl="1">
        <div class="vh-100 overflow-auto bg-muted">
            <div class="row m-3">
                <div class="col-lg-7">
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h1 class="text-primary fw-bold">Custom Sales Dashboard</h1>
                                    <div>
                                        <select class="form-select">
                                            <option value="0">Select Period</option>
                                            <option value="7">Last 7 Days</option>
                                            <option value="30">Last 30 Days</option>
                                            <option value="90">Last 90 Days</option>
                                            <option value="365">Last 365 Days</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <KpiCard name="'Quotations'" value="10" percentage="6"/>
                        <KpiCard name="'Orders'" value="20" percentage="20"/>
                        <KpiCard name="'Revenues'" value="'30.50K'" percentage="-3"/>
                        <KpiCard name="'Average Order'" value="'2.5K'" percentage="-10"/>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h3 class="text-primary fw-bold">Top Products</h3>
                                    <div class="px-3 py-1 bg-primary cursor-pointer">
                                        <span class="fa fa-arrow-right text-white"/>
                                    </div>
                                </div>
                                <ChartRenderer type="'doughnut'" title="'Top Products Report'"/>
                            </div>
                        </div>
                        <div class="col-lg-6 m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h3 class="text-primary fw-bold">Top Sales People</h3>
                                    <div class="px-3 py-1 bg-primary cursor-pointer">
                                        <span class="fa fa-arrow-right text-white"/>
                                    </div>
                                </div>
                                <ChartRenderer type="'pie'" title="'Top Sales People Report'"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h3 class="text-primary fw-bold">Monthly Sales</h3>
                                    <div class="px-3 py-1 bg-primary cursor-pointer">
                                        <span class="fa fa-arrow-right text-white"/>
                                    </div>
                                </div>
                                <ChartRenderer type="'bar'" title="'Monthly Sales Report'"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h3 class="text-primary fw-bold">Partner Orders</h3>
                                    <div class="px-3 py-1 bg-primary cursor-pointer">
                                        <span class="fa fa-arrow-right text-white"/>
                                    </div>
                                </div>
                                <ChartRenderer type="'line'" title="'Partner Orders Report'"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>

Create KPI Sub Component

Since KPI cards have all the same layout, instead of creating them into the main template, it's better to create a a sub component and just import it for better code structure. Well this is the idea of components right?

KPI Card Component

KPI Card Template

static/src/components/kpi_card/kpi_card.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<templates>
    <t t-name="owl.KpiCard" owl="1">
        <div class="col-lg-3 m-0 p-0">
            <div class="shadow-sm border m-2 p-4 bg-white text-center">
                <div class="h1 fw-bold text-dark" style="font-size: 48px"><span t-esc="props.value"/></div>
                <div class="h3 text-muted"><span t-esc="props.name"/></div>
                <div class="h3 mt-5">
                    <span t-attf-class="text-#{ props.percentage > 0 ? 'success':'danger' }">
                        <span t-attf-class="me-1 fa fa-arrow-#{ props.percentage > 0 ? 'up':'down' }"/>
                        <span t-esc="props.percentage"/>%
                    </span>
                    <span> since last period</span>
                </div>
            </div>
        </div>
    </t>
</templates>

In the above Open sales dashboard componentsales dashboard component, KpiCard component has been imported and then added under components property so that it can be added easily on sales dashboard template using different props (name, value and percentage) with static values.

Add Graphs Using ChartJS

The same with KPI Cards, the graphs will have the same layout so we need to create a new component and just import it to sales dashbaord component.

Thanks to ChartJS Open https://www.chartjs.org/ free javascript library, we can easily create differnt dashboard by just simply changing the chart type. In order to load this asset, we will be using loadJS method from Odoo. If you want to learn more about using external libraries in Odoo, check this video tutorial Open https://youtu.be/pqN4oJmMRbc.

Chart Renderer Component

static/src/components/chart_renderer/chart_renderer.js

js

/** @odoo-module */

import { registry } from "@web/core/registry"
import { loadJS } from "@web/core/assets"
const { Component, onWillStart, useRef, onMounted } = owl

export class ChartRenderer extends Component {
    setup(){
        this.chartRef = useRef("chart")
        onWillStart(async ()=>{
            await loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js")
        })

        onMounted(()=>this.renderChart())
    }

    renderChart(){
        new Chart(this.chartRef.el,
        {
          type: this.props.type,
          data: {
            labels: [
                'Red',
                'Blue',
                'Yellow'
              ],
              datasets: [
              {
                label: 'My First Dataset',
                data: [300, 50, 100],
                hoverOffset: 4
              },{
                label: 'My Second Dataset',
                data: [100, 70, 150],
                hoverOffset: 4
             }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                position: 'bottom',
              },
              title: {
                display: true,
                text: this.props.title,
                position: 'bottom',
              }
            }
          },
        }
      );
    }
}

ChartRenderer.template = "owl.ChartRenderer"

Chart Renderer Template

This chart renderer component will then be imported in sales dashboard component, added as a sub component and will be called in the template with two props (types and title) to render differnt graphs easily.

static/src/components/sales_dashboard.xml

xml

<!-- ... -->
<div class="shadow-sm border m-2 p-4 bg-white">
<!-- ... -->
<ChartRenderer type="'doughnut'" title="'Top Products Report'"/>
</div>
<!-- ... -->
<div class="shadow-sm border m-2 p-4 bg-white">
<!-- ... -->
<ChartRenderer type="'pie'" title="'Top Sales People Report'"/>
</div>
<!-- ... -->
<div class="shadow-sm border m-2 p-4 bg-white">
<!-- ... -->
<ChartRenderer type="'bar'" title="'Monthly Sales Report'"/>
</div>
<!-- ... -->
<div class="shadow-sm border m-2 p-4 bg-white">
<!-- ... -->
<ChartRenderer type="'line'" title="'Partner Orders Report'"/>
</div>
<!-- ... -->

Conclusion

Alright, so right now we have already created the layout of the sales dashboard. With only a few codes, we are able to reuse these components as many as we want.

For the next tutorial, we are going to add data to each graph based on the values from the database as well as the values for this 4 KPI's with the date filter and if selected any of the filters, the values will automatically change as well as the graph values.

Video Tutorial

To better understand Create Odoo Custom Dashboard From Scratch, kindly check this video version of this tutorial.