We all know that views are describing the records to users. Without a proper view, the user can’t get the information correctly. Odoo has several view types such as form, tree, kanban, graph, pivot, calendar, dashboard, search, grid, cohort, and many more.
In this blog, we are going to discuss how to create a new view type in Odoo 14.
Let’s have a look at how to create a new view type. For example, we can discuss the ‘hello world’ view type.
First, we need to create a basic add-on structure. Next, we need to declare a new view type on the server-side. Here we declare a ‘hello world’ view.
class View(models.Model):
_inherit = 'ir.ui.view'
type = fields.Selection(selection_add=[('hello_world', "Hello World")])
Next, we need to open the view. For that adding this view type to ir.actions.act_window.view model.
class ActWindowView(models.Model):
_inherit = 'ir.actions.act_window.view'
view_mode = fields.Selection(selection_add=[('hello_world', "Hello World")])
After this, we want to define asset bundles. On the asset bundle, we are including the js file and CSS file path.
<odoo>
<template id="assets_backend" name="hello world assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/hello_world_view/static/src/js/hello_world_view.js"/>
<link rel="stylesheet" type="text/scss" href="/hello_world_view/static/src/scss/hello_world_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('hello_world_view.HelloWorldView', function (require) {
"use strict";We need to import some things.
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 HelloWorldController = AbstractController.extend({});
var HelloWorldRenderer = AbstractRenderer.extend({});
var HelloWorldModel = AbstractModel.extend({});We are following the MVC pattern.
var HelloWorldView = AbstractView.extend({
config: {
Model: HelloWorldModel,
Controller: HelloWorldController,
Renderer: HelloWorldRenderer,
},
viewType: 'hello_world',
});After that, we just export the new view and put it in the viewRegistry.
viewRegistry.add('hello_world', HelloWorldView);
return HelloWorldView;
});By this, we get an empty view. On the ‘Renderer’ function we can add the contents as per our need.
var HelloWorldRenderer = AbstractRenderer.extend({
className: "o_hello_world_view",
this.$el.append(
$('<h1>').text('Hello World!'),
$('<div id="mapid"/>')
);
return $.when();
},
});Also as per the requirement, we can add external libraries under this rendered function. Because this function is rendered while selecting this particular view thus allowing you to create and craft an exceptional view type in Odoo