A dialog is a pop-up featuring some content and actions to conduct some operations on that content. It contains a head (title), content (typically forms) and a footer (mainly action controls).
This dialog definition is part of the Magnolia 6 UI framework. The fully qualified class name is info.magnolia.ui.dialog.DialogDefinition
.
If you work with the Magnolia 5 UI framework, see Dialog definition for Magnolia 5 UI instead.
Dialog definitions for Magnolia 5 UI still reside in the same registry and can be used in the apps that are not ported to Vaadin 8 UI; they extend the dialog definition for Magnolia 6 UI (with legacy properties).
Example definition
There are many layout possibilities when using Magnolia 6 UI dialogs (see Layout types). The most common is the tabbed layout with its single-tab and multi-tab use cases.
form: properties: text: label: Text $type: textField light: true footerLayout: $type: defaultEditorActionLayout primaryActions: commit: commit
form: properties: title: $type: textField label: Title description: $type: textField label: Description layout: $type: tabbedLayout tabs: firstTab: label: First fields: - name: title secondTab: label: Second fields: - name: description footerLayout: $type: defaultEditorActionLayout primaryActions: commit: commit
While base dialog definition does not enforce any type of content, the most common is FormDialogDefinition (which uses FormDefinition for content configuration).
Dialog properties
| required Unique identifier for the dialog in the registry. Set automatically according to the definition location. |
| optional, default is Defines actions in the dialog. Specified actions are rendered as components via ActionDefinition. Only the actions that are defined will be provided. If no action is specified, the dialog will have |
| optional, default is Contains the action area configuration. Specifies the action component layout via LayoutDefinition. |
| optional, default is Adds subnodes to match the primary actions defined in the |
| optional, default is Adds subnodes to match the secondary actions defined in the |
| optional Dialog label displayed to editors. The value can be literal or a key of a message bundle. If you do not provide the property, Magnolia will fall back to a generated i18n key. If you do not want to have any label, set the property to an empty string such as |
| optional, default is When |
| optional, default is When |
width | optional, default is Defines the dialog width. Possible values are |
Definition location
YAML file path | JCR node path in config workspace | |
---|---|---|
Dialog definition | $magnolia.resources.dir/<module-name>/dialogs | /modules/<module-name>/dialogs
|
Referencing dialogs
Templates reference dialog definitions in their template definition. This is how the system knows which dialog to associate with the template. Page, area and component templates reference dialogs in the same way by using the dialog
property.
dialog: my-module:components/textImage renderType: freemarker templateScript: /components/textImage.ftl title: Text & Image Component
dialog | optional Dialog definition ID in The ID has two parts separated by a colon:
|
Using dialogs in templates
Dialogs are most commonly used for content entry in components. However, dialogs are also useful for page and area templates. Here are a few suggestions:
- Page dialogs:
- Content entry: use the dialog to enter content that is not necessarily rendered on the page (for example, to enter a meta title and description that are injected into the
<head>
element or a page excerpt for use in teaser components on other pages). - Navigation: set up a field to mark the page for inclusion in or exclusion from navigation. You could also define browser header and tab titles.
- Information: page dialogs can provide editors with useful information. For example, the Content Dependencies module includes a generic tab that collects page dependencies such as other pages and assets. This information is useful when deleting a page.
- Content entry: use the dialog to enter content that is not necessarily rendered on the page (for example, to enter a meta title and description that are injected into the
- Area dialogs: while most areas contain components, dialog content can be rendered by the script in
noComponent
areas.
Reusing configuration
Magnolia provides mechanisms to reuse dialogs and other configuration items. For more information, see Reusing configuration.