Skip to Content
Menu
This question has been flagged

Has anyone ever built a standalone OWL application and used Odoo’s Dialog Service?

I'm following the official documentation here:

https://www.odoo.com/documentation/18.0/developer/howtos/standalone_owl_application.html

I've tried to keep the UI as minimal as possible and followed the code from the documentation. My root component looks more or less like the example. When I console.log(this.dialogService), the function is there. I also checked the Elements tab and confirmed that the modal-open class is injected into the <body>.

However, the modal dialog does not appear on the screen.

Has anyone encountered a similar issue or found a solution?

Avatar
Discard
Author Best Answer

I’m currently on Odoo 18 Community. After checking the source code (versions 15 to 18) on GitHub, I couldn’t find a component named DialogContainer.

I’ve also attempted to use DialogWrapper and Dialog, but unfortunately the dialog still doesn’t appear on screen.

Have you tested the code snippet you shared? If so, would you be willing to share a minimal working module? That would be extremely helpful.

Avatar
Discard
Best Answer

.

Avatar
Discard
Best Answer

Hii,

The dialog service depends on the DialogContainer component being mounted somewhere in your root DOM. Otherwise, no dialogs will render even though the service is functional and modal-open gets injected.

Make sure your root OWL app includes the DialogContainer , like this:

import { mount, Component, useService } from "@odoo/owl";

import { DialogContainer } from "@web/core/dialog/dialog_container";


class Root extends Component {

  static template = "test_mobile.Root";


  setup() {

    this.dialogService = useService("dialog");

  }


  ShowDialog() {

    console.log("ShowDialog clicked", this.dialogService);

    this.dialogService.add(AlertDialog, {

      body: "This is a working OWL Alert Dialog!",

    });

  }

}


Root.components = { DialogContainer };


mount(Root, {

  target: document.body,

  services: {

    dialog: dialogService,

  },

});

Make sure you're importing dialogService from @web/core/dialog/dialog_service

Make Sure You Actually Render DialogContainer in Your Template
<DialogContainer/>


i hope it is usefull


Avatar
Discard
Author

Thanks for the detailed explanation!

I’ve tried that, but it still doesn’t work. I checked the import:
import { DialogContainer } from "@web/core/dialog/dialog_container";

It seems that DialogContainer no longer exists — or at least I couldn’t find it.
Maybe you meant:
import { Dialog } from "@web/core/dialog/dialog";

If so, I’ve also tried that, but unfortunately the dialog still doesn’t show up.

I've pushed the sample code to GitHub in case you'd like to take a look or help troubleshoot:
🔗 https://github.com/bayuik/test_mobile

Really appreciate any help!

Hii,
In your JS (likely root.js):
Make sure you include this:
import { mount, Component, useService } from "@odoo/owl";
import { dialogService } from "@web/core/dialog/dialog_service";
import { DialogContainer } from "@web/core/dialog/dialog_container"; // ✅ required
import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";

export class Root extends Component {
static template = "test_mobile.Root";

setup() {
this.dialogService = useService("dialog");
}

ShowDialog() {
console.log("ShowDialog clicked", this.dialogService);
this.dialogService.add(AlertDialog, {
body: "This is a working OWL Alert Dialog!",
});
}
}

Root.components = { DialogContainer };

mount(Root, {
target: document.body,
services: {
dialog: dialogService,
},
});
In your QWeb XML (likely root.xml):
Ensure that your root template renders the DialogContainer like this:
<t t-name="test_mobile.Root">
<div>
<h1>Hello World!</h1>
<button t-on-click="ShowDialog">Show Dialog</button>

<!-- required so dialogs can be shown -->
<DialogContainer/>
</div>
</t>
If <DialogContainer/> is not included, the dialogService still works in memory, but no modal will appear.
In __manifest__.py
Make sure these files are included in your assets:
'assets': {
'web.assets_frontend': [
'test_mobile/static/src/static/*.js',
'test_mobile/static/src/static/*.xml',
],
},
Rebuild or Upgrade Your Module
try this i hope it is usefull

Author

I’m currently on Odoo 18 Community. After checking the source code (versions 15 to 18) on GitHub, I couldn’t find a component named DialogContainer.

I’ve also attempted to use DialogWrapper and Dialog, but unfortunately the dialog still doesn’t appear on screen.

Have you tested the code snippet you shared? If so, would you be willing to share a minimal working module? That would be extremely helpful.

Related Posts Replies Views Activity
2
Apr 25
1681
0
Apr 25
336
0
Aug 25
58
0
Jan 25
1032
1
Nov 24
1799