Enable Dark Mode!
how-to-create-a-dashboard-in-odoo-17.jpg
By: Anagha C

How to Create a Dashboard in Odoo 17

Technical Odoo 17

Dashboards are useful for quickly summarising crucial information and centralizing corporate data. This is employed to chart the organization’s overall performance. For this, various visualization techniques, such as diagrams, charts, and other kinds of representation.

In Odoo, dashboards are essential to developing a user-friendly platform for effective data management. Now, let's look at how to set up a dashboard in Odoo17.

Client actions are used in rendering the dashboard, with these actions typically activated through menu items.

The client action that renders the dashboard is defined as follows:

<record id="crm_dashboard_action"      model="ir.actions.client">
   <field name="name">CRM Dashboard</field>
   <field name="tag">crm_dashboard_tag</field>
</record>

<menuitem name="Dashboard" id="crm_dashboard"       sequence="0" action="crm_dashboard_action" parent="crm.crm_menu_root"/>

name= ”name” is the name of the record that name will show when we open the dashboard.

name= ”tag” is the tag that will connect the js file with our action.

Here, clicking the menu item "Dashboard" crm_dashboard_action will trigger, and the JS file will then be connected to the action by the tag "crm_dashboard_tag."

After that, a component representing the client's action has to be created.

Create a js file on the static > src > js > dashboard.js

/**@odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from  "@odoo/owl";
const actionRegistry = registry.category("actions");
class CrmDashboard extends Component {}
CrmDashboard.template = "my_module.CrmDashboard";
//  Tag name that we entered in the first step.
actionRegistry.add("crm_dashboard_tag", CrmDashboard);

We can get a blank dashboard view on the user interface.

Next, we have to create a template to show the view of the template. 

Create an XML file on the static > src > xml > dashboard.xml
<?xml version="1.0" encoding="UTF-8" ?>
<templates>
    <t t-name="my_module.CrmDashboard">
        <div class="">
            <div>
                <center>
                    <h1 style="margin:20px;">
                    Crn Dashboard</h1>
                </center>
            </div>
        </div>
    </t>
</templates>

Don't forget to include all of these files in the manifest when they have been defined;

'assets': {
        'web.assets_backend': [
            'my_module/static/src/js/dashboard.js', 
            'my_module/static/src/xml/dashboard.xml',
        ],
    },

Now we can see as follows.

How to Create a Dashboard in Odoo 17-cybrosys

Now, let us see how to add tile to the dashboard.     

   <div class="row main-section" style="margin-left: 120px;">
<!--            Lead Tile-->
            <div id="leads" class="col-md-4 col-sm-6 tot_tasks oh-payslip"
                 style=" overflow: hidden; padding-top: 30px;">
                <div class="oh-card" style="box-shadow:2px 4px 8px 2px rgba(0,0,0.3,0.2);
                display: flex; justify-content: center;" role="button">
                    <div class="oh-card-body"
                         style="padding: 5px 5px; float: left; width: 100%;
                          height: auto; box-sizing: border-box; margin: 0;">
                        <div class="stat-widget-one">
                            <div class="stat-icon bg-mauve-light d-flex justify-content-left align-items-left">
                                <div style="background:#ff4d94; width:65px; text-align: center;">
                                    <i class="fa fa-tasks text-mauve"
                                       style="font-size:50px;"/>
                                </div>
                                <div class="stat_content" style="
                                  text-align: center; font-weight: bold;
                                  padding-top: 20px; padding-left: 80px;">
                                    <div class="stat_count_lead"
                                         style="font-size: 17px;">
                                        <span id="templates">
                                             <div id="my_lead"/>
                                        </span>
                                    </div>
                                    <div class="stat-head"
                                         style="font-size: 14px;">My Leads
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--       Opportunity Tile-->
            <div id="opportunity" class="col-md-4 col-sm-6 tot_tasks oh-payslip"
                 style=" overflow: hidden; padding-top: 30px;">
                <div class="oh-card" style="box-shadow:2px 4px 8px 2px rgba(0,0,0.3,0.2);
                display: flex; justify-content: center;" role="button">
                    <div class="oh-card-body"
                         style="padding: 5px 5px; float: left; width: 100%;
                          height: auto; box-sizing: border-box; margin: 0;">
                        <div class="stat-widget-one">
                            <div class="stat-icon bg-mauve-light d-flex justify-content-left align-items-left">
                                <div style="background:yellow; width:65px; text-align: center;">
                                    <i class="fa fa-trophy  text-mauve"
                                       style="font-size:50px;"/>
                                </div>
                                <div class="stat-content" style="
                                  text-align: center; font-weight: bold;
                                  padding-top: 20px; padding-left: 80px;">
                                    <div class="stat_count_opp"
                                         style="font-size: 17px;">
                                        <span id="templates">
                                             <div id="my_opportunity"/>
                                        </span>
                                    </div>
                                    <div class="stat-head"
                                         style="font-size: 14px;">My Opportunity
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            Expected Revenue -->
            <div id="expected_revenue"
                 class="col-md-4 col-sm-6 tot_tasks oh-payslip"
                 style=" overflow: hidden; padding-top: 30px;">
                <div class="oh-card" style="box-shadow:2px 4px 8px 2px rgba(0,0,0.3,0.2);
                display: flex; justify-content: center;" role="button">
                    <div class="oh-card-body"
                         style="padding: 5px 5px; float: left; width: 100%;
                          height: auto; box-sizing: border-box; margin: 0;">
                        <div class="stat-widget-one">
                            <div class="stat-icon bg-mauve-light d-flex justify-content-left align-items-left">
                                <div style="background:#bf80ff;; width:65px; text-align: center;">
                                    <i class="fa fa-usd  text-mauve"
                                       style="font-size:50px;"/>
                                </div>
                                <div class="stat-content" style="
                                  text-align: center; font-weight: bold;
                                  padding-top: 20px; padding-left: 80px;">
                                    <div class="stat_count_ex_rev"
                                         style="font-size: 17px;">
                                        <span id="templates">
                                             <div id="revenue"/>
                                        </span>
                                    </div>
                                    <div class="stat-head"
                                         style="font-size: 14px;">Expected
                                        revenue
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

The data to the dashboard is fetched from the js file using Orm. call method  as follows:

/**@odoo-module **/
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Component } from  "@odoo/owl";
const actionRegistry = registry.category("actions");
class CrmDashboard extends Component {
   setup() {
         super.setup()
         this.orm = useService('orm')
         this._fetch_data()
   }
   _fetch_data(){
   var self = this;
  this.orm.call("crm.lead", "get_tiles_data", [], {}).then(function(result){
           $('#my_lead').append('<span>' + result.total_leads + '</span>');
           $('#my_opportunity').append('<span>' + result.total_opportunity + '</span>');
           $('#revenue').append('<span>' + result.currency + result.expected_revenue + '</span>');
           });
       };
}
CrmDashboard.template = "my_module.CrmDashboard";
//  Tag name that we entered in the first step.
actionRegistry.add("crm_dashboard_tag", CrmDashboard);

As you can see, the function get_tiles_data() is used to get the data from the model ‘crm.lead’.The code will be like this:

class CrmLead(models.Model):
    """crm inherited model"""
    _inherit = 'crm.lead'
    @api.model
    def get_tiles_data(self):
        """ Return the tile data"""
        company_id = self.env.company
        leads = self.search([('company_id', '=', company_id.id),
                             ('user_id', '=', self.env.user.id)])
        my_leads = leads.filtered(lambda r: r.type == 'lead')
        my_opportunity = leads.filtered(lambda r: r.type == 'opportunity')
        currency = company_id.currency_id.symbol
        expected_revenue = sum(my_opportunity.mapped('expected_revenue'))
        return {
            'total_leads': len(my_leads),
            'total_opportunity': len(my_opportunity),
            'expected_revenue': expected_revenue,
            'currency': currency,
        }

The decorator @api.model is used to declare the function. After doing this, the view will display the tiles we created.

How to Create a Dashboard in Odoo 17-cybrosys

You can use personalized designs and styles here if you want to. However, this is a simple dashboard, we can customize it with other graphical displays and additions based on our needs.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message