�ݺ�ߣ

How to Create & Manage
a Dashboard Using OWL
in Odoo 17
Enterprise

Introduction
Enterprise
A dashboard in Odoo is a user interface feature that provides a visual
overview of key performance indicators (KPIs), metrics, and important data
points relevant to a business. Dashboards are designed to present this
information in an easy-to-read format, often using charts, graphs, and
tables, to help users quickly assess the state of their business and make
informed decisions.
For the comprehensive data from the modules of Odoo, the use of
dashboard is really important to show only the brief and precise data as
reports in a single click

Enterprise
Dashboards are created and managed in Odoo 17 using Client actions
which involves a combination of XML and JavaScript to define custom
behavior and visualizations. Here’s a step-by-step guide to creating a
custom dashboard using client actions:
● Define the Client Action in xml
● Create a Menu Item to access your custom dashboard
● Implement the client action using JavaScript which defines how
the dashboard is loaded and displayed
● Create the dashboard view in XML which will define the layout and
elements of the dashboard.

Enterprise
We can create a custom module named dashboard_custom to show
the count of purchase orders in different states. The xml code to create
the client action and the new menu is as
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>

<record id="action_dashboard_purchase" model="ir.actions.client">
<field name="name">Purchase</field>
<field name="tag">purchase_dashboard</field>
</record>
<menuitem id="menu_purchase_dashboard" name="Dashboard"
action="action_dashboard_purchase"
sequence="-1"/>
</odoo>
The client action is defined with the tag attribute as purchase_dashboard. It is
with this tag we need to define the javascript and add it in the registry.
The menu is created without any parent, so it will be shown with the Odoo’s
default icon and will be named as ‘Dashboard’

Enterprise
And the menu will be shown as :

Enterprise
Now create a template in the path static/src/dashboard/purchase_dashboard.xml.
<templates xml:space="preserve">
<div t-name="purchase_dashboard.PurchaseDashboard" owl="1" class="">
<PurchaseCard
purchase_order_count="purchase_order_count.all_purchase_order"
rfq="purchase_order_count.rfq"
rfq_sent="purchase_order_count.rfq_sent"
to_approve="purchase_order_count.to_approve"
purchase="purchase_order_count.purchase"
done="purchase_order_count.done"
cancel="purchase_order_count.cancel"/>
</div>
</templates>

Enterprise
For the model ‘purchase. order’ define the function get_purchase_order_count() to fetch
the data from the backend.
The Python code will be
from odoo import api, models
class PurchaseOrder(models.Model):
_inherit = 'purchase.order'
@api.model
def get_purchase_order_count(self):
purchase_order_count = {
'all_purchase_order': len(self.env['purchase.order'].search([])),
'rfq': len(self.env['purchase.order'].search([("state", "=", "draft")])),
'rfq_sent': len(self.env['purchase.order'].search([("state", "=", "sent")])),
'to_approve': len(self.env['purchase.order'].search(
[("state", "=", "to approve")])),
'purchase': len(self.env['purchase.order'].search(
[("state", "=", "purchase")])),
'done': len(self.env['purchase.order'].search([("state", "=", "done")])),
'cancel': len(self.env['purchase.order'].search([("state", "=", "cancel")])),
}
return purchase_order_count

Enterprise
Here, for the dictionary purchase_order_count the keys like
all_purchase_order, rfq, rfq_sent, to_approve, etc is assigned with
the count of the records in purchase order which are in the
corresponding states.
Then, once these method is called from the js file using orm.call(),
the dictionary will be returned and passed to the template that is
called from js. We’ll see the codes for this in the coming slides

Enterprise
Let’s define the javascript file under the path static/src/dashboard/purchase_dashboard.js.
/* @odoo-module */
import { PurchaseCard } from './purchase_card';
import { useBus, useService } from "@web/core/utils/hooks";
import {registry} from '@web/core/registry';
const { Component, useState, onWillStart } = owl;
export class PurchaseDashboard extends Component {
setup() {this.orm = useService("orm");
onWillStart(async () => {
await this.loadDashboardData();
});}
async loadDashboardData() {
const context = {};
this.purchase_order_count = await this.orm.call(
'purchase.order',
'get_purchase_order_count',[],
{context: context});}
}
registry.category("actions").add("purchase_dashboard", PurchaseDashboard);
PurchaseDashboard.components = { PurchaseCard };
PurchaseDashboard.template = 'purchase_dashboard.PurchaseDashboard';

Enterprise
Here, the first import of PurchaseCard is done from the file
purchase_card in the same directory of the module.
Then after importing other hooks and registry, we define the class
PurchaseDashboard and define the method loadDashboardData().
Inside this method, we use the orm.call() to call the remote method of
the model from the backend. Here, from the model purchase.order,
we call the custom method get_purchase_order_count(). The value
returned from that method is passed as context
Then, this class is saved in the registry with the earlier xml defined tag
name purchase_dashboard. And its components is set as
PurchaseCard which we are going to discuss.

Enterprise
Under the same directory dashboard of the module, let’s create the file
purchase_card.js
/* @odoo-module */
import {registry} from '@web/core/registry';
const { Component } = owl;
export class PurchaseCard extends Component {}
PurchaseCard.template = 'purchase_dashboard.PurchaseCard';
PurchaseCard.props = ['purchase_order_count', 'rfq',
'rfq_sent','to_approve','purchase','done','cancel'];
Here, we define the class PurchaseCard from Component of owl and set the
dashboard tag’s template as a new template named PurchaseCard that we
are going to design.
The class’s props are assigned with the needed parameters passed from the
PurchaseDashboard template.

Enterprise
Let’s design the PurchaseCard template by starting with a nice heading
and description as we need. Here, we’ve started like
<templates xml:space="preserve">
<div t-name="purchase_dashboard.PurchaseCard" owl="1" style="background-
color: #990000;"
class="py-3 text-odoo text-center">
<h1>PURCHASE DASHBOARD</h1>
<div style="background-color: #ffcccc ;">
<h5>No.of Purchase Orders in different states</h5>
<table class="table table-hover">
Inside the last line of defining <table>, we need to set the headings
<thead> and content <body> for it.

Enterprise
<thead>
<tr> <th>STATE</th> <th>COUNT</th> </tr>
/thead>
<tbody>
<tr><td>RFQ</td> <td><t t-esc="props.rfq"/></td></tr>
<tr><td>RFQ Sent</td> <td><t t-esc="props.rfq_sent"/></td>
</tr>
<tr><td>To Approve</td> <td><t t-esc="props.to_approve"/></td>
</tr>
<tr><td>Purchase</td> <td><t t-esc="props.purchase"/></td>
</tr>
<tr><td>Done</td> <td><t t-esc="props.done"/></td>
</tr>
<tr><td>Cancel</td> <td><t t-esc="props.cancel"/></td>
</tr>
<tr><td>Total</td> <td><t t-esc="props.purchase_order_count"/></td>
</tr>
</tbody>
The headings STATE and COUNT will be set this and the corresponding
contents are displayed using <t t-esc> tag from the props.

Enterprise
Finally, the dashboard will look like

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

�ݺ�ߣ

How to Create & Manage a Dashboard Using OWL in Odoo 17

Recommended

More Related Content

Similar to How to Create & Manage a Dashboard Using OWL in Odoo 17 (20)

More from Celine George (20)

Recently uploaded (20)

How to Create & Manage a Dashboard Using OWL in Odoo 17