Skip to Content
เมนู
คุณต้องลงทะเบียนเพื่อโต้ตอบกับคอมมูนิตี้
คำถามนี้ถูกตั้งค่าสถานะ
1 ตอบกลับ
3861 มุมมอง

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
}
}
อวตาร
ละทิ้ง
ผู้เขียน

XML:
<button t-on-click="showSpinner">Button</button>

คำตอบที่ดีที่สุด

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.


อวตาร
ละทิ้ง
Related Posts ตอบกลับ มุมมอง กิจกรรม
1
มี.ค. 24
325
2
ก.ค. 24
5202
0
ม.ค. 24
1881
0
เม.ย. 24
2598
0
พ.ย. 23
2273