What is the difference bettween ListView, FormView, and PageView? in JScript for (ODOO | OpenERP)

Question

What is the difference between ListView, FormView, and PageView in openerp.web.XXXXXXXX.include({...? and are there more? I've been trying to learn JS for ODOO, but the official documentation it's poor or not precise, I really wanna know how to use them properly? and how many more are there?, It would be great if you can share a guideline about this topic. Thanks for your time!

Emipro Technologies Pvt. Ltd. Emipro Technologies Pvt. Ltd. · Accepted Answer · 2015-09-15T05:23:39

Basically you can learn concepts of views with all the possible properties and it's child elements from Odoo documentation.

Forms

Form views are used to display the data from a single record. Their root element is <form>. They are composed of regular HTML with additional structural and semantic components.

Deal with single record at a time.
Can contains other structural components (like notebook, sheet).
There is no scope to sorting & searching because at the moment there is only single record.

Lists

The root element of list views is <tree>. The list view's root can have the following attributes:

Display record set in tree.
Can not contain any structural components.
Searching and sorting is possible.

There are javascript files are for each view in odoo, you can refer it from WEB module.

Web/static/src/js/view_form.js
Web/static/src/js/view_list.js
Web/static/src/js/view_list_editable.js
Web/static/src/js/view_tree.js

And other supportive functions sidebar, xml_to_json, xml_to_str, json_node_to_xml, fields_view_get and many others are available inside the views.js.

Page is structural component so it's covered inside the formview.

Javascript module structure for WEB.

JavaScript module mainly construct based on these three concepts.

Classes :

Much as modules, and contrary to most object-oriented languages, javascript does not build in classes although it provides roughly equivalent (if lower-level and more verbose) mechanisms. For simplicity and developer-friendliness Odoo web provides a class system based on Javascript Inheritance.

Widgets :

The Odoo web client bundles jQuery for easy DOM manipulation. It is useful and provides a better API than standard W3C DOM2, but insufficient to structure complex applications leading to difficult maintenance.

Much like object-oriented desktop UI toolkits (e.g. Qt, Cocoa or GTK), Odoo Web makes specific components responsible for sections of a page. In Odoo web, the base for such components is the Widget() class, a component specialized in handling a page section and displaying information for the user.

The QWeb Template Engine :

This allows generating and displaying any type of content, but gets unwieldy when generating significant amounts of DOM (lots of duplication, quoting issues, ...)

As many other environments, Odoo's solution is to use a template engine. Odoo's template engine is called QWeb.

QWeb is an XML-based templating language:

It's implemented fully in JavaScript and rendered in the browser
Each template file (XML files) contains multiple templates
It has special support in Odoo Web's Widget(), though it can be used outside of Odoo's web client (and it's possible to use Widget() without relying on QWeb)

Example: (Retrieves the view's number of records per page, default is 80, you can update it by override this method))

There are two main thing to achieve this kind of task.

Adding/updating methods according to need.
Add created files to proper template.

Add this function for javascript file and add this file into web_backend assets using template inheritance then effect of this code will comes automatically.

instance.web.ListView.include({
    limit : function(){
        if (this._limit === undefined) {
            this._limit = (this.options.limit
            || this.defaults.limit
            || (this.getParent().action || {}).limit
            || 160);
        }
        return this._limit;
    },
});

Xml code:

<template id="assets" inherit_id="web.assets_backend">
      <xpath expr="//script[@src='/web/static/src/js/view_tree.js']" position="after">
              <script type="text/javascript" src="your script file path"></script>
      </xpath>
 </template>

Install your module and see the effect, the same way you can achieve anything using javascript inheritance.

What is the difference bettween ListView, FormView, and PageView? in JScript for (ODOO | OpenERP)

1 Answers