Skip to Content
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
Wszystkie posty Osoby Odznaki
Tagi (Zobacz wszystko)
odoo accounting v14 pos v15
O tym forum
To pytanie dostało ostrzeżenie
widgetfrontendodoo12
5 Odpowiedzi
14764 Widoki
Awatar
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



Awatar
Odrzuć
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.

Awatar
Bit Cloud Apps
Najlepsza odpowiedź

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!

Awatar
Odrzuć
Awatar
Ravi Gadhia
Najlepsza odpowiedź 
web.widget_registry is part of backend (assets_backend) it will not laod on frontend. 

Awatar
Odrzuć
Awatar
Maxim Efanov
Autor Najlepsza odpowiedź

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 ?

Awatar
Odrzuć
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 :)

Powiązane posty Odpowiedzi Widoki Czynność
Widget Conversion From Odoo 12 to Odoo 16
widget odoo12 odoo16features
Awatar
Awatar
Awatar
2
lip 23
4647
ODOO12: how to pass values of field in javascript Rozwiązane
javascript widget odoo12
Awatar
Awatar
Awatar
2
lis 22
7998
Is it possible to use widget=“kanban_activity” in calendar view?
widget kanban odoo12
Awatar
0
sie 19
3846
How to add my widget to a form view Rozwiązane
javascript widget form_view odoo12
Awatar
Awatar
1
lis 19
7958
many2many_tags widget allows only up to 40 tags
survey widget many2many_tags odoo12
Awatar
Awatar
1
paź 19
4533