Comments (13)
I just did this inside my template:
<template id="finance.web_portfolio_template">
<t t-call="website.layout">
<div id="mount-point"></div>
<script type="module">
setTimeout(() => {
const { mount } = owl;
const el = document.getElementById('mount-point');
const { registry } = odoo.runtimeImport('@web/core/registry')
const PortfolioAsset = registry.category("public_components").get("finance.PortfolioAsset");
mount(PortfolioAsset, el)
}, 1000)
</script>
</div>
</t>
</template>
It's a bit hacky but it did find the component and mount it to the front end. The timeout is necessary to wait for global variables like owl and odoo to become available
from owl.
Ok this is a bit more of a robust solution and loads faster
const mountComponent = () => {
console.log(`Trying to mount`)
try {
if (!owl) {
return
}
} catch (e) {
console.log(`Owl not loaded, timing out`)
setTimeout(mountComponent, 100)
return
}
const { mount } = owl;
const el = document.getElementById('mount-point');
const { registry } = odoo.runtimeImport('@web/core/registry')
const PortfolioAsset = registry.category("public_components").get("finance.PortfolioAsset");
mount(PortfolioAsset, el)
}
mountComponent()
from owl.
I have written a guide on how to mount components in the website and portal in 17.0 and above here: https://www.odoo.com/documentation/17.0/developer/howtos/frontend_owl_components.html
In 16.0 this is not well supported by the framework. You can do it but it's undocumented and not officially supported so you're on your own. And this question is an Odoo question, not an Owl question so this isn't really the right place to discuss this.
from owl.
Looks like an odoo question rather than a owl one
from owl.
causes storm in the browser, impossible to start a service already started
The issue here is that we already start the services on the website and portal and they can only be started once, in those cases you want to reuse the environment that contains the started services. In version 17.0 you should be able to get your app mounted automatically by the public_component service, in prior versions there is unfortunately no great way to access that env, so you'll have to access it with a workaround, for example by creating a dummy service that stores a reference to the env in an object exported by the module.
from owl.
Hi @sdegueldre , thanks for this great information
from owl.
Hi @sdegueldre , and @flotho ,
I tried this method in odoo 17, and i had the same problem when i called mountComponent(),
An error from the console was display with the following message "service is niot initialized" and a storm of
infinite loop errors about lifecycle component.
This is a same error as flotho.
Regards
/** @odoo-module **/
import { whenReady } from "@odoo/owl";
import { mountComponent } from "@web/env";
import { componentHelloWorld } from "./component/component";
whenReady(() => {
console.log('HELLO START');
let helloWorldById = document.getElementById("wrap");
console.log(helloWorldById);
mountComponent(componentHelloWorld, helloWorldById);
});
from owl.
Hum, thanks @DorianMAG
We found how to work in frontened with the new design in v17.
First we have to add the component to public_component as explained previsously
At this moment your services will be correctly available if you add it to public_components and if you use this tag in your QWEB https://github.com/odoo/odoo/blob/17.0/addons/web/static/src/public/public_component_service.js#L24 it will rock !
BTW @sdegueldre @ged-odoo this is a great improvement in public components !!! Awesome
from owl.
Hi @sdegueldre , and @flotho ,
I tried this method in odoo 17, and i had the same problem when i called mountComponent(), An error from the console was display with the following message "service is niot initialized" and a storm of infinite loop errors about lifecycle component.
This is a same error as flotho.
Regards
/** @odoo-module **/ import { whenReady } from "@odoo/owl"; import { mountComponent } from "@web/env"; import { componentHelloWorld } from "./component/component"; whenReady(() => { console.log('HELLO START'); let helloWorldById = document.getElementById("wrap"); console.log(helloWorldById); mountComponent(componentHelloWorld, helloWorldById); });
Is there anything new about that? I have a similar code and get infinite loop. when i use just mount
i couldn't use useService and when i use mountComponent
and get infinite loop
from owl.
thanks @richard-hp , which version ar you working on.
In 17 the syntax owl-component-nameoftheowlcompanent make the deal https://github.com/odoo/odoo/blob/17.0/addons/web/static/src/public/public_component_service.js#L24
from owl.
My solution was for 16, as 17 has official way to do this now, you don't need this hack in 17
from owl.
"I'm currently working with v16 and using a controller router to render QWeb templates. Inside these templates, I'm mounting Owl components using the div's ID. However, I'm encountering an issue when trying to implement the useService hook. . Any insights into why this might be happening?
Additionally, whenever I try to import { barcodeGenericHandlers } from "@barcodes/barcode_handlers"; and { barcodeService } from "@barcodes/barcode_service";, I'm facing dependency errors and can't seem to retrieve any content on my Owl template. Any suggestions on how to resolve this?"
-----This is my js code------
/** @odoo-module **/
const {Component,mount,whenReady,useState,useEnv,onWillStart,EventBus} = owl;
import {templates} from "@web/core/assets";
import { useBus, useService } from "@web/core/utils/hooks";
// Popup Component
class BarcodeErrorPopup extends Component {
static template = 'multi_language_module.BarcodeErrorPopupTemplate';
setup() {
const barcode = useService("barcode");
useBus(barcode.bus, "barcode_scanned", this.onBarcodeScanned);
}
onBarcodeScanned(barcode , target) {
const { barcode } = event.detail;
console.log('Event Details',event.detail)
}
}
BarcodeErrorPopup.template = 'multi_language_module.BarcodeErrorPopupTemplate';
whenReady(() => {
const element = document.querySelector('#call_owl_error_popup_template');
if (element) {
mount(BarcodeErrorPopup, element, {templates});
}
});
----This is my manifest file -----
'depends' : ['base','web','barcodes','barcodes_gs1_nomenclature'],
'web.assets_frontend': [ 'multi_language_module/static/src/components/barcode_popup.xml',
'multi_language_module/static/src/components/barcode_popup.js',
],
----This is my qweb template that render useing controller route ----
<template id="pos_barcode_error_popup_template">
<t t-call-assets="web.assets_backend" t-js="false"/>
<t t-call-assets="web.assets_backend" t-css="false"/>
<t t-call-assets="web.assets_common" t-css="false"/>
<t t-call-assets="web.assets_common" t-js="false"/>
<t t-call-assets="web.assets_frontend" t-css="false"/>
<div id="call_owl_error_popup_template"/>
</template>
from owl.
Locking this issue for the following reasons:
- This is not supported by the framework itself in 16.0, if you want access to the services you're on your own. Either start them by hand, or, if you're using the assets_frontend, find a way to get your hands on the existing env and use that. I might write a guide on that in the 16.0 documentation at some point since it appears to be something people frequently want to do.
- This has nothing to do with Owl and is an issue with Odoo, this is not the right place to discuss this.
- Issues are not a support forum, I have repeatedly helped people with these issues out of good will, but investingating why third-party custom code does not work is not part of my duties. If you believe you are using the framework correctly but things are not working, that would be a bug and you should report it on the appropriate repo: odoo/odoo if it's a bug in the code, odoo/documentation if the documentation is wrong. odoo/owl is for bugs in owl itself or its documentation.
- If all of the above do not apply to you, your report should clearly be inside of a new issue since most of the above points apply to this issue.
from owl.
Related Issues (20)
- t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop. HOT 3
- useService("user") doesn't work with public component HOT 6
- Question: Mounting component with javascript HOT 2
- [crash] slot content re-renders when it should be destroyed HOT 5
- [perf] props (reactive object) should not be observed outside of rendering HOT 3
- How to do routing in owl js version 2.2.10 because router import gives undefined HOT 2
- Please explain how to do routing in owl js HOT 1
- make array work with t-att-class
- clean up variable scoping semantics
- Default content in t-esc is not translated
- Lot of vulnerabilies when follow quick start HOT 3
- useComponent crashes if called outside of setup
- Normalize line endings in files generated by the release script
- Options in component "SelectMenu" overflow HOT 3
- Search in component "SelectMenu" doesn't work properly HOT 4
- Blocking UI doesn't effect on popups HOT 1
- New props in a component that propagate to all extensions HOT 1
- [BUG][ALL VERSIONS]: OWL error when a page is Google translated and OWL modifies a list of elements
- T-on-blur/focus on iframe doesn't work
- `t-if=""` throws an unfriendly error message
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from owl.