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",
                	$('<h1>').text('Demo Map!'),
                	$('<div id="mapid"/>')
        	return $.when();


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



Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom



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