Skip to Content
Odoo Menu
  • Sign in
  • Try it free
  • Apps
    Finance
    • Accounting
    • Invoicing
    • Expenses
    • Spreadsheet (BI)
    • Documents
    • Sign
    Sales
    • CRM
    • Sales
    • POS Shop
    • POS Restaurant
    • Subscriptions
    • Rental
    Websites
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Supply Chain
    • Inventory
    • Manufacturing
    • PLM
    • Purchase
    • Maintenance
    • Quality
    Human Resources
    • Employees
    • Recruitment
    • Time Off
    • Appraisals
    • Referrals
    • Fleet
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Events
    • Marketing Automation
    • Surveys
    Services
    • Project
    • Timesheets
    • Field Service
    • Helpdesk
    • Planning
    • Appointments
    Productivity
    • Discuss
    • Approvals
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Third party apps Odoo Studio Odoo Cloud Platform
  • Industries
    Retail
    • Book Store
    • Clothing Store
    • Furniture Store
    • Grocery Store
    • Hardware Store
    • Toy Store
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Beverage Distributor
    • Hotel
    Real Estate
    • Real Estate Agency
    • Architecture Firm
    • Construction
    • Estate Management
    • Gardening
    • Property Owner Association
    Consulting
    • Accounting Firm
    • Odoo Partner
    • Marketing Agency
    • Law firm
    • Talent Acquisition
    • Audit & Certification
    Manufacturing
    • Textile
    • Metal
    • Furnitures
    • Food
    • Brewery
    • Corporate Gifts
    Health & Fitness
    • Sports Club
    • Eyewear Store
    • Fitness Center
    • Wellness Practitioners
    • Pharmacy
    • Hair Salon
    Trades
    • Handyman
    • IT Hardware & Support
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    Others
    • Nonprofit Organization
    • Environmental Agency
    • Billboard Rental
    • Photography
    • Bike Leasing
    • Software Reseller
    Browse all Industries
  • Community
    Learn
    • Tutorials
    • Documentation
    • Certifications
    • Training
    • Blog
    • Podcast
    Empower Education
    • Education Program
    • Scale Up! Business Game
    • Visit Odoo
    Get the Software
    • Download
    • Compare Editions
    • Releases
    Collaborate
    • Github
    • Forum
    • Events
    • Translations
    • Become a Partner
    • Services for Partners
    • Register your Accounting Firm
    Get Services
    • Find a Partner
    • Find an Accountant
    • Meet an advisor
    • Implementation Services
    • Customer References
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Get a demo
  • Pricing
  • Help

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

  • CRM
  • e-Commerce
  • Accounting
  • Inventory
  • PoS
  • Project
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Tags (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
13334 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
Dec 22
1291
Front-end Odoo language
frontend
Avatar
Avatar
1
Aug 22
7848
What is we-button, we-collapse like things?
frontend
Avatar
0
Jul 20
4119
how to reload widget on every product form view? Solved
Widgets
Avatar
Avatar
3
Apr 17
10760
URL
url frontend
Avatar
0
Nov 23
2242
Community
  • Tutorials
  • Documentation
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Translations
Services
  • Odoo.sh Hosting
  • Support
  • Upgrade
  • Custom Developments
  • Education
  • Find an Accountant
  • Find a Partner
  • Become a Partner
About us
  • Our company
  • Brand Assets
  • Contact us
  • Jobs
  • Events
  • Podcast
  • Blog
  • Customers
  • Legal • Privacy
  • Security
الْعَرَبيّة 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 is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.

Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

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