Skip to Content
This question has been flagged
widgetfrontendodoo12
5 Replies
14701 Rodiniai
Portretas
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



Portretas
Atmesti
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.

Portretas
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!

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

Portretas
Atmesti
Portretas
Maxim Efanov
Autorius 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 ?

Portretas
Atmesti
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 :)

Related Posts Replies Rodiniai Veikla
Widget Conversion From Odoo 12 to Odoo 16
widget odoo12 odoo16features
Portretas
Portretas
Portretas
2
liep. 23
4615
ODOO12: how to pass values of field in javascript Solved
javascript widget odoo12
Portretas
Portretas
Portretas
2
lapkr. 22
7925
Is it possible to use widget=“kanban_activity” in calendar view?
widget kanban odoo12
Portretas
0
rugp. 19
3812
How to add my widget to a form view Solved
javascript widget form_view odoo12
Portretas
Portretas
1
lapkr. 19
7911
many2many_tags widget allows only up to 40 tags
survey widget many2many_tags odoo12
Portretas
Portretas
1
spal. 19
4504