Adding Settings to Form Field Types

Once you develop a Form Field Type, you might need to add settings to it. For example, a Time field might accept different time formats. Here you’ll learn how to add settings to form field types by adding a mask and a placeholder to the Time field type created in the previous tutorial.

To add settings to form field types, take these steps:

  • Write an interface that extends the default field type configuration, DefaultDDMFormFieldTypeSettings.

  • Update the *FormFieldType to refer the new interface created on the previous step.

  • Update the *FormFieldRenderer so it makes the new configuration options available to the JavaScript component and/or the Soy template for rendering.

  • Update the JavaScript component (defined in time_field.js in our example) to configure the new settings and their default values.

  • Update the Soy template to include settings that must be rendered in a form (the placeholder, in our example).

First craft the interface that controls your field’s settings.

Extending the Default Type Settings

To add type settings, you need a *TypeSettings class that extends DefaultDDMFormFieldTypeSettings. Since this example works with a Time field type, call it TimeDDMFormFieldTypeSettings.

This class sets up the Field Type configuration form.

Figure 1: Like your custom field types, the text field types settings are configured in a Java interface.

Figure 1: Like your custom field types, the text field type's settings are configured in a Java interface.

Here’s what it looks like:

package com.liferay.dynamic.data.mapping.type.time;

import com.liferay.dynamic.data.mapping.annotations.DDMForm;
import com.liferay.dynamic.data.mapping.annotations.DDMFormField;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayout;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutColumn;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutPage;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutRow;
import com.liferay.dynamic.data.mapping.form.field.type.DefaultDDMFormFieldTypeSettings;

@DDMForm
@DDMFormLayout(
    paginationMode = com.liferay.dynamic.data.mapping.model.DDMFormLayout.TABBED_MODE,
    value = {
        @DDMFormLayoutPage(
            title = "%basic",
            value = {
                @DDMFormLayoutRow(
                    {
                        @DDMFormLayoutColumn(
                            size = 12,
                            value = {
                                "label", "required", "tip", "mask",
                                "placeholder"
                            }
                        )
                    }
                )
            }
        ),
        @DDMFormLayoutPage(
            title = "%properties",
            value = {
                @DDMFormLayoutRow(
                    {
                        @DDMFormLayoutColumn(
                            size = 12,
                            value = {
                                "dataType", "name", "showLabel", "repeatable",
                                "type", "validation", "visibilityExpression"
                            }
                        )
                    }
                )
            }
        )
    }
)
public interface TimeDDMFormFieldTypeSettings
    extends DefaultDDMFormFieldTypeSettings {

    @DDMFormField(label = "%mask", predefinedValue="%I:%M %p")
    public String mask();

    @DDMFormField(label = "%placeholder-text")
    public String placeholder();
    
}

Most of the work you need to do is in the class’s annotations.

This class sets up a dynamic form with all the settings the form field type needs. The form layout presented here gives your form the look and feel of a native form field type. See the note below for more information on the DDM annotations used in this form.

One thing to note is that all the default settings must be present in your settings form. Note the list of settings present for each tab (each @DDMFormLayoutPage) above. If you must make one of the default settings unusable in the settings form for your field type, configure a hide rule for the field. Form field rules are configured using the @DDMFormRule annotation.

The interface extends DefaultDDMFormFieldTypeSettings. That’s why the default settings can be used in the class annotation without setting them up in the class, as was necessary for the mask and placeholder.

Once your *TypeSettings class is finished, update the *Type class for your form field type.

Updating the Type Class

The class TimeDDMFormFieldType currently has one method, getName, returning the name of the current form field. Add a new method to reference TimeDDMFormFieldTypeSettings that holds the specific settings of the Time field. This method already exists in the base class (BaseDDMFormFieldType), so override it:

@Override
public Class<? extends DDMFormFieldTypeSettings>
    getDDMFormFieldTypeSettings() {

    return TimeDDMFormFieldTypeSettings.class;
}

Next, render new Time field settings.

« Rendering Field TypesRendering Form Field Settings »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています