Enable Dark Mode!
how-to-create-a-new-view-type-in-odoo-16.jpg
By: Swapna

How to Create a New View Type in Odoo 16

Technical 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.


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



1
Comments

amine

Hello, Thanks a lot for your valuable documentation. But it seems this is not tested or without real code written behind, like selection_add that requires the ondelete parameter. the AbstractRenderer doesn't make sense since it returns something but no function in sight. But it's a good start, so thank you

29/05/2023

-

1:24PM



Leave a comment

 


whatsapp
location

Calicut

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

location

Kochi

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

location

Bangalore

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

Send Us A Message