Enable Dark Mode!
how-to-create-a-new-view-type-in-odoo-15.jpg
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 an 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.
<odoo>
<template id="assets_backend" name="demo map assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/demo_map_view/static/src/js/demo_map_view.js"/>
<link rel="stylesheet" type="text/scss" href="/demo_map_view/static/src/scss/demo_map_view.scss"/>
</xpath>
</template>
</odoo>
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 need. For example, going to give a heading “Demo Map!”.
var DemoMapRenderer = AbstractRenderer.extend({
className: "o_demo_map_view",
this.$el.append(
            $('<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.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

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

location

London

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

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