DEV Community

Cover image for Odoo 101: View
Abraham
Abraham

Posted on

Odoo 101: View

#odoo #erp #programming #tutorial

If you're just starting with Odoo development, understanding how views, menus, and UI logic work is essential. In this guide, we’ll walk through the basics of creating views, linking them to menus and actions, understanding different view types, and how to extend existing views from other modules.

📁 1. How to Create a View

🔹 View Directory Structure

In your custom module, organize the views like this:

your_module/
├── __init__.py
├── __manifest__.py
├── models/
├── views/
│   └── library_book_views.xml
Enter fullscreen mode Exit fullscreen mode

🔹 Define XML View

Example of a basic form and tree view:

<odoo>
    <!-- Tree View -->
    <record id="view_library_book_tree" model="ir.ui.view">
        <field name="name">library.book.tree</field>
        <field name="model">library.book</field>
        <field name="arch" type="xml">
            <tree>
                <field name="name"/>
                <field name="author"/>
            </tree>
        </field>
    </record>

    <!-- Form View -->
    <record id="view_library_book_form" model="ir.ui.view">
        <field name="name">library.book.form</field>
        <field name="model">library.book</field>
        <field name="arch" type="xml">
            <form string="Library Book">
                <group>
                    <field name="name" readonly="1"/>
                    <field name="author" invisible="state == 'draft'"/>
                </group>
            </form>
        </field>
    </record>
</odoo>
Enter fullscreen mode Exit fullscreen mode

🔹 Register View in Manifest

In __manifest__.py:

'data': [
    'views/library_book_views.xml',
],
Enter fullscreen mode Exit fullscreen mode

⚠️ Important Note: Order of XML Files in Manifest

When adding XML files to the data section of your manifest.py, make sure that any files defining record IDs that will be referenced later (like menus, views, or actions) are listed first.

For example, if a view references a menuitem or action by id, the XML file containing that referenced record must appear above the current file in the list.

'data': [
    'views/menu.xml',             # Defines menuitem IDs
    'views/library_book_views.xml',  # Uses menuitem/action/component IDs defined above
],
Enter fullscreen mode Exit fullscreen mode

If you reverse the order and library_book_views.xml tries to attach to a menuitem that hasn't been defined yet, Odoo will raise a ValueError because it cannot find the referenced ID.

🧭 2. Menu Items and Submenus

Menus in Odoo follow a hierarchy and sequence.

<!-- Root Menu -->
<menuitem id="library_menu_root" name="Library" sequence="10"/>

<!-- Submenu -->
<menuitem id="library_menu_books" name="Books"
          parent="library_menu_root" sequence="20"/>
Enter fullscreen mode Exit fullscreen mode
  • sequence: lower numbers show higher in the menu
  • parent: defines nesting (submenu)

⚙️ 3. Actions and View Types (act_window)

To make a menu open a specific model/view, define an action:

<record id="action_library_book" model="ir.actions.act_window">
    <field name="name">Books</field>
    <field name="res_model">library.book</field>
    <field name="view_mode">tree,form</field>
</record>

<menuitem id="library_menu_books" name="Books"
          parent="library_menu_root" action="action_library_book"/>
Enter fullscreen mode Exit fullscreen mode

👓 4. View Types in Odoo

📄 tree (List View)

Displays a list of records. Can include:

<tree editable="bottom">
    <field name="name"/>
</tree>
Enter fullscreen mode Exit fullscreen mode

📝 form

Used for creating or editing a record.

Tips:
When we use many2many, one2many we can display them using tree.

<form>
    <field name="name"/>
    <field name="line_ids">
        <tree editable="bottom">
            <field name="product_id"/>
            <field name="quantity"/>
        </tree>
    </field>
</form>
Enter fullscreen mode Exit fullscreen mode

🧱 kanban

Used for stage-based workflows (like CRM pipelines).

<kanban>
    <templates>
        <t t-name="kanban-box">
            <div><strong><field name="name"/></strong></div>
        </t>
    </templates>
</kanban>
Enter fullscreen mode Exit fullscreen mode

🔍 search

Adds filters and group-by options.

<search>
    <field name="name"/>
    <filter name="draft" string="Draft" domain="[('state','=','draft')]"/>
</search>
Enter fullscreen mode Exit fullscreen mode

🎛️ 5. Widgets

Widgets control how a field appears in the UI:

<field name="priority" widget="priority"/>
<field name="image" widget="image"/>
<field name="tags" widget="many2many_tags"/>
Enter fullscreen mode Exit fullscreen mode

List of widgets here

🔁 6. Inheritance from Other Module

You can inherit and modify views using inherit_id and xpath. You can use inherit component when you want to modify component attributes or replacing component.

<record id="view_partner_form_inherit" model="ir.ui.view">
    <field name="name">res.partner.form.inherit</field>
    <field name="model">res.partner</field>
    <field name="inherit_id" ref="base.view_partner_form"/>
    <field name="arch" type="xml">
        <xpath expr="//field[@name='phone']" position="after">
            <field name="x_loyalty_points"/>
        </xpath>
    </field>
</record>
Enter fullscreen mode Exit fullscreen mode

🧩 7. QWeb Sneak Peek (Teaser)

QWeb is used for:

  • PDF reports
  • Kanban customization
  • Client-side rendering

A teaser example:

<t t-name="MyCustomTemplate">
    <div class="my-box">
        <t t-esc="doc.name"/>
    </div>
</t>
Enter fullscreen mode Exit fullscreen mode

📌 More of QWeb will be covered in Odoo 101: QWeb

✅ Final Tips

  • Enable developer mode to inspect view IDs and structure
  • Always test your views with real data for usability

Top comments (0)