Creating a beautiful and interactive dashboard in Odoo 18 involves several steps, as Odoo allows for extensive customization through modules, views, and custom development. Here’s a step-by-step guide on how to create a modern, interactive dashboard in Odoo 18:

Step 1: Set Up Your Development Environment

Before creating a custom dashboard, ensure your Odoo development environment is ready.

1. Install Odoo 18 on your local machine or server.
2. Enable Developer Mode in Odoo:
   • Go to Settings > Activate Developer Mode (or add ?debug=1 to the URL).
3. Create a Custom Module: This will help in adding the dashboard to your Odoo instance.
   • In your Odoo installation folder, create a new directory for your custom module.

Step 2: Create the Custom Module

Create a custom module to contain the dashboard's functionality and views.

1.Create the Module Structure:

• Inside the addons folder of your Odoo instance, create a directory for your module, e.g., dashboard.
• Inside the module directory, create the following structure:

• dashboard/
     __init__.py
     __manifest__.py
      static/
         css
            style.css
         js
            dashboard.js
         xml
            dashboard_templates.xml
     views/
        dashboard_template.xml

2.Define the Manifest File (__manifest__.py): This file tells Odoo about the module’s name, dependencies, and other configurations.

{
    'name': "Dashboard",
    'version': '18.0.1.0.0',
    'category': 'Extra Tools',
    'summary': """Get a visual dashboard """,
    'description': """Dashboard module brings a multipurpose graphical""",
    'author': 'Odoo Team',
    'depends': ['crm',],
    'data': [
             'views/dashboard_views.xml',

             ],
    'assets': {
        'web.assets_backend': [
            'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js',
            'dashboard/static/src/css/style.css',
            'dashboard/static/src/js/dashboard.js',
            'dashboard/static/src/xml/dashboard_templates.xml',
        ],
    },
    'license': 'AGPL-3',
    'installable': True,
    'application': False,
    'auto_install': False,
}

Step 3: Design the Dashboard Template

In this step, you will define the HTML and the Odoo QWeb views for your dashboard.

1.Create the XML view for the dashboard (dashboard_template.xml):

<?xml version="1.0" encoding="utf-8"?>
<template>
    <t t-name="OverallDashboard">
        <div class="container-fluid" style="overflow: auto; max-height: 100%;">
            <section class="dashboard_main_section" id="main_section_login">
                <div class="row">
                    <div class="col-sm-12 mb-4">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-8">
                                <h2 class="section-header mt-5 text-danger">Dashboard
                                </h2>
                            </div>
                        </div>
                        <hr/>
                    </div>
                </div>
            </section>
        </div>
    </t>
</template>

Step 4: Create the Python Models (Optional)

If you need to collect data or apply custom logic before rendering the dashboard, create models in Python. You can use the models folder for this.

Step 5: Add Menu Item and Action

To make the dashboard accessible, you need to add a menu item and an action that will open your custom dashboard.

Add the menu and action in your views folder (dashboard_menu.xml):

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <record id="action_dashboard" model="ir.actions.client">
        <field name="name">Dashboard</field>
        <field name="tag">dashboard</field>
    </record>
    <menuitem id="dashboard_menu" name="Dashboard"
            sequence="1"
            action="action_dashboard"
     />
</odoo>

Define  JS Component to interact with the template and actions static\js\dashboard.js

/** @odoo-module **/
import {registry} from "@web/core/registry";
import {Component} from "@odoo/owl";
import {onWillStart, onMounted, useState, useRef, useEffect} from "@odoo/owl";
import {useService} from "@web/core/utils/hooks";

export class OverallDashboard extends Component {
   
}


OverallDashboard.template = 'OverallDashboard'
registry.category("actions").add("dashboard", OverallDashboard)

Step 6: Install the Module

After completing the module development, you can install the module in Odoo.

1. Go to the Odoo Apps menu and click on Update Apps List.
2. Find your custom module (e.g., Custom Dashboard) and install it.
3. You can see the dashboard in your UI (design in your template)

Learn More

1. setup Method and super.setup(...arguments);

What is setup()?

• setup() is a lifecycle method in Owl components. It's the first function that runs when a component is being initialized. You use this method to set up any state, variables, or effects that the component will use during its lifetime.

What does super.setup(...arguments) mean?

• super.setup(...arguments) is calling the setup method from the parent class (Component). Since OverallDashboard extends Component from the Owl library, calling super.setup() ensures that the component is correctly initialized with any necessary setup logic inherited from the parent Component class.
• ...arguments is a JavaScript spread syntax that ensures all the arguments that were passed to the setup() function are forwarded to the parent class’ setup() method.

2. this.state = useState({})

What is useState()?

• useState() is a reactivity hook provided by Owl. It is used to create reactive variables that will automatically update the UI when the state changes.
• The code this.state = useState({}) initializes an empty state object. This state will hold the reactive data for the component.
• Example use case:
  • If you want to display a list of sales orders in your dashboard, you could store the list of orders in this.state. When new sales orders are added, you can update the state and the UI will reflect the changes automatically.

3. onWillStart(async () => {})

What is onWillStart()?

• onWillStart() is a lifecycle hook that is called before the component is mounted to the DOM (before it is displayed to the user).
• It is often used to fetch data or perform other asynchronous actions before the component is rendered.

Why is it useful?

• You can use it to load data or prepare anything that the component needs before it’s fully rendered. For instance, if you want to fetch data from the server (e.g., a list of sales data or dashboard metrics), you can call an API or Odoo model method here.
• Example usecase:

• onWillStart(async () => {
      const salesData = await this.env.services.rpc({
          model: 'sale.order',
          method: 'search_read',
          args: [],
          kwargs: {},
      });
      this.state.salesData = salesData; // Storing data in state
  });

4. useEffect(() => {}, () => []);

What is useEffect()?

• useEffect() is another lifecycle hook. It runs after the component is mounted to the DOM and is used for side-effects, like updating the DOM, fetching data, or subscribing to external events.
• The empty array [] passed as the second argument means the effect should run only once, when the component is first mounted (similar to componentDidMount in React).

Why is it used here?

• It’s useful for actions that need to happen after the component is rendered, such as subscribing to events or initializing libraries.

Example use case:

• You might use useEffect to start a periodic refresh of the dashboard data after the component is loaded, or you might subscribe to certain events to listen for changes in data that the component depends on.

useEffect(() => {
    const intervalId = setInterval(() => {
        // Fetch updated data every 5 seconds
        fetchData();
    }, 5000);

    return () => clearInterval(intervalId); // Clean up interval on unmount
}, []); // Empty dependency array ensures it runs once

5. registry.category("actions").add("dashboard", OverallDashboard)

• This line registers the OverallDashboard component in the Odoo registry.
• category("actions") is used to register the component as an action, and the add("dashboard", OverallDashboard) binds this component to an action called "dashboard".
• This allows you to associate the custom component with a particular action in Odoo. In this case, the action "dashboard" will trigger the rendering of OverallDashboard.

• State Management (useState):
  • You would use useState() to store data like total sales, average order value, and sales data for the graph.
  • This allows you to display dynamic data that will update automatically when the state changes (e.g., when new sales data is fetched).
• Data Fetching (onWillStart):
  • You might use onWillStart() to fetch the data you need, such as the total sales for the month or sales over the last few weeks.
  • This ensures that the component is ready with the necessary data before it renders.
• UI Effects (useEffect):
  • After the component is mounted, you could use useEffect() to initialize things like a chart or a periodic refresh of data. For example, you could set up an interval to automatically refresh sales data every 10 minutes.

• setup(): Initializes the component and sets up the state and lifecycle hooks.
• useState(): Creates a reactive state to hold data for the component.
• onWillStart(): Runs before the component is rendered to fetch or prepare data asynchronously.
• useEffect(): Runs after the component is mounted to handle side-effects like data polling or event subscriptions.
• registry.category("actions").add(): Registers the component as an action in Odoo so it can be triggered and rendered.

Owl is a modern JavaScript framework used by Odoo to manage UI components and frontend logic. It is based on reactivity (state-driven) and follows a component-based architecture.