Odoo Dashbaord Using OWL - ORM & Action Service

In this tutorial, we are going to retrieve data from the database and replace the static values using only pure javascript. If you haven't watch the first tutorial, you can watch this video Open https://youtu.be/CJvaY-VGqwk to have a better understanding.

Prepare the Component States

Let's start doing the KpiCard component. Currently, we added several props with static values, but in order to make the user interface re-render if the values and percentage has been changed, we need to use useState from OWL and call it under setup method. We need to add a new state quotations with value and percentage property. Let's add the initital state with same values in the xml template.

Since we have a date filter, we can also add initial state period as 90 days and use t-model to automatically map this state to the selection field.

Then in the template, let's replace the value to state.quotations.value and the percentage to state.quotations.percentage.

Retrieve and Render Data using ORM Service

Retrieve Quotations Data

But this is still static data, so let's proceed retrieving records from the database. We are going to use useService hook to call an action service and onWillStart from owl to initialize the state before rendering the data to the DOM.

Create three methods, getQuotations in retrieving data using ORM service, onChangePeriod to update period state and getDates to getting the current date and previous date for comparison. For dates, Odoo uses momentjs out of the box so we can easily manipulate our date filter based on our needs.

Retrieve Orders Data

Then for orders, we can just copy the same method, and rename it to getOrders. But instead of state in sent or draft, make it sale or done. And instead of quotations, rename it as orders.

In order to not define another state in setup method, we can actually create it immediately here provided that the value will be stored as an object. For revenues and percentage, we are going to use readGroup method and add aggregation as sum for revenues and avg for percentage.

Add Action Service

Lastly, let's add action service to each KPI with different views, context and domain based on the filter. We need three methods - viewQuotations, viewOrdrers and viewRevenues.

There are several options on how we can use action service. The simpliest way is to just pass the name of the window action.

However, in case of sales order model, there are more than one list view. In this tutorial, we need get the quotations list view. The second option is to create a new window action and select the list view we want.

This is okay, but we have a dynamic date filter and we can't just add this to a window action in xml template. But don't worry, we can use the option below by specifying the view id and domain. Basically, it's the same method when we are calling window action in python.

For Orders and Revenues, we can just simply copy viewQuotations method by just replacing the state to sale and done nad list of action views.

Under sales dashboard template, we need to add on onClick event to each KPI card. Since this is a component, we need to pass the method to the kpi card sub component. To achieve that, we define a new props onClick and use bind method to pass viewQuotations, viewOrders and viewRevenues method to each KPI's.

Now under KPI Card component, let's define a on click event which will be an arrow function so that it will not get executed immediately and call props.onClick()

Video Tutorial

To better understand Odoo Dashbaord Using OWL - ORM & Action Service, kindly check this video version of this tutorial.

Odoo Dashbaord Using OWL - ORM & Action Service

Read next article

Odoo Dashbaord Using OWL - ORM & Action Service
Learn more

Odoo Dashbaord Using OWL - ORM & Action Service