Magnolia 6.1 reached end of life on March 31, 2021. This branch is no longer supported, see End-of-life policy.
A field is an HTML form element that allows a user to perform a task such as enter text, upload an image or select a date. Magnolia ships with a number of fields that should fulfill most needs.
This form has four text fields and one checkbox field:
To add a field on your form, define the field inside a tab (see example below). At minimum, a field definition must contain a class
or a fieldType
property which tells Magnolia what type of field it should render. Set the property value to a valid field definition class name (for class
) or to a valid field alias name (for fieldType
). All fields support further common properties for defining things such as labels and descriptions.
form: tabs: - name: tabMain label: Text fields: - name: title fieldType: text label: pages.pageProperties.title.label description: pages.pageProperties.title.description i18n: true required: true type: string
Node name | Value |
---|---|
form | |
tabs | |
tabMain | |
fields | |
title | |
fieldType | text |
description | pages.pageProperties.title.description |
i18n | true |
label | pages.pageProperties.title.label |
required | true |
type | String |
See the complete form definition in Git.
You can use these properties with any field unless specified otherwise.
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.
|
fieldType | class |
---|---|
text | info.magnolia.ui.form.field.definition.TextFieldDefinition |
richText | info.magnolia.ui.form.field.definition.RichTextFieldDefinition |
date | info.magnolia.ui.form.field.definition.DateFieldDefinition |
hidden | info.magnolia.ui.form.field.definition.HiddenFieldDefinition |
link | info.magnolia.ui.form.field.definition.LinkFieldDefinition |
code | info.magnolia.ui.form.field.definition.CodeFieldDefinition |
multiValue | info.magnolia.ui.form.field.definition.MultiValueFieldDefinition |
password | info.magnolia.ui.form.field.definition.PasswordFieldDefinition |
select | info.magnolia.ui.form.field.definition.SelectFieldDefinition |
optionGroup | info.magnolia.ui.form.field.definition.OptionGroupFieldDefinition |
twinColSelect | info.magnolia.ui.form.field.definition.TwinColSelectFieldDefinition |
checkbox | info.magnolia.ui.form.field.definition.CheckboxFieldDefinition |
composite | info.magnolia.ui.form.field.definition.CompositeFieldDefinition |
switchable | info.magnolia.ui.form.field.definition.SwitchableFieldDefinition |
static | info.magnolia.ui.form.field.definition.StaticFieldDefinition |
basicUpload | info.magnolia.ui.form.field.definition.BasicUploadFieldDefinition |
damUpload | info.magnolia.dam.app.ui.field.definition.DamUploadFieldDefinition |
collapsibleComposite | info.magnolia.editor.app.field.CollapsibleCompositeFieldDefinition |
expandingText | info.magnolia.editor.app.field.ExpandingTextFieldDefinition |
Your Magnolia installation may contain more fields depending on the installed modules. Use the Definitions app to see all available field types.
info.magnolia.ui.form.field.transformer.basic.BasicTransformer
info.magnolia.ui.form.field.transformer.composite.CompositeTransformer
For switchable fields: info.magnolia.ui.form.field.transformer.composite.SwitchableTransformer
For multivalue field: info.magnolia.ui.form.field.transformer.multi.MultiValueTransformer
Other available transformer classes:
info.magnolia.ui.form.field.transformer.composite.DelegatingCompositeFieldTransformer
info.magnolia.ui.form.field.transformer.multi.DelegatingMultiValueFieldTransformer
info.magnolia.ui.form.field.transformer.composite.NoOpCompositeTransformer
info.magnolia.ui.form.field.transformer.multi.MultiValueJSONTransformer
info.magnolia.ui.form.field.transformer.multi.MultiValueChildrenNodeTransformer
info.magnolia.ui.form.field.transformer.multi.MultiValueChildNodeTransformer
info.magnolia.ui.form.field.transformer.multi.MultiValueSubChildrenNodeTransformer