Dialog definition
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 for the base definition is
If you work with the Magnolia 5 UI framework, see Dialog definition for Magnolia 5 UI instead. |
The base dialog definition does not enforce any type of content. The most common dialog definition is info.magnolia.ui.dialog.FormDialogDefinition, which uses info.magnolia.ui.editor.FormDefinition for content configuration.
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
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
Dialog properties
Property | Description |
---|---|
|
required Node containing fields and similar components as well as their layout. See Form definition for more information. |
|
optional, default is Defines actions in the dialog. Specified actions are rendered as components via info.magnolia.ui.api.action.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 info.magnolia.ui.framework.layout.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 |
|
optional, default is Defines the dialog width. Possible values are |
Definition location
YAML file path | JCR node path in config workspace |
|
---|---|---|
Dialog definition |
|
|
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
Property | Description |
---|---|
|
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.
-
-
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.