A field is an HTML form element that allows you to perform a task such as enter text, upload an image or select a date.
This field definition is part of the Magnolia 6 UI framework. The fully qualified class name is info.magnolia.ui.field.FieldDefinition
.
If you work with the Magnolia 5 UI framework, see Field definition for Magnolia 5 UI instead.
Example definition
To add a field to your form, you need to define a field. Field definition must contain a class
or $type
property, which tells Magnolia what type of field to render. Set the property value to a fully qualified class name (for class
) or field alias (for $type
). Depending on the field type, a number of common simple field properties or complex field properties are supported.
firstName: label: First name $type: textField required: true lastName: label: Last name $type: textField required: true email: label: Email $type: textField required: true validators: email: $type: emailValidator
Common simple field properties
You can use the following properties with any simple field (all except composite, multi and switchable fields).
| required Name of the field definition item. Derived from the configured node name. Use alphanumeric characters without spaces. |
| required (unless Type of the field definition item. The value must be a fully qualified class name and a subtype of |
| You can use this as a shortcut for See Field types for possible values. |
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 |
| optional Converts values between presentation (UI) and model (stored data). The property must extend com.vaadin.data.Converter. |
| optional, default is translated Message shown when there is an error in the conversion process. The value can be literal or a key of a message bundle. Use alphanumeric characters in literal values. |
| 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. |
| optional Help text displayed when the user clicks the help icon. The value can be literal or a key of a message bundle. |
| optional Defines the factory class that initializes and builds the Vaadin form field. The default factory class depends on the particular field. The value must be a fully qualified class name and a subtype of |
| optional Defines the binder class that applies configuration parameters from the field. |
| optional, default is Enables i18n authoring support, which allows editors to write foreign-language or regionally targeted content. A two-letter language identifier ( |
| optional Field 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 Makes the field uneditable. |
| optional, default is Makes the field required. An asterisk is displayed next to the field label. |
| optional, default is translated Error message shown when |
| optional Additional style information for an editor property definition item applied to the element when the form is rendered. The value can be a CSS class or a list of CSS classes separated by white spaces. |
validators | optional List of field validator definition items. Any value must be a subtype of See Field validators for more information. |
Common complex field properties
You can use the following properties with any complex field (composite, multi and switchable fields).
| required Name of the field definition item. Derived from the configured node name. Use alphanumeric characters without spaces. |
| required (unless Type of the field definition item. The value must be a fully qualified class name and a subtype of |
| You can use this as a shortcut for See Field types for possible values. |
| required, default is
Node with a See Item providers for more information. |
| optional Help text displayed when the user clicks the help icon. The value can be literal or a key of a message bundle. |
| optional, default is Enables i18n authoring support, which allows editors to write foreign-language or regionally targeted content. A two-letter language identifier ( |
| optional Field 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 Additional style information for an editor property definition item applied to the element when the form is rendered. The value can be a CSS class or a list of CSS classes separated by white spaces. |
Field types
$type | class |
---|---|
checkBoxField | info.magnolia.ui.field.CheckBoxFieldDefinition |
checkBoxGroupField | info.magnolia.ui.field.CheckBoxGroupFieldDefinition |
codeField | info.magnolia.ui.field.CodeFieldDefinition |
|
|
|
|
dateField | info.magnolia.ui.field.DateFieldDefinition |
hiddenField | info.magnolia.ui.field.HiddenFieldDefinition |
|
|
listSelectField | info.magnolia.ui.field.ListSelectFieldDefinition |
|
|
passwordField | info.magnolia.ui.field.PasswordFieldDefinition |
radioButtonGroupField | info.magnolia.ui.field.RadioButtonGroupFieldDefinition |
richTextField | info.magnolia.ui.field.RichTextFieldDefinition |
sliderField | info.magnolia.ui.field.SliderFieldDefinition |
staticField | info.magnolia.ui.field.StaticFieldViewDefinition |
switchableField | info.magnolia.ui.field.SwitchableFieldDefinition |
textField | info.magnolia.ui.field.TextFieldDefinition |
tokenField | info.magnolia.ui.field.TokenFieldDefinition |
twinColSelectField | info.magnolia.ui.field.TwinColSelectFieldDefinition |
Your Magnolia installation may contain more fields depending on the installed modules.