This question has been flagged
5 Replies
11579 Views
widgetfrontendodoo12
Avatar
Maxim Efanov

js :

​odoo.define('test.HomePageWidget', function (require) {
'use strict';

var Widget = require('web.Widget');
var widgetRegistry = require('web.widget_registry');

var HomePageWidget = Widget.extend({
className: 'o_field_test_homepage', 

   start: function () {
        console.log('test.HomePageWidget!');
        this.$el.append("<div>test.HomePageWidget!</div>");
    },
});

widgetRegistry.add('test_homepage', HomePageWidget);

return HomePageWidget;
});

xml-template :

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <template id="assets_backend" name="test assets" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
      <script type="text/javascript" src="/test/static/src/js/test.js"></script>
    </xpath>
  </template>
    <template id="main_page">
    <t t-call="website.layout">
      <div class="oe_structure">
        <div class="container">
            Content.<br/>
            Widget1:<div class="o_field_test_homepage">widget</div>
            Widget2:<widget name="test_homepage"/></div>
      </div>
    </t>
  </template>
  </odoo>

In page of website I see only :
Content.
Widget1:

widget

Widget2:

and error "Missing dependencies : web_widget_registry" in javascript console



Avatar
Discard
Ibrahim Boudmir

Hey,

If you add console to print value of widgetRegistry, do you get something ?! console.log('111', widgetRegistry)

I think you would want to consider this instead : var widgetRegistry = require('web.Registry');

Let us know.

Avatar
Bit Cloud Apps
Best Answer

Odoo provides an automatic way for "frontend" widgets to be automatically attached to elements (DOM nodes) defined in your templates (and in fact defined anywhere, not just your templates). Here's a minimal example - let's assume we want a component, which renders the current date:


views/assets.xml

<odoo>
  <template id="assets_frontend" inherit_id="web.assets_frontend" name="Test assets">
    <xpath expr="//script[last()]" position="after">
      <script type="text/javascript" src="/my_module/static/src/js/current_date.js"/>
    </xpath>
  </template>
</odoo>

views/templates.xml

<odoo>
  <template id="test_page" name="Test Page">
    <t t-call="website.layout">
      <div id="my-container">
        Some content        
        <span class="current-date"> Today is: <span/> </span>
      </div>
    </t>
  </template>
</odoo>

static/src/js/current_date.js

odoo.define('my_module.current_date', function (require) {
  var publicWidget = require('web.public.widget');
  publicWidget.registry.current_date = publicWidget.Widget.extend({

    selector: '.current-date',

    start: function (parent) {
      this._renderDate();
    },

    // Renders date in M/D/YY format
    _renderDate: function() {
      var now = new Date();
      var formatted = [
        (now.getMonth() + 1),
        now.getDate(),
        now.getFullYear() - 2000
      ].join('/');
      this.$('span').text(formatted);
    }
  });
  return publicWidget.registry.current_date;
});

We create subclass of a PublicWidget, which has ability to automatically attach instances of itself to arbitrary html elements defined by the "selector". It's important to consider selector specificity: here, our  current_date widget will be attached to ANY element which has a "current-date" CSS class. If we wanted to make sure it's only attached to instances of this template, we could say:


selector: "#my-container .current-date"


Hope this helps!

Avatar
Discard
Avatar
Ravi Gadhia
Best Answer 
web.widget_registry is part of backend (assets_backend) it will not laod on frontend. 

Avatar
Discard
Avatar
Maxim Efanov
Author Best Answer

Thank You, Ravi Gadhia, for answer.
My brain already broke after two days of trying to solve this problem :-)

But now, question N 2 :
How can I register and use my own widget on frontend ?

Avatar
Discard
Ravi Gadhia

So here is the answer. it's quite long but I will try to explain.

Odoo backend has a rendering engine for each view like form, list, gantt so while rendering engine parses XML line by line and when it reaches to <widget> tag it will take appropriate widget from the filed registry so mention code only works in backend view like form, list, etc..

Odoo Frontend has no rendering engine its freestyle rendering. what you define in the template it will render as it is.

step to defining your own widget frontend

XML

<template id="my_template">

<h1>My widget<h1>

<div class="my_widget_container">

</div>

</tempate>

JS

var widget = required('web.widget')

MyWiddget = widget.extend({

'template': 'my_widget_tempalte',

........

})

==================

var mywidget = new widget();

mywidget.appendTo($('.my_widget_container'))

Last line will initiate your widget in a website page

make sure line execute after DOM ready otherwise, the widget will not find .my_widget_container element on the page silently skip the initialization and nothing happen

Hope it will help :)