Skip to Content
Odoo मेन्यू
  • Sign in
  • मुफ़्त में आज़माएं
  • ऐप्लिकेशन
    फ़ाइनेंस
    • अकाउंटिंग
    • इनवॉइसिंग
    • एक्सपेंस
    • स्प्रेडशीट (बीआई)
    • डॉक्यूमेंट्स
    • साइन
    सेल्स
    • सीआरएम
    • सेल्स
    • पीओएस शॉप
    • पीओएस रेस्टोरेंट
    • सब्सक्रिप्शन
    • रेंटल
    वेबसाइट
    • वेबसाइट बिल्डर
    • ई-कॉमर्स
    • ब्लॉग
    • फ़ोरम
    • लाइव चैट
    • ई-लर्निंग
    सप्लाई चेन
    • इन्वेंट्री
    • मैन्युफ़ैक्चरिंग
    • पीएलएम
    • परचेज़
    • मेंटेनेंस
    • क्वालिटी
    मानव संसाधन
    • कर्मचारी
    • रिक्रूटमेंट
    • टाइम ऑफ़
    • अप्रेज़ल
    • रेफ़रल
    • फ़्लीट
    मार्केटिंग
    • सोशल मार्केटिंग
    • ईमेल मार्केटिंग
    • एसएमएस मार्केटिंग
    • इवेंट
    • मार्केटिंग ऑटोमेशन
    • सर्वे
    सेवाएं
    • प्रोजेक्ट
    • टाइमशीट
    • फ़ील्ड सर्विस
    • हेल्पडेस्क
    • प्लानिंग
    • अपॉइंटमेंट
    प्रॉडक्टिविटी
    • डिस्कस
    • अप्रूवल
    • आईओटी
    • वीओआईपी
    • नॉलेज
    • WhatsApp
    तीसरे पक्ष के ऐप्लिकेशन Odoo स्टूडियो Odoo क्लाउड प्लेटफ़ॉर्म
  • इंडस्ट्री
    रीटेल
    • बुक स्टोर
    • क्लोदिंग स्टोर
    • फ़र्नीचर स्टोर
    • ग्रॉसरी स्टोर
    • हार्डवेयर स्टोर
    • टॉय स्टोर
    Food & Hospitality
    • बार और पब
    • रेस्टोरेंट
    • फ़ास्ट फ़ूड
    • Guest House
    • बेवरिज डिस्ट्रीब्यूटर
    • होटल
    रियल एस्टेट
    • Real Estate Agency
    • आर्किटेक्चर फ़र्म
    • कंसट्रक्शन
    • एस्टेट मैनेजमेंट
    • गार्ड्निंग
    • प्रॉपर्टी ओनर असोसिएशन
    कंसल्टिंग
    • अकाउंटिंग फ़र्म
    • Odoo पार्टनर
    • मार्केटिंग एजेंसी
    • लॉ फ़र्म
    • टैलेंट ऐक्विज़िशन
    • ऑडिट & सर्टिफ़िकेशन
    मैन्युफ़ैक्चरिंग
    • टेक्सटाइल
    • Metal
    • फ़र्नीचर
    • फ़ूड
    • Brewery
    • कॉर्पोरेट गिफ़्ट
    हेल्थ & फिटनेस
    • स्पोर्ट्स क्लब
    • आईवियर स्टोर
    • फिटनेस सेंटर
    • वेलनेस प्रैक्टिशनर
    • फॉर्मेसी
    • हेयर सैलून
    Trades
    • Handyman
    • आईटी हॉर्डवेयर और सपोर्ट
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    अन्य
    • Nonprofit Organization
    • एन्वायरमेंटल एजेंसी
    • बिलबोर्ड रेंटल
    • फ़ोटोग्राफी
    • बाइक लीजिंग
    • सॉफ़्टवेयर रीसेलर
    Browse all Industries
  • कम्यूनिटी
    सीखें
    • ट्यूटोरियल्स
    • दस्तावेज़
    • सर्टिफ़िकेशन
    • ट्रेनिंग
    • ब्लॉग
    • पॉडकास्ट
    शिक्षा को बढ़ावा दें
    • एजुकेशन प्रोग्राम
    • स्केल अप! बिजनेस गेम
    • Odoo के ऑफ़िस में आएं
    सॉफ़्टवेयर पाएं
    • डाउनलोड
    • वर्शन की तुलना करें
    • रिलीज़
    साथ मिलकर काम करें
    • Github
    • फ़ोरम
    • इवेंट
    • अनुवाद
    • पार्टनर बनें
    • Services for Partners
    • अपना अकाउंटिंग फ़र्म रजिस्टर करें
    सेवाएं पाएं
    • पार्टनर ढूंढें
    • अकाउंटेंट खोजें
    • सलाहकार की मदद लें
    • इम्प्लिमेंटेशन सेवाएं
    • कस्टमर रेफ़रेंस
    • सहायता
    • अपग्रेड
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    डेमो देखें
  • कीमत
  • सहायता

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • सीआरएम
  • e-Commerce
  • लेखांकन
  • इन्वेंटरी
  • PoS
  • प्रोजेक्ट
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
टैग (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
टैग (View all)
odoo accounting v14 pos v15
About this forum
Help

publicWidget.Widget.extend example

Subscribe

Get notified when there's activity on this post

This question has been flagged
frontendWidgets
1 Reply
13301 Views
Avatar
Francesco Ballerini

I want to make an rpc call using the helper this._rpc but I only want to execute this on 'my/account' route. I think there are serveral ways to achieve this task in js side, I like this one because I found this comment on PublicWidget 'class':

/**
* The selector attribute, if defined, allows to automatically create an
* instance of this widget on page load for each DOM element which
* matches this selector. The `PublicWidget.$target` element will then be
* that particular DOM element. This should be the main way of instantiating
* `PublicWidget` elements.
*
*/

There are PLENTY of examples on source code, so and I created a js module and outside the scope of widget.extend is working properly (can load js-module and can read console log instructions) but when I go into the scope of widget.extend I cannot see my custom widget properties and handlers are not executed anymore, but the console does not show any errors.

I declared assets_xml (module is loading properly), created js file that is logging infos correctly and extended '/my/account' form to append the selector. Can some one give me a good advice to make my instructions execute ? What am I missing to make this work?


Update: I tried to console.log the registry itself instead of a generic string, it log and I see that my widget is correctly added to prototype object, as I stated in updated comment, also, the selector seems ok, the only thing it comes to my mind is the 'momentum' when my js code is executed, maybe it should be loaded after template is rendered (that would make sense to me) but I'm not sure if that's the matter and I'm not sure what I should do here. I defined assets.xml before the template with id "portal_details_extend_widget" , but even if I switch the position in the manifest I don't see relevant changes, meaning that code inside widget still not executed.


JS MODULE:

odoo.define("idro_portal.my_account_extend", function (require) {
"use strict";

var publicWidget = require('web.public.widget');
var core = require('web.core');
var ServicesMixin = require('web.ServicesMixin');
var webSession = require('web.session');
var rootWidget = require('root.widget');

console.log('logging') //CAN see in console
publicWidget.registry.PublicWidgetMyAccountExtend = publicWidget.Widget.extend({
selector: '.custom_public_widget_extend',

start: function () {
var res = this._super.apply(this, arguments);
console.log('publicwidget'); // CANNOT see in console
this.do_notify('Success', 'Start function notify'); // does NOT work, but also NOT raise any error
return res
},
});
console.log(publicWidget)
//This console.log show object 'registry' in console, if I expand
//I can find 'PublicWidgetMyAccountExtend' in 'registry' key, so it's added
return publicWidget.registry.PublicWidgetMyAccountExtend;});

LOAD SCRIPT IN THE ASSET BUNDLE FRONTEND:

​
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Portal Extend JS">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/idro_portal/static/src/js/my_account_extend.js"/>
</xpath>
</template>
</odoo>


DEFINE SELECTOR IN THE FORM:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- ADD SELECTOR CLASS TO RUN THE JS WIDGET SCRIPT -->
<template id="portal_details_extend_widget" inherit_id="portal.portal_my_details" name="User Profile Extend">
<xpath expr="//form" position="attributes">
<attribute name="class" add="custom_public_widget_extend" separator=" "/>
</xpath>
</template></odoo>
0
Avatar
Discard
Avatar
Francesco Ballerini
Author Best Answer

I figured out: selector is not enough to make publicWidget work on website. 

It just create an istance of the widget for each element matched by the selector but then you need to render the widget to make use of it. One way to achieve this task is by using the following code to initialize, render, and put the widget in the DOM:

*     var myWidget = new MyWidget(this);
* myWidget.appendTo($(".some-div"));

The following snippet works well in the website

odoo.define("idro_portal.my_account_extend", function (require) {
"use strict";

var core = require('web.core');
var publicWidget = require('web.public.widget');

publicWidget.registry.PublicWidgetMyAccountExtend = publicWidget.Widget.extend({
selector: '.custom_public_widget_extend',

start: function () {
var res = this._super.apply(this, arguments);
this.do_notify('Success', 'Widget start notify');
return res
},
});
var PublicWidgetMyAccountExtend = new publicWidget.registry.PublicWidgetMyAccountExtend(this);
PublicWidgetMyAccountExtend.appendTo($(".custom_public_widget_extend"));
return publicWidget.registry.PublicWidgetMyAccountExtend;
});


0
Avatar
Discard
Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Sign up
Related Posts Replies Views Activity
widget many2many_list not working v13 Solved
Widgets
Avatar
2
दिस॰ 22
1291
Front-end Odoo language
frontend
Avatar
Avatar
1
अग॰ 22
7841
What is we-button, we-collapse like things?
frontend
Avatar
0
जुल॰ 20
4116
how to reload widget on every product form view? Solved
Widgets
Avatar
Avatar
3
अप्रैल 17
10751
URL
url frontend
Avatar
0
नव॰ 23
2232
कम्यूनिटी
  • ट्यूटोरियल्स
  • दस्तावेज़
  • फ़ोरम
ओपन सोर्स
  • डाउनलोड
  • Github
  • रनबॉट
  • अनुवाद
सेवाएं
  • Odoo.sh Hosting
  • सहायता
  • अपग्रेड
  • कस्टम डेवलपमेंट्स
  • शिक्षा
  • अकाउंटेंट खोजें
  • पार्टनर ढूंढें
  • पार्टनर बनें
हमारे बारे में
  • हमारी कंपनी
  • ब्रांड ऐसेट
  • संपर्क करें
  • नौकरियां
  • इवेंट
  • पॉडकास्ट
  • ब्लॉग
  • ग्राहक
  • लीगल • गोपनीयता
  • सुरक्षा
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo, बिज़नेस से जुड़े ऐप्लिकेशन का एक कलेक्शन है जो ओपन सोर्स पर आधारित है. इसमें आपकी कंपनी की हर ज़रूरत के लिए ऐप्लिकेशन हैं. जैसे, सीआरएम, ई-कॉमर्स, अकाउंटिंग, इन्वेंट्री, पॉइंट ऑफ़ सेल, प्रोजेक्ट मैनेजमेंट वगैरह.

Odoo की सबसे बड़ी खासियत है कि यह इस्तेमाल करने में बहुत आसान है और यह पूरी तरह से इंटिग्रेट किया हुआ है.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now