Chapter 9 - Odoo 15 Development Book

Custom Widgets:

In Odoo, there are different field widgets that provide various functionalities in our fields. For instance, we can use widget=” date” for date fields, widget=” image” for binary fields to show an image, and so on.

Let’s see how we will create a custom widget with our preferred functionalities in odoo 15.

Let’s take an instance of creating a widget called “quick_publish_button” that allows you to publish/unpublish products from the website without redirecting to the website view. This widget can be used for boolean fields.

To create our custom widget, we can follow the steps mentioned below.

    1.First, we need to add a static/src/js/quick_publish.js file in our module.

    odoo.define('website_product_publish.quick_.button', function (require) {
    'use strict';
    var AbstractField = require('web.AbstractField');
    var core = require('web.core');
    var field_registry = require('web.field_registry');
    var _t = core._t;

    2. For developing a custom widget we need to extend AbstractField class which is the basic field widget used to render fields in a view after which register the widget to the field_registry.

    var QuickWebsitePublishButton = AbstractField.extend({
    	template: 'QuickWebsitePublishButton',
    	events: {
        	'click': '_onClick',
    	start: function () {
        	this.$icon = this.$('.o_button_icon');
        	return this._super.apply(this, arguments);
    	isSet: function () {
        	return true;
    	_render: function () {
        	this._super.apply(this, arguments);
        	var published = this.value;
        	var info = published ? _t("Published") : _t("Unpublished");
        	this.$el.attr('aria-label', info)
                	.prop('title', info);
        	this.$icon.toggleClass('text-danger', !published)
                	.toggleClass('text-success', published);
    	_onClick: function () {
        	var self = this;
            	model: this.model,
            	method: 'quick_publish_products',
            	args: [this.res_id],
        	}).then(function (result) {
    	.add('quick_publish_button', QuickWebsitePublishButton)

    3.Then load the js file in the assets as shown below.

    'assets': {
        	'web.assets_backend': [
        	'web.assets_qweb': [

    4. Next, we will set the is_published field to true from the _onClick function using rpc query. For that, we need to add a python file in the models directory in which we will define the function specified in rpc.

    from odoo import models, api, fields, _
    class ProductTemplate(models.Model):
    	_inherit = 'product.template'
    	def quick_publish_products(self):
        	for rec in self:
            	rec.is_published = True if not rec.is_published else False
        	return {
            	'type': 'ir.actions.client',
            	'tag': 'reload',

    5. Now we need to add the template inside static/src/Xml.

    <templates id="template_quick_publish" xml:space="preserve">
      <t t-name="QuickWebsitePublishButton">
        <button type="button" class="btn oe_stat_button">
          <i class="fa fa-fw o_button_icon fa-globe"/>
          <div class="o_stat_info">
             <span class="o_stat_text">
               <t t-if="widget.value">
               <t t-if="!widget.value">

    6. Finally, we need to add this “quick_publish_button” widget to the field. For that, let’s add the xml file with code as shown below.

      <record id="product_template_form_view_inherit" model="ir.ui.view">
       <field name="name"></field>
       <field name="model">product.template</field>
       <field name="inherit_id" ref="website_sale.product_template_form_view"/>
       <field name="arch" type="xml">
          <xpath expr="//field[@name='is_published']" position="attributes">
             <attribute name="widget">quick_publish_button</attribute>

    7. To view the newly created widget simply upgrade the module and open the products form view. Then we can see the Quick Publish button as shown below.



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