The View in a menu is an aspect that makes the operational appearance of the window to the viewers. Therefore, it should be defined in the most attractive as well as an informative way possible.
In this blog, we are going to discuss how to create a new view type in Odoo 15.
For example, let’s have a look at how to create a ‘demo map’ view type.
After creating the basic addon structure we need to declare a new view type on the server side. Here we declare a ‘demo map’ view.
class View(models.Model):
_inherit = 'ir.ui.view'
type = fields.Selection(selection_add=[(‘demo_map’, "Demo Map")])
By adding this view type to ir.actions.act_window.view model, we can open this particular view.
class ActWindowView(models.Model):
_inherit = 'ir.actions.act_window.view'
view_mode = fields.Selection(selection_add=[(‘demo_map’, "Demo Map")])
Next, I want to define asset bundles. The asset bundle includes the js file and CSS file path.
'assets': {
'web.assets_backend': [
'/demo_map_view/static/src/js/demo_map_view.js',
'/demo_map_view/static/src/scss/demo_map_view.scss '
],
},This asset bundle will add to the manifest file.
Let’s have a look at the structure of the js file.
While defining a new view type we need to define a new js module.
odoo.define('demo_map_view.DemoMapView', function (require) {
"use strict";We need to import some required variables.
var AbstractController = require('web.AbstractController');
var AbstractModel = require('web.AbstractModel');
var AbstractRenderer = require('web.AbstractRenderer');
var AbstractView = require('web.AbstractView');
var viewRegistry = require('web.view_registry');
var DemoMapController = AbstractController.extend({});
var DemoMapRenderer = AbstractRenderer.extend({});
var DemoMapModel = AbstractModel.extend({});We are following the Model-view-controller pattern.
var DemoMapView = AbstractView.extend({
config: {
Model: DemoMapModel,
Controller: DemoMapController,
Renderer: DemoMapRenderer,
},
viewType: ‘demo_map’,
});Next just export the new view and put it in the viewRegistry.
viewRegistry.add(‘demo_map’, DemoMapView);
return DemoMapView;
});
By this, we get an empty view. On the ‘Renderer’ function we can add the required things as per our needs. For example, going to give the heading “Demo Map!”.
var DemoMapRenderer = AbstractRenderer.extend({
className: "o_demo_map_view",
this.$el.append(
$('<h1>').text(‘Demo Map!'),
$('<div id="mapid"/>')
);
return $.when();
},
});We can add external libraries under this rendered function. Because this function is rendered while selecting this particular view.