コンテンツへスキップ
この質問にフラグが付けられました
widgetfrontendodoo12
5 返信
14938 ビュー
アバター
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



アバター
破棄
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.

アバター
Bit Cloud Apps
最善の回答

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!

アバター
破棄
アバター
Ravi Gadhia
最善の回答 
web.widget_registry is part of backend (assets_backend) it will not laod on frontend. 

アバター
破棄
アバター
Maxim Efanov
著作者 最善の回答

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 ?

アバター
破棄
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 :)

関連投稿 返信 ビュー 活動
Widget Conversion From Odoo 12 to Odoo 16
widget odoo12 odoo16features
アバター
アバター
アバター
2
7月 23
4763
ODOO12: how to pass values of field in javascript 解決済
javascript widget odoo12
アバター
アバター
アバター
2
11月 22
8166
Is it possible to use widget=“kanban_activity” in calendar view?
widget kanban odoo12
アバター
0
8月 19
3938
How to add my widget to a form view 解決済
javascript widget form_view odoo12
アバター
アバター
1
11月 19
8073
many2many_tags widget allows only up to 40 tags
survey widget many2many_tags odoo12
アバター
アバター
1
10月 19
4669