Any activity that is totally implemented on the client side is started by a client action. Using a client action has several advantages, one of which is the simplicity with which fully customized interfaces can be made. An OWL component normally defines a client action; alternatively, we can leverage the web framework and services, core components, hooks, etc.
Simple XML menu items compensate for client actions with corresponding widget actions. Here, we'll examine the process of adding a menu to the order's menu in sales. taking the sales orders from the menu, showing them, and then using them.
Add a menu to the views/views.xml file in the directory of the view to continue.
Filename: dashboard_views.xml
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<!-- The client action record to view the Show the Screen-->
<record id="model_name_view_action" model="ir.actions.client">
<field name="name">Action Name</field>
<field name="tag">Model_name_tags</field>
</record>
<menuitem id="model_name_view_menu_action" action="model_name_view_action"
parent="parent_model_name.parent_menu_id"
sequence="0"/>
</odoo>
If you use the parent menu for adding the action then we can use the parent parameter in the menu items and you can give the proper menu id based on the model.
In the ir.actions.client model, I am going to add a Dashboard action (we may give it whatever name we choose). The tag used in the widget to load or call the action mentioned in the widget, dashboard_tags, was also added when the menu was clicked. The indicated action (JS file) of the widget will be loaded or called with the help of this tag.
The target field can be used to perform any other action, open a pop-up window, or change the view size (Client Action). I received it brand-new, and I handed it to you. The client action will consequently appear as a pop-up window.
Filename: dashboard_action.js
/** @odoo-module */
import { loadBundle } from "@web/core/assets";
var AbstractAction = require('web.AbstractAction');
var core = require('web.core');
var QWeb = core.qweb;
var rpc = require('web.rpc');
var CustomDashBoard = AbstractAction.extend({// Extended abstract class to create dashboard
template: 'CustomDashBoard',
events: {
// Add events
},
init: function(parent, action) {
this._super(parent, action);
this.dashboards_templates = ['DashboardTemplates'];
},
willStart: function() {// returns the function fetch_data when page load.
var self = this;
return $.when(loadBundle(this), this._super()).then(function() {
return self.fetch_data();
});
},
start: function() {//fetch data and return render_dashboards and render_graph function
self = this;
this.set("title", 'Dashboard');
return this._super().then(function() {
self.render_dashboards();
self.render_graph();
});
},
render_dashboards: function() {//return value to show in tile.
self = this;
_.each(this.dashboards_templates, function(template) {
self.$('.o_pj_dashboard').append(QWeb.render(template, {widget: self}));
});
},
fetch_data: function() {//function to call rpc query to fetch data fom python
self = this;
var def1 = this._rpc({
model: 'model_name',
method: 'function_name'
}).then(function(result)
{
assign the values into the this.variable
});
});
return $.when(def1);
},
render_graph: function(){//Add function to load in dashboard.
this.function1();
// we can add functions here
},
function1:function(){//Function to add booking chart on the basis of customer
rpc.query({
model: "model_name",
method: "function_name1",
}).then(function (result) {
new Chart(self.$("#id(used in templates"), {
type: 'bar',
data: {
labels: result.name,
datasets: [{
label: 'Count',
data: result.count,
backgroundColor: [
"#003f5c",
"#2f4b7c",
"#f95d6a",
],
borderColor: [
"#003f5c",
"#2f4b7c",
"#f95d6a",
],
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 0,
borderWidth: 1,
type: 'bar',
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true
},
},
responsive: true,
maintainAspectRatio: false,
}
});
});
},
})
core.action_registry.add('dashboard_tags', CustomDashBoard);
return CustomDashBoard;
We are extending the Abstract Action class to create the widget. I have specified a template ('CustomDashBoard') that will be displayed when this activity is carried out.
The template ('DashboardTemplate'), which is subsequently added to the main Template's table view class (CustomDashBoard), receives the data by using the load data method from the start function to retrieve it from the Python code.
The given render_dashboards, and render_graph used in the start function we can render that functionality for the starting time.
The qweb template and the Python function file that the RPC will utilize must now be specified. Therefore, I am going to start by creating a Python file (models/filename.py).
from odoo import models, fields, api
class ClassName(models.Model):
_name = 'model_name'
@api.model
def function_name(self):
""" function to get the details"""
// we can add the conditions and codes here```A
return {
// ADD the return value here
}
In this case, I am creating a new model and implementing the function that does a simple query and adds each entry to the list that is ultimately generated.
As a result, this list will be reachable by RPC, and the qweb template will receive the information.
The template should be defined first (in static/src/xml).
Filename: dashboard_templates.xml
<?xml version="1.0" encoding="utf-8" ?>
<!--This template defines a custom dashboard for the model.-->
<template>
<t t-name="CustomDashBoard">
<!-- This template defines a custom dashboard. -->
<div class="oh_dashboards" style="margin-top: 20px;">
<div class="container-fluid o_pj_dashboard">
<!-- Your template implementation here -->
</div>
</div>
</t>
<t t-name="DashboardTemplate">
<div class="scrollbar" id="style-1">
<div class="col-xs-12">
<div class="row" style="margin:0px;">
<h2 class="section-header"
style="font-size: 2em; color: #7d7eaf;">Dashboard
</h2>
//We can add the tables and the particular templates
here
</t>
</template>
And the last one, we can add those file in the __manifest__.py like this format
'data': [
''views/dashboard_views.xml','
]
'assets':
'web.assets_backend': [
'module_name/static/src/css/dashboard.css',
'module_name/static/src/js/dashboard_action.js',
'module_name/static/src/xml/dashboard_templates.xml'
]
},
One way to specify a client's activity is in this manner. We can use this technique to produce several forms of action.