Vistas y la Interfaz de Usuario en Odoo

En Odoo, la interfaz gráfica se define de forma declarativa mediante archivos XML que crean registros en el modelo ir.ui.view. El framework web interpreta estas estructuras y renderiza interfaces interactivas y responsivas.

1. Tipología de Vistas en Odoo #

2. Definición de Vistas de Formulario y Lista #

1<odoo>
2    <!-- 1. Vista de Formulario -->
3    <record id="view_library_book_form" model="ir.ui.view">
4        <field name="name">library.book.form</field>
5        <field name="model">library.book</field>
6        <field name="arch" type="xml">
7            <form string="Libro">
8                <header>
9                    <button name="action_make_available" string="Marcar Disponible" type="object" class="oe_highlight"/>
10                    <field name="state" widget="statusbar" statusbar_visible="draft,available,borrowed"/>
11                </header>
12                <sheet>
13                    <div class="oe_title">
14                        <h1><field name="name" placeholder="Título del libro..."/></h1>
15                    </div>
16                    <group>
17                        <group>
18                            <field name="author"/>
19                            <field name="isbn"/>
20                        </group>
21                        <group>
22                            <field name="publication_date"/>
23                            <field name="price"/>
24                        </group>
25                    </group>
26                    <notebook>
27                        <page string="Sinopsis">
28                            <field name="description"/>
29                        </page>
30                    </notebook>
31                </sheet>
32            </form>
33        </field>
34    </record>
35
36    <!-- 2. Vista de Lista (List / Tree) -->
37    <record id="view_library_book_list" model="ir.ui.view">
38        <field name="name">library.book.list</field>
39        <field name="model">library.book</field>
40        <field name="arch" type="xml">
41            <list string="Catálogo de Libros" decoration-info="state == 'draft'" decoration-success="state == 'available'">
42                <field name="name"/>
43                <field name="author"/>
44                <field name="price"/>
45                <field name="state"/>
46            </list>
47        </field>
48    </record>
49</odoo>

3. Acciones de Ventana y Menús #

Para enlazar las vistas con la navegación del usuario:

1<odoo>
2    <!-- Acción de Ventana -->
3    <record id="action_library_book" model="ir.actions.act_window">
4        <field name="name">Libros</field>
5        <field name="res_model">library.book</field>
6        <field name="view_mode">list,form</field>
7        <field name="help" type="html">
8            <p class="o_view_nocontent_smiling_face">Crea tu primer libro en el catálogo</p>
9        </field>
10    </record>
11
12    <!-- Menús Jerárquicos -->
13    <menuitem id="menu_library_root" name="Biblioteca" sequence="10"/>
14    <menuitem id="menu_library_books" name="Libros" parent="menu_library_root" action="action_library_book" sequence="20"/>
15</odoo>

4. Herencia de Vistas con <xpath> #

Para modificar una vista existente de Odoo (por ejemplo, añadir un campo a res.partner) sin alterar el módulo original:

1<record id="view_partner_form_inherit" model="ir.ui.view">
2    <field name="name">res.partner.form.inherit.library</field>
3    <field name="model">res.partner</field>
4    <field name="inherit_id" ref="base.view_partner_form"/>
5    <field name="arch" type="xml">
6        <xpath expr="//field[@name='vat']" position="after">
7            <field name="is_library_member"/>
8        </xpath>
9    </field>
10</record>