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