documentation/wowl_markdown_doc/components/dialog.md

Dialog

Overview

The Dialog component is one of the main bricks of the web client.

Here are its props

Name	Type	Default	Description
contentClass	string		the classes contained in contentClass are added on the element "div.modal-content"
fullscreen	boolean	false	a class o_modal_full is added on the element "div.modal"
renderFooter	boolean	true	the footer contains a slot buttons and a default button OK
renderHeader	boolean	true	the header contains a title and a button x for "closing" dialog
size	string	"modal-lg"	used to set the dialog size (available suffix: "xl", "lg", "md", sm")
title	string	"Odoo"
technical	boolean	true	a class o_technical_modal is added on the element "div.modal". If set to false, the modal will have the standard frontend style (use this for non-editor frontend features).

Slots

Beside the props, the configuration of a dialog is done via two slots:

The default slot should be used to define the main content of the dialog (display some text or subcomponents).

The slot buttons can be used to add custom buttons in the dialog footer. If the footer is displayed and that slot is not used, a default button OK is added to the footer. A click on that button triggers the event dialog-closed via the method _close (see section below).

So typically, the parent template could look like to

<div>
        <!-- parent main content -->
        <Dialog t-if="state.displayDialog" t-on-dialog-closed="_onDialogClosed">
            <SubComponent t-on-subcomponent-clicked="_onSubcomponentClicked" />
            <t t-set="buttons">
                <button t-on-click="onConfirmClick">Confirm</button>
                <button t-on-click="onDiscardClick">Discard</button>
            </t>
        </Dialog>
        <!-- ... -->
    </div>

Communication with parent

The dialog never closes itself. The dialog parent is responsible of opening/closing the dialog. When the user click on the button x (in the header) or Ok (default button in the footer), a custom event dialog-closed is triggered, allowing the parent to take action or not.

Location in the dom

The Dialog class uses a portal to locate itself in a div with class o_dialog_container but the communication with the parent goes as usual: via props or custom/dom events.