Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
I want to block the UI and show the loading spinner (equivalent to "blockUI()") in an OWL Component. Please find code below:
XML:
JS:
/** @odoo-module **/
import { registry } from "@web/core/registry";
const { Component, useState} = owl;
export class OwlComponent1 extends Component {
setup() {
super.setup();
}
async showSpinner() {
// await blockui and show spinner
}
}
Hi,
Use the following code to block the UI and show the loading spinner:
import { Component } from "@odoo/owl";
// here you can import the use service hook
import { useService } from "@web/core/utils/hooks";
export class Spinner extends Component {
static template = "SpinnerTemplate";
setup() {
// In odoo already has more services we can use the ui-service from useService hook
this.uiService = useService("ui");
}
showSpinner() {
// When the function is called, the user interface will be blocked
// and a loading spinner will be displayed.
this.uiService.block()
}
}
<t t-name="SpinnerTemplate">
<h1>Block Ui</h1>
<!--the button to trigger the function showSpinner-->
<button t-on-click="showSpinner">Show Spinner</button>
</t>
Hope this helps.
Create an account today to enjoy exclusive features and engage with our awesome community!
Регистрация| Related Posts | Ответы | Просмотры | Активность | |
|---|---|---|---|---|
|
1
мар. 24
|
325 | ||
|
2
июл. 24
|
4902 | ||
|
0
янв. 24
|
1512 | ||
|
0
апр. 24
|
2397 | ||
|
0
нояб. 23
|
2054 |
1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.
XML:
<button t-on-click="showSpinner">Button</button>