How to Add Custom Fields to Existing Views in Odoo 16

In Odoo, we can add custom fields in the existing view. So we can discuss how to add a new/custom field in the current view of Odoo 16. Then we can add a new field in the ‘res.partner’ model.

This is the existing view of ‘res.partner model. Then I am going to add a new field, ‘department_name’, below the ‘Job Position’ field.

For adding the new field, we need to find the model name of this view.

Steps for follow

1. Click on the debugger button after activating the debugger button.

2. Select Edit View: Form

When clicking this button, we will be redirected to a wizard showing the model name and views.

Next, inside a python file, create a class for Inheriting the model.

from odoo import fields, models
class ResPartner(models.Model):
	_inherit = 'res.partner'
	department_name = fields.Char(string="Department")

This python file should be added to __init__.py file.

For viewing this field in UI, we want the External ID of the current view.

For that,

1. Click the debugger button (Activate developer mode) -> Select Edit View: Form

From this wizard, we get the external ID of the contact model. So the last step is to inherit this view and add the custom field in the XML file.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    	<record id="res_partner_customizations_form" 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">
            	<field name="function" position="after">
                	<field name="department_name"/>
            	</field>
        	</field>
    	</record>
</odoo>

The ID name of the view can be defined as our wish. The model refers to which model we want to add the field to. And the reference for the inherit_id is the external id of the view.

Next, we want to add the ‘department_name’ after the ‘job position’.

The technical name of the Job Position is ‘function.’ After activating the developer mode, we get the technical name of all fields or areas in a UI by hovering on the field name. By using the position argument, we can specify the position of the field. The above code defines that the ‘Department’ field should be added after the field ‘Job Position’. We can define our field after the field. The “Position” attribute is actually for defining the required position to add our field in the view. We can use after, before, replace, and inside as values of the position argument.

After: The new field is added after the matched field

Inside: The new field is appended inside the matched field.

Replace: The new field will replace the matched field.

Before: The new field is added before the matched field.

We can also use XPATH to specify the position of the field.

This file will add the ‘department_name’ on the ‘res.partner’  form view.

After all, remember to add this XML file to the manifest file and upgrade the module. Then you can view the field that you added in the specified position.