Enable Dark Mode!
By: Irfan A

How to Create a Widget in Odoo


In this blog we are discussing how to create a widget, there are so many widgets available in odoo. For example, if we choose a widget image we can choose an image. Likewise here explain about the video_preview widget by creating the widgets because if there is a js file for widget we can give widget=video_preview if not we want to create widgets preview using JS.

There are several widgets in odoo to perform totally different functionalities like status bar, radio button, checkbox, etc. widgets are one of the essential factors in improving the web client experience.

For example in this blog discussing how to create a video preview widget in odoo.In odoo 13 the video preview widget is available so we can give the widget video_preview to preview the video. In other versions, you want to create the widget for a video preview.  We want to create a field to enter the URL for a video preview. While giving the URL the video can be previewed.so for a youtube video to preview, you can just copy the URL from the youtube and copy the URL in the char field, so youtube video can be played.

First, we want to create a char field inside your python code and  a computed field, In the video_url field we will enter the URL for a video preview:

video_url = fields.Char('Video URL',
                            help='URL of a video for showcasing your product.')
embed_code = fields.Char(compute="_compute_embed_code")
We want to add the compute function:

    def _compute_embed_code(self):
        for rec in self:
            rec.embed_code = get_video_embed_code(rec.video_url)

 In odoo 13  get_video_embed_code we can import from odoo.addons.website.tool, these is only available in odoo13 otherwise you can copy the code below:
def get_video_embed_code(video_url):

    ''' Computes the valid iframe from given URL that can be embedded
        (or False in case of invalid URL).
    if not video_url:
        return False
    # To detect if we have a valid URL or not
    validURLRegex = r'^(http:\/\/|https:\/\/|\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$'
    # Regex for few of the widely used video hosting services
    ytRegex = r'^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube(-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((?:\w|-){11})(?:\S+)?$'
    vimeoRegex = r'\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*'
    dmRegex = r'.+dailymotion.com\/(video|hub|embed)\/([^_]+)[^#]*(#video=([^_&]+))?'
    igRegex = r'(.*)instagram.com\/p\/(.[a-zA-Z0-9]*)'
    yaku Regex = r'(.*).youku\.com\/(v_show\/id_|embed\/)(.+)'
    if not re.search(validURLRegex, video_url):
        return False
        embedUrl = False
        ytMatch = re.search(ytRegex, video_url)
        vimeoMatch = re.search(vimeoRegex, video_url)
        dmMatch = re.search(dmRegex, video_url)
        igMatch = re.search(igRegex, video_url)
        ykuMatch = re.search(yaku Regex, video_url)
        if ytMatch and len(ytMatch.groups()[1]) == 11:
            embedUrl = '//www.youtube%s.com/embed/%s?rel=0' % (ytMatch.groups()[0] or '', ytMatch.groups()[1])
        elif video Match:
            embedUrl = '//player.vimeo.com/video/%s' % (vimeo Match.groups()[2])
        elif dermMatch:
            embedUrl = '//www.dailymotion.com/embed/video/%s' % (dmMatch.groups()[1])
        elif igMatch:
            embedUrl = '//www.instagram.com/p/%s/embed/' % (igMatch.groups()[1])
        elif ykuMatch:
            ykuLink = ykuMatch.groups()[2]
            if '.html?' in ykuLink:
                youLink = you Link.split('.html?')[0]
            embedUrl = '//player.youku.com/embed/%s' % (ykuLink)
            # We directly use the provided URL as it is
            embedUrl = video_url
        return '<iframe style="width: 500px;height: 400px;"class="embed-responsive-item" src="%s" allowFullScreen="true" frameborder="0"></iframe>' % embedUrl

So these functions will convert the given Url to the embedded code. For example, if we enter a youtube URL in the video_url char field so we want to convert the URL for playing video in iframe. If we directly take the URL we cannot see the video.  Then we have to give to the XML, under the XML file create a field with widget video preview.

<field name="video_url"/>
<field name = “embed_code” class=”mt-2” widget=”video_preview”/> 
In the Js file add the below code:
odoo.define('website_sale.video_field_preview', function (require) {
"use strict";

var AbstractField = require('web.AbstractField');
var core = require('web.core');
var fieldRegistry = require('web.field_registry');
var QWeb = core.qweb;
var FieldVideoPreview = AbstractField.extend({
    className: 'd-block o_field_video_preview',
    _render: function () {
        this.$el.html(QWeb.render('productVideo', {
            embedCode: this.value,
fieldRegistry.add('video_preview', FieldVideoPreview);
return FieldVideoPreview;

In the XML file add the below code:

<templates xml:space="preserve">
    <t t-name="productVideo">
        <div class="embed-responsive embed-responsive-16by9 " t-if="embedCode">
            <t t-raw="embedCode"/>

We can preview the video as below:

Thus we can create a video preview widget in odoo.here just add a widget under products. 

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

cybrosys youtube


ibrahim mohamed

i taked the code as your description but not work this module are available in one folder or need any updates to work thanks




Leave a comment


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


Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom


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