DEPRECATED
This field definition has been deprecated since Magnolia 6.0. It is part of the Magnolia 5 UI framework.
For the updated implementation, see Field definition for Magnolia 6 UI instead.
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.
Example
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.
Common field properties
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. |
defaultValue | optional Pre-filled default value displayed in the field. The value can be overwritten by the user. Use alphanumeric characters. Applied only when creating a new item, not for already existing items. |
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 do not provide the property, Magnolia will fall back to a generated i18n key and display the key in the UI. If you do not want a label at all, define the property and set its value to a blank 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 Placeholder text to be displayed when the field is empty. The value is i18n-able. |
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. Complex field definitions may define a different default transformer in their constructor. See Transforming field values for more. |
type | optional, most fields set a default value automatically JCR property type of the stored value such as |
Field types
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.