Chapter 9 - Odoo 15 Development Book

New View Creation

In odoo, there are distinct forms of views in which every view offers distinctive functionality.

Let’s have a look at how we are able to create a brand new view type in odoo 15.

Here, we are going to create a new view type known as the “demo map” view.

Let's observe the below steps to create a “demo map” view;

1. Add Demo Map view in ir.ui.view model

class View(models.Model):
 _inherit = 'ir.ui.view'
 type = fields.Selection(selection_add=[('demo_map', "Demo Map")])

2. Add Demo Map in view_mode selection by inheriting ir.actions.act_window.view model.

class ActWindowView(models.Model):
    _inherit = 'ir.actions.act_window.view'
    view_mode= fields.Selection(selection_add=[('demo_map', "Demo Map")])

3. When including a new view type, we want to define a js module and want to import the desired variables as shown below;

odoo.define('demo_map_view.DemoMapView', function (require) {
"use strict";
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({});

4. Then we're following the Model-view-controller pattern.

var DemoMapView = AbstractView.extend({
	config: {
    		Model: DemoMapModel,
    		Controller: DemoMapController,
    		Renderer: DemoMapRenderer,
	},
	viewType: 'demo_map',
});

5. Now register the view like below.

viewRegistry.add('demo_map', DemoMapView);
return DemoMapView;

6. Then at the Renderer function, we will add things that we want to view For example, we will add a heading “Demo Map” like below

var DemoMapRenderer = AbstractRenderer.extend({
className: "o_demo_map_view",
this.$el.append(
            	$('<h1>').text('Demo Map!'),
            	$('<div id="mapid"/>')
    	);
    	return $.when();
    }),
});