Enable Dark Mode!
By: Swapna

How to Create a New View Type in Odoo 15

Technical Odoo 15

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/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",
            $('<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.

If you need any assistance in odoo, we are online, please chat with us.


Leave a comment




Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message