How to Create Tree View and Form View in Odoo

Abid Patel
30-Aug-2024 Updated : 30-Aug-2024

Learn how to create tree view and form view in Odoo with this comprehensive guide. Perfect for developers looking to enhance their Odoo applications by customizing data views.

How to Create Tree View and Form View in Odoo

Creating a tree view and form view in Odoo 17 is fundamental for customizing how data is presented and managed in your Odoo applications. In this blog post, we'll walk through the steps to create these views, explore their components, and discuss how they work together to offer a seamless user experience.

Introduction: Odoo is a comprehensive suite of business applications, and its modular approach allows developers to extend and customize it to fit specific needs. Among the essential customizations are tree views and form views, which dictate how records are listed and detailed within the application.

Step-by-Step Guide How to Create Tree & Form view in Odoo:

1. What are Tree Views and Form Views? 
2. Setting Up Your Odoo Development Environment 
3. Creating the Tree View 
4. Creating the Form View 
5. Customizing the Views 
6. Best Practices for Creating Views 
7. Conclusion

1. What are Tree Views and Form Views?

Tree View: Also known as list view, this view displays multiple records in a tabular format, allowing users to see an overview of data and perform batch operations like editing, deleting, or exporting records.

Form View: This view provides a detailed view of a single record, allowing users to view or edit specific fields of a particular entry.

2. Setting Up Your Odoo Development Environment

Before diving into creating views, it's essential to have a proper Odoo 17 development environment. If you haven’t set up your environment yet, follow these steps:

- Install Odoo 17: Ensure you have Odoo 17 installed. You can do this by either downloading the source code or using a package manager like 'apt' on Ubuntu.

- Create a Custom Module: For our example, let's create a custom module to house our views. Run the following command in your terminal:

- Activate Developer Mode: Go to the Odoo interface, and in the URL, append '?debug=1' to enable developer mode. This mode allows you to access advanced features like editing views.

3. Creating the Tree View

Before diving into creating views, it's essential to have a proper Odoo 17 development environment. If you haven’t set up your environment yet, follow these steps:

Step 1: Define the Model

Before creating a view, you need a model. Let’s define a model named 'res.partner' for managing partners.

In your custom module ('my_custom_module'), create a file named 'models.py' inside the models directory:

models.py

from odoo import models, fields

class Partner(models.Model):
    _name = 'res.partner'
    _description = 'Partner'

    name = fields.Char(string='Name', required=True)
    email = fields.Char(string='Email')
    phone = fields.Char(string='Phone')
Step 2: Define the Tree View

Next, define the tree view for this model. In the 'views' directory of your module, create a file named 'partner_views.xml':

partner_views.xml

<odoo>
    <record id="view_partner_tree" model="ir.ui.view">
        <field name="name">partner.tree</field>
        <field name="model">res.partner</field>
        <field name="arch" type="xml">
            <tree string="Partners">
                <field name="name"/>
                <field name="email"/>
                <field name="phone"/>
            </tree>
        </field>
    </record>
</odoo>
Step 3: Load the View

Ensure that your new view is loaded when your module is installed. Edit the '__manifest__.py' file in the root of your module:

__manifest__.py

{
    'name': 'My Custom Module',
    'version': '1.0',
    'depends': ['base'],
    'data': [
        'views/partner_views.xml',
    ],
}
Step 4: Update the Module

After defining the tree view, update your module to apply the changes. Run the following command:

bash

odoo-bin -u my_custom_module

Navigate to the 'Contacts' app in Odoo to see your new tree view in action.

4. Creating the Form View

Step 1: Define the Form View

Now that you have a tree view, let’s create a form view. In the same partner_views.xml file, add the following code:

partner_views.xml

<record id="view_partner_form" model="ir.ui.view">
    <field name="name">partner.form</field>
    <field name="model">res.partner</field>
    <field name="arch" type="xml">
        <form string="Partner">
            <sheet>
                <group>
                    <field name="name"/>
                    <field name="email"/>
                    <field name="phone"/>
                </group>
            </sheet>
        </form>
    </field>
</record>
Step 2: Add a Menu Item and Action

To access your new views, you need to create a menu item and an action. In the same 'partner_views.xml' file, add:

partner_views.xml

<record id="action_partner" model="ir.actions.act_window">
    <field name="name">Partners</field>
    <field name="res_model">res.partner</field>
    <field name="view_mode">tree,form</field>
</record>

<menuitem id="menu_partner" name="Partners" action="action_partner" parent="base.menu_custom"/>

This code snippet creates an action that opens the tree and form views and adds a menu item to access these views.

Step 3: Update the Module Again

After adding the form view and menu item, update your module:

bash

odoo-bin -u my_custom_module

You can now navigate to your custom menu and see the form view in action by clicking on any record from the tree view.

5. Customizing the Views

Adding More Fields

You can easily add more fields to your form and tree views. For example, if you want to add an address field, modify your model:

python
address = fields.Text(string='Address')

Then, add this field to your views:

In Tree View:
xml
<field name="address"/>
In Form View:
xml
<field name="address"/>
Adding Buttons and Smart Buttons

Odoo allows adding buttons within the form view for specific actions. For example, you might want to add a button to send an email:

xml

<button name="send_email" type="object" string="Send Email" class="oe_highlight"/>
Conditional Formatting and Colors

Odoo supports conditional formatting, allowing you to change how data is displayed based on conditions. For example, you can highlight overdue invoices in red. Here's how you can apply conditional formatting:

xml

<tree string="Partners">
    <field name="name"/>
    <field name="email" 
           attrs="{'invisible': [('email', '=', False)]}" 
           options="{'color': 'red'}"/>
    <field name="phone"/>
</tree>
Grouping and Collapsible Sections in Form View

In form views, you can group fields and create collapsible sections to improve the user experience:

xml

<group>
    <field name="name"/>
    <field name="email"/>
</group>
<group string="Additional Info">
    <field name="phone"/>
    <field name="address"/>
</group>

6. Best Practices for Creating Views

Modular Approach: Keep your views organized and modular. Separate XML files for different models or view types.

Inherit and Extend: When possible, inherit and extend existing views instead of creating new ones from scratch.

Use Field Widgets: Leverage field widgets provided by Odoo to enhance user interaction. For example, use the 'many2one' widget for relational fields.

7. Conclusion

Creating tree views and form views in Odoo 17 is straightforward once you understand the basic components and structure. These views are crucial for how users interact with data in your application, so taking the time to design them well is essential.

By following this guide, you’ve learned how to create and customize these views, how to add additional features like buttons and conditional formatting, and some best practices for maintaining clean and efficient code. With these skills, you're well on your way to becoming proficient in Odoo development.

Make a Comment

Your email address will not be published. Required fields are marked *