How to Create a New View Type in Odoo 16

Views define the format in which data should be shown to users. They can be updated independently from the models they represent because they are XML-specified.

They are flexible and offer numerous choices for customizing the screens they control.

There are numerous varieties of perspectives. They all represent different kinds of visualization, such as forms, lists, kanbans, etc.

This blog post will cover how to add a new view type in Odoo 16.

We can check how to construct a new view type first. Think about the "demo global map" view.

We need to first create a basic add-on framework. The following action is the server-side declaration of a new view type. Declare the view to be the "demo world map."

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

By including this view type in the ir.actions.act window.view model, we may open this particular view.

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

Asset bundle definition follows next. The asset bundle contains the paths to the CSS and JavaScript files.

'assets': {
    'web.assets_backend': [
        '/demo_world_map_view/static/src/js/demo_world_map_view.js',
        '/demo_world_map_view/static/src/scss/demo_world_map_view.scss '
    ],
},

This asset bundle will add to the manifest file. Let's examine the organization of the js file.

In addition to creating a new view type, we also need to declare a new JS module.

odoo.define('demo_world_map_view.DemoWorldMapView', function (require) {
"use strict";

A few essential variables need to be imported.

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 DemoWorldMapController = AbstractController.extend({});
var DemoWorldMapRenderer = AbstractRenderer.extend({});
var DemoWorldMapModel = AbstractModel.extend({});

We are utilizing the Model-View-Controller design pattern.

var DemoWorldMapView = AbstractView.extend({
	config: {
    	Model: DemoWorldMapModel,
    	Controller: DemoWorldMapController,
    	Renderer: DemoWorldMapRenderer,
	},
	viewType: 'demo_world_map',
});

The new view need only be exported, then it may be added to the view registry.

viewRegistry.add('demo_world_map', DemoWorldMapView);
return DemoWorldMapView;
});

This leaves us with a blank view. Depending on our requirements, we can modify the "Renderer" function to include the required elements. As an example, I'll use the header "Demo World Map!"

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

We can include outside libraries under this rendered function because this function is rendered while picking this particular view.