İçereği Atla
Bu soru işaretlendi
widgetfrontendodoo12
5 Cevaplar
14799 Görünümler
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
Vazgeç
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
En İyi Yanıt

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
Vazgeç
Avatar
Ravi Gadhia
En İyi Yanıt 
web.widget_registry is part of backend (assets_backend) it will not laod on frontend. 

Avatar
Vazgeç
Avatar
Maxim Efanov
Üretici En İyi Yanıt

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
Vazgeç
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 :)

İlgili Gönderiler Cevaplar Görünümler Aktivite
Widget Conversion From Odoo 12 to Odoo 16
widget odoo12 odoo16features
Avatar
Avatar
Avatar
2
Tem 23
4671
ODOO12: how to pass values of field in javascript Çözüldü
javascript widget odoo12
Avatar
Avatar
Avatar
2
Kas 22
8046
Is it possible to use widget=“kanban_activity” in calendar view?
widget kanban odoo12
Avatar
0
Ağu 19
3864
How to add my widget to a form view Çözüldü
javascript widget form_view odoo12
Avatar
Avatar
1
Kas 19
7975
many2many_tags widget allows only up to 40 tags
survey widget many2many_tags odoo12
Avatar
Avatar
1
Eki 19
4547