Enable Dark Mode!
By: Arjun P Manoj

How to Add Options Inside HTML Field in Odoo 16

Technical Odoo 16

Customization and flexibility are vital in web development, enabling businesses to create unique user experiences. Odoo offers extensive functionality customization. One powerful feature is the ability to add new attributes to HTML fields. This empowers developers to enhance the user interface, capture specific data, and unlock a world of customization possibilities. In this blog, we'll explore the process of adding new attributes to HTML fields in Odoo, highlighting the benefits and showcasing real-world use cases that illustrate the power of this customization feature.

In Odoo 16, the HTML field provides a powerful tool for storing and displaying formatted content. However, there may be cases where you need to enhance the functionality of the HTML field by adding custom options. In this blog post, we will guide you through the process of adding options inside an HTML field in Odoo 16.

So, we will add a simple section template attribute within the HTML field.

How to Add Options Inside HTML Field in Odoo 16-cybrosys

/** @odoo-module **/
import Wysiwyg from 'web_editor.wysiwyg';
import { qweb as QWeb, _t } from 'web.core';

These are import statements, importing necessary modules from the Odoo web 


    init: function (parent, options) {
        this._super.apply(this, arguments);

This code extends the Wysiwyg class from the Odoo framework. It overrides the init method of the class.

_getPowerboxOptions: function () {
        const options = this._super();
        const { commands, categories } = options;
        const Category = { name: _t('MyKnowledge'), priority: 40 };

This function extends the _getPowerboxOptions method of the Wysiwyg class. It initializes some variables, including a category named "MyKnowledge" with a priority of 40.

const itemSectionCommand = {
            category: _t('MyKnowledge'),
            name: _t('Section Template'),
            priority: 40,
            description: _t('Insert a Template'),
            fontawesome: 'fa-clipboard',
            callback: this._onTemplateClicked.bind(this)
This defines a new command named "Section Template" within the "MyKnowledge" category. It has a priority of 40 and a description. The callback property refers to the _onTemplateClicked function, which will be called when the command is executed.
These lines add the newly defined category and command to the respective arrays.
_onTemplateClicked: function () {
    const section = '<section style="border: 2px dashed #999; padding: 10px; margin: 10px 0;"><h2 style="font-size: 24px; font-weight: bold;">Section Title</h2><p style="font-size: 16px; line-height: 1.5;">Section content goes here</p></section>';
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const node = range.createContextualFragment(section);
This function is called when the "Section Template" command is executed. It defines an HTML section template as a string, creates a range based on the current selection, creates a DOM node from the HTML string, and inserts it into the range.
The code extends the Odoo Wysiwyg class to add a custom command for inserting a section template into the HTML editor. When the command is triggered, it adds a predefined section of HTML structure at the current cursor position. This can be useful for creating structured content within the editor.
So the created section template will look like this.

How to Add Options Inside HTML Field in Odoo 16-cybrosys

If you need any assistance in odoo, we are online, please chat with us.


Leave a comment




Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message