How to Add and Use HTML Field in Odoo

Abid Patel
25-Sep-2024 Updated : 25-Sep-2024

Learn how to add and use HTML fields in Odoo with this comprehensive guide. Enhance your forms by implementing rich-text content using the Odoo fields.Html feature for better customization and user experience.

How to Add and Use HTML Field in Odoo

Odoo is a versatile and highly customizable ERP platform, allowing developers to enhance its functionality to fit various business needs. One useful feature is the HTML field, which allows users to input and format text using HTML tags. This field is ideal for adding rich text content, such as descriptions, email templates, or product details, to Odoo forms.

In this blog, we will explain how to add an HTML field to your Odoo model and use it effectively. We’ll walk you through the process of adding an HTML field, customizing the view, and understanding its key features.

What is an HTML Field in Odoo?

An HTML field in Odoo allows users to input rich text content, including formatting options like bold, italics, lists, links, and more. It is rendered using a rich text editor, making it easier for non-technical users to add styled content to forms without needing to know HTML.

Benefits of Using HTML Fields in Odoo

  • ▹ Rich Text Formatting: HTML fields allow you to add formatting (such as bold, italics, bullet points) to text fields, providing a better user experience.
  • ▹ Dynamic Content: You can embed links, images, and other multimedia elements directly within the field.
  • ▹ Customization: HTML fields can be customized to display a wide variety of content, such as product descriptions, emails, or web content.

Step-by-Step Guide: Adding an HTML Field in Odoo

Let’s explore how to add and customize an HTML field in an Odoo module.

Step 1: Define the HTML Field in Your Model

First, you need to define the HTML field in your Odoo model. Odoo uses the fields.Html field type to create HTML fields.

Here’s an example of how to add an HTML field to the product.template model:

python

from odoo import models, fields

class ProductTemplate(models.Model):
    _inherit = 'product.template'

    description_html = fields.Html(string="HTML Description")
    

In this example, we’re adding a new field description_html to the product template model, which will store the rich-text description of the product.

Step 2: Add the HTML Field to the Form View

Once the HTML field is defined in the model, you need to modify the form view to display it. This is done in the XML file, where you define the layout of the form view.

Here’s how you can add the HTML field to a product form view:

xml

<record id="view_product_form" model="ir.ui.view">
    <field name="name">product.template.form</field>
    <field name="model">product.template</field>
    <field name="arch" type="xml">
        <form string="Product">
            <sheet>
                <group>
                    <field name="name"/>
                    <field name="default_code"/>
                </group>
                <!-- Adding the HTML Field -->
                <group>
                    <field name="description_html"/>
                </group>
            </sheet>
        </form>
    </field>
</record>
    

In this XML code, the <field> tag is used to add the description_html field to the product form.

Step 3: Explanation of the Code

  • ▹ fields.Html: This field type allows Odoo to store and render rich-text content.
  • ▹ Form View: The form view displays the HTML field as a rich-text editor. Users can format text, insert images, or add links directly in this editor.
  • ▹ String Attribute: The string attribute gives the field a label, making it easier for users to understand its purpose.

Step 4: Testing the HTML Field

Once you’ve added the HTML field to the model and form view, it’s time to test it. After upgrading your module, open the form view for a product and try entering rich-text content in the HTML field. You should be able to format text, add bullet points, insert images, and more.

Advanced Customization: Controlling the HTML Content

You can also apply some restrictions or customizations to the HTML field to control the type of content that can be added. For example, you might want to sanitize the input to prevent certain HTML tags from being used, or you might want to pre-fill the field with a template.

Sanitizing HTML Input

To prevent malicious content or unwanted HTML tags, Odoo’s HTML fields are automatically sanitized. However, you can customize the sanitization process if necessary by overriding the sanitization behavior in your module.

Pre-Filling HTML Content

You can also pre-fill the HTML field with content, such as an email template, to guide users. This can be done using default values in your model:

python

description_html = fields.Html(string="HTML Description", default=lambda self: "<p>Enter product details here...</p>")
    

Best Practices for Using HTML Fields in Odoo

  • ▹ Keep It Simple: While HTML fields allow for rich formatting, it’s a good idea to keep the content simple and easy to read. Avoid overloading the field with excessive styling.
  • ▹ Predefine Templates: Consider using pre-defined templates for fields where consistent formatting is required, such as emails or product descriptions.
  • ▹ Sanitization: Always ensure that your HTML input is sanitized to prevent potential security issues, especially when user input is involved.

Conclusion

Adding and using an HTML field in Odoo is a straightforward process that significantly enhances the functionality and user experience of your forms. Whether you’re working with product descriptions, emails, or dynamic web content, HTML fields provide a flexible solution for rich text input. By following this guide, you’ll be able to implement and customize HTML fields in your Odoo modules with ease.

Make a Comment

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