Page History

...

Create your own fields when the default fields do not meet your requirements. Magnolia fields are implemented as Vaadin components. Start by looking through the Vaadin sampler. When you find a matching field, implement it as a simple Vaadin Field in Magnolia. If you need a more complex field that is a composition of more than one simple field, look at the composite field or implement a Vaadin CustomField.

...

For example,

Field class

A field class is only needed if you cannot find a single Vaadin field that meets your requirements. Simple fields such as Text do not have a field class - the factory class simply creates the matching Vaadin field directly. However, more complex fields need a field class.

For example, Link is a compound of a text box and a button. Vaadin doesn't provide this combination out of the box, so we need a

The Link field link field is an example that provides all three classes:

...

If you add the field to the UI Framework module it becomes globally available. Here is an example how the UI Framework module registers the Text the text field.

You can configure field types in a YAML definition file inside a light module folder.

...

info.magnolia.ui.form.field.factory.TextFieldFactory

definitionClass: info.magnolia.ui.form.field.definition.TextFieldDefinition
factoryClass: 

Using a field in a form

Once the field is registered, add it to a dialog or form by referencing the field definition class in the class property or by referencing the field alias name in the fieldType property. See Field definition for more.

If you create a complex field and need to store values in the repository in a specific way, see Transforming field values.