Create custom field in Magnolia CMS -

Question

I'm trying to create custom field in Magnolia CMS. For testing purpose I tried the simplest example and did it the same way as the TextField.

Here is my Definition:

package info.magnolia.blossom.sample.module.ui.form.field.definition;

import info.magnolia.i18nsystem.I18nText;
import info.magnolia.ui.field.ConfiguredFieldDefinition;
import info.magnolia.ui.field.FieldType;

@FieldType("customTextField")
public class CustomTextFieldDefinition extends ConfiguredFieldDefinition<String>  {
    private int rows;
    private int maxLength = -1;
    private String placeholder;

    @Inject
    public CustomTextFieldDefinition() {
        this.setType(String.class);
        this.setFactoryClass(CustomTextFieldFactory.class);
    }


    @Override
    public String getLabel() {
        return super.getLabel() + "33";
    }

    @I18nText(
            fallback = ""
    )
    public String getPlaceholder() {
        return this.placeholder;
    }

    public int getRows() {
        return this.rows;
    }

    public int getMaxLength() {
        return this.maxLength;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public void setMaxLength(int maxLength) {
        this.maxLength = maxLength;
    }

    public void setPlaceholder(String placeholder) {
        this.placeholder = placeholder;
    }
}

Here is my Factory class:

package info.magnolia.blossom.sample.module.ui.form.field.factory;

import com.vaadin.data.HasValue;
import com.vaadin.ui.AbstractTextField;
import com.vaadin.ui.Component;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.TextField;
import info.magnolia.blossom.sample.module.ui.form.field.definition.CustomTextFieldDefinition;
import info.magnolia.objectfactory.ComponentProvider;
import info.magnolia.ui.field.factory.AbstractFieldFactory;

import javax.inject.Inject;

public class CustomTextFieldFactory  extends AbstractFieldFactory<String, CustomTextFieldDefinition> {

    @Inject
    public CustomTextFieldFactory(CustomTextFieldDefinition definition, ComponentProvider componentProvider) {
        super(definition, componentProvider);
    }

    @Override
    public HasValue<String> createField() {
        return super.createField();
    }

    @Override
    public Component createFieldComponent() {
        Object field;
        if (this.getDefinition().getRows() > 1) {
            TextArea textArea = new TextArea();
            textArea.setRows(this.getDefinition().getRows() + 10);
            field = textArea;
        } else {
            field = new TextField();
        }

        if (this.getDefinition().getMaxLength() != -1) {
            ((AbstractTextField)field).setMaxLength(this.getDefinition().getMaxLength());
        }

        ((AbstractTextField)field).setPlaceholder(this.getDefinition().getPlaceholder());
        return (Component)field;
    }
}

Here is my register:

This is my dialog:

form:
  tabs:
    - name: tabMain
      fields:
        - name: title
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
        - name: resultPage
          i18n: true
          class: info.magnolia.blossom.sample.module.ui.form.field.CustomTextFieldDefinition
          label: Test Field
actions:
  commit:
    class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
  cancel:
    class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition

This is what I see as a result: As you can see the second field is not shown.

I don't have errors in the console. The only "Minor" error I have in the definitions app is this one:

Element [info.magnolia.blossom.sample.module.ui.form.field.definition.CustomTextFieldDefinition@7e441530] 
of type [info.magnolia.blossom.sample.module.ui.form.field.definition.CustomTextFieldDefinition] 
may not be added to the collection of type 
[interface info.magnolia.ui.form.field.definition.FieldDefinition]

Title: Source data processing problem
Path: /form/tabs/tabMain/fields/resultPage

I'm using Magnolia 6.2.3.

Any idea what I'm missing?

Thanks!

Answer 1

Your example is all correct. However, you try to add that dialog to a 'compatibility-app'. That's why you receive the error saying 'I cannot add this type' and it shows that it tries to use different field definition (the one under definition package)

This page explains well the logic behind compatibility-apps and new apps.

https://documentation.magnolia-cms.com/display/DOCS62/Changes+in+Magnolia+6+UI