Magnolia 6.1 reached end of life on March 31, 2021. This branch is no longer supported, see End-of-life policy.
The collapsible composite field is provided by the Content Editor module which is a DX Core module.
CollapsibleCompositeFieldDefinition extends the composite field to add a clickable header that toggles the visibility of the field's content. Editors can click the header to display and hide the subfields.
Like the composite field, the collapsible composite field defines a complex field that is composed of multiple simple fields.
class: info.magnolia.editor.app.field.CollapsibleCompositeFieldDefinition
fieldType: collapsibleComposite
The collapsible composite field is useful in content editor apps like the Stories app as shown below.
Collapsed:
Expanded:
It can also be used in a standard dialog as well. Here is a collapsible composite field that consists of a text field and a date field:
Collapsible composite field properties
Simple collapsible composite field definition:
form:
tabs:
- name: tabExample
fields:
- name: event
fieldType: collapsibleComposite
label: Event
fields:
- name: title
fieldType: text
label: Title
- name: date
fieldType: date
label: Date
| Node name | Value |
|---|---|
form | |
tabs | |
tabExample | |
fields | |
event | |
fields | |
title | |
fieldType | text |
label | Title |
date | |
fieldType | date |
label | Date |
fieldType | collapsibleComposite |
label | Event |
See Referencing fields for further information.
Composite field properties.
<collapsible composite field name> | required Name of parent composite field. |
| required Node containing child fields. |
| required Name of the child fields. You can use any simple field definition. |
| required Field definition class of the child field. |
| required/optional Any properties the child field supports. |
Properties specific to the collapsible composite field:
| required Definition class of the composite parent field. Use |
| optional, default is Defines whether the field should be collapsed initially. |
| optional, default is Defines the layout of the child fields:
|
| optional, default is Custom property transformer definition. |
In custom content editor apps, this property must remain set to
or
| required Defines the field type via either a field alias name or a fully-qualified field definition class name. See Field definition: Field types. To check the correct form of the name, use the Definitions app. |
type | required, default is Model type of the field. Use the fully qualified class name. See PropertyType for possible values. A default type is typically hard-coded in each definition class. You only need to add this property if you want to override the default implementation (for example, with |
defaultValue | optional Pre-filled default value displayed in the field. The value can be overwritten by the user. Use alphanumeric characters.
|
description | optional Help text displayed when the user clicks the help icon. The value can be literal or retrieved from the message bundle with a key. Use alphanumeric characters in literal values. Not applicable to the static field. |
i18n | optional, default is Enables i18n authoring support which allows editors to write foreign-language or regionally targeted content. A two-letter language identifier (en, de, fr etc.) is displayed on controls where |
i18nBasename | optional, default is the message bundle defined in the dialog definition Message bundle such as |
label | optional Field label displayed to editors. The value can be literal such as If you don't provide the property then Magnolia falls back to a generated i18n key and displays they key in the UI. If you don't want a label at all then define the property and set its value to empty space such as |
name | optional, default is the name of the field's parent node Name of the node where the value is saved. The name |
placeholder | optional The placeholder text to be displayed in the empty field. The property replaces the deprecated placeholder text field.
The field is optional, but you should provide a translation or a hard-coded label, otherwise the empty field will display its auto-generated 18n key instead. |
readOnly | optional, default is Makes the field uneditable. Adding this property has the same effect as creating a static field. |
required | optional, default is Makes the field required (mandatory). An asterisk is displayed next to the field label. See also Checking for null values. |
requiredErrorMessage | optional, default is Error message displayed when required is true and the user saves an empty field. The value can be literal or retrieved from the message bundle with a key such as |
styleName | optional Adds one or more style names to this component. Multiple styles can be specified as a space-separated list of style names such as |
transformerClass | optional Property transformer classes define how field values are stored in the repository. Each field has a default transformer class. You don't need to define a class unless you want to override the default. The value is a fully-qualified class name.
|
Applied only when creating a new item, not for already existing items.Best practice
When nesting composite fields, use the delegating transformer classes, DelegatingCompositeFieldTransformer or DelegatingMultiValueFieldTransformer, rather than the other available transformer classes.
Overview
Content Tools