Custom fields

You can create your own fields when the default fields do not meet your requirements. Magnolia fields are implemented as Vaadin components.

You can 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.

personaSwitcher is an example of a custom field. Editors can quickly switch between personas while previewing the page.

This custom field definition is part of the Magnolia 6 UI framework.

If you work with the Magnolia 5 UI framework, see Custom fields for Magnolia 5 UI instead.

Required classes

Each field needs the following classes:

Definition class

A definition class defines the field. It typically reads properties from the field definition. The definition class must implement the info.magnolia.ui.field.FieldDefinition interface.

Factory class

A factory class creates and initializes Vaadin fields based on the field definition.

Example

The info.magnolia.ui.field.factory.TextFieldFactory creates a text field. It contains logic to react to the definition properties.

  • If the rows property equals 1, the factory creates a single-line input element.

  • If rows is greater than 1, the factory creates a multiline text area.

Factory classes extend info.magnolia.ui.field.factory.AbstractFieldFactory, which can handle all common simple field properties.

Field class

A field class is only needed if you cannot find a single Vaadin field that meets your requirements. Simple fields do not have a field class; the factory class creates the matching Vaadin field directly. More complex fields need a field class.

Example

A link field is a combination of a text box and a button. Vaadin does not provide this combination out of the box, so a info.magnolia.ui.field.LinkField class that extends Vaadin CustomField is needed. The custom field class provides a layout with a text field on the left and a button on the right. It also registers a preview component that displays a thumbnail of the link target if defined.

The link field is an example that provides all three (definition, factory and field) classes:

  • info.magnolia.ui.field.LinkFieldDefinition

  • info.magnolia.ui.field.factory.LinkFieldFactory

  • info.magnolia.ui.field.LinkField

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules