Description
In simple terms, client actions bind specific actions by registering a set of widgets.
From the server's perspective, a client action is merely a record saved in the ir_action model; from the Web client's perspective, it is a widget that inherits from the AbstractAction class.
Before using client actions, you need to register them in the registry (core.action_registry.add(’’, ‘’))
var AbstractAction = require('web.AbstractAction');
var core = require('web.core');
var TongjiPage = AbstractAction.extend({
template: 'MainTongjiPage',
init: function(){
return this._super.apply(this, arguments);
},
}),
Registration of Client Actions
First, we need the mapping between the web client and TongjiPage
core.action_registry.add('tongji.page.main', TongjiPage);
Then, we need to define a record with the tag attribute tongji.page.main in ir.actions.client
<record id="action_tongji_page" model="ir.actions.client">
<field name="name">Statistics</field>
<field name="tag">tongji.page.main</field>
</record>
## Control Panel (ControlPanelMixin) So the question is, what is a control panel?
The red box area as shown below ↓↓↓
So how do we add Odoo's default control panel to our custom interface? First, it's important to know that the default AbstractAction class does not support the control panel.
The format for adding a control panel to a new Widget is as follows:
var ControlPanelMixin = require('web.ControlPanelMixin');
var TongjiPage = AbstractAction.extend(ControlPanelMixin, {
template: 'MainTongjiPage',
init: function(){
return this._super.apply(this, arguments);
},
}),
Each time the control panel is updated, the _updateControlPanel method needs to be called (official example):
var SomeClientAction = Widget.extend(ControlPanelMixin, {
...
start: function () {
this._renderButtons();
this._updateControlPanel();
...
},
do_show: function () {
...
this._updateControlPanel();
},
_renderButtons: function () {
this.$buttons = $(QWeb.render('SomeTemplate.Buttons'));
this.$buttons.on('click', ...);
},
_updateControlPanel: function () {
this.update_control_panel({
cp_content: {
$buttons: this.$buttons,
},
});
