Hi,
In Odoo 17/18 (OWL-based frontend), the dialogs you open with dialogService.add() are instances of the Dialog component. By default, they render with a header section that contains the title and the close (X) button. Unfortunately, there isn’t a built-in option in the service API to suppress just the header, so you need to tweak the component behavior yourself.
1. Use a patch on the Dialog component
You can patch the Dialog component in JavaScript to make the header optional:
/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { Dialog } from "@web/core/dialog/dialog";
patch(Dialog.prototype, {
setup() {
this._super();
// You could add a prop (e.g. hideHeader) to control this
},
get showHeader() {
// if the props specify hideHeader, do not render the header
return !this.props.hideHeader;
},
});
Then, when calling dialogService.add(), you’d pass:
this.dialogService.add(Dialog, {
hideHeader: true,
body: "Custom body content here",
buttons: [{ text: "OK", primary: true, close: true }],
});
This way you keep the footer buttons but no title/X.
2. Custom wrapper dialog component
Another approach is to create a new component that wraps Dialog but overrides the template so it doesn’t include the header. Then you can open this custom component via dialogService.add().
/** @odoo-module **/
import { Dialog } from "@web/core/dialog/dialog";
export class HeaderlessDialog extends Dialog {
static template = "your_module.HeaderlessDialog"; // custom template without header
}
In your XML template, remove the header entirely but keep the body/footer slots.
If it’s for a single use case, CSS with a custom class is the quickest. If you want reusable control, patching Dialog to support a hideHeader prop is the cleanest solution.
Hope it helps
