Enable Dark Mode!
By: Swapna

How to Create a New View Type in Odoo 14

Technical Odoo 14

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.
<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"/>
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",
            $('&lt;h1&gt;').text('Hello World!'), $('&lt;div id="mapid"/&gt;')
    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

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


amine havide

hello , we think there is a problem in this code at page: https://www.cybrosys.com/blog/how-to-create-a-new-view-type-in-odoo-14 in here: var HelloWorldRenderer = AbstractRenderer.extend({ className: "o_hello_world_view", this.$el.append( $('

').text('Hello World!'), $('
') ); return $.when(); }, });




Leave a comment




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



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