Form Field Types

The Forms application contains many highly configurable field types out-of-the-box. Most use cases are met with one of the existing field types.

Figure 1: The Forms application has useful out-of-the-box field types, but you can add your own if you need to.

Figure 1: The Forms application has useful out-of-the-box field types, but you can add your own if you need to.

If you’re reading this, however, your use case probably wasn’t met with the default field types. For example, perhaps you need a color picker field. You could create a select field that lists color names. Some users don’t, however, know that Gamboge is the color of spicy mustard (maybe a little darker), and anyway, seeing colors is better than reading their names, so you can create a field that shows colors.

Another example is a dedicated time field. Even with a text field and a tooltip that tells people to enter the time in the format hour:minute, some users still enter something indecipherable. You can fix this by adding a time field to Liferay DXP’s Forms application. If you have your own ideas for create your own field types, keep reading to find out how.

These tutorials show you how to

  • create a module that adds a Time form field type with a timepicker

  • add custom configuration options to your field types

Before getting started, learn the structure of a form field type.

Anatomy of a Field Type Module

All form field type modules have a similar structure. Here’s the directory structure of the dynamic-data-mapping-type-time module developed in these tutorials:

.babelrc
.npmbundlerrc
bnd.bnd
build.gradle
package-lock.json
package.json
src
└── main
    ├── java
    │   └── com
    │       └── liferay
    │           └── dynamic
    │               └── data
    │                   └── mapping
    │                       └── type
    │                           └── time
    │                               ├── TimeDDMFormFieldRenderer.java
    │                               ├── TimeDDMFormFieldTemplateContextContributor.java
    │                               ├── TimeDDMFormFieldType.java
    │                               └── TimeDDMFormFieldTypeSettings.java
    └── resources
        ├── content
        │   └── Language.properties
        └── META-INF
            └── resources
                ├── config.js
                ├── time.es.js
                ├── time_field.js
                └── time.soy

You don’t need *TemplateContextContributor.java or *TypeSettings.java in the initial module (see Rendering Form Field Settings to learn more about these classes). The initial module consists of these Java classes and resources:

*DDMFormFieldRenderer.java: Controls the template’s rendering. Sets the language, declares the namespace, and loads the template resources on activation of the Component. Extending the abstract class that implements the DDMFormFieldRenderer makes your work here easier.

*DDMFormFieldType.java: Defines the form field type in the back-end. If you extend the abstract class that implements the interface, you automatically include the default form configuration options for your form field type. In that case, override the interface’s getName method and you’re done. To see the default configuration options your form field type inherits, look at the DefaultDDMFormFieldTypeSettings class in the dynamic-data-mapping-api module.

config.js: Auto-generated if you use Blade CLI, config.js defines the dependencies of all declared JavaScript components.

[name-of-field-type]_field.js: The JavaScript file modeling your field.

[name-of-field-type].es.js: The JavaScript file that configures the template rendering (the [name-of-field-type].soy rendering).

[name-of-field-type].soy: The template that defines the appearance of the field.

Language_xx_XX.properties: Define any terms that must be translated into different languages.

In addition to the Java classes, Soy templates, and JavaScript files, a form field type contains the following files:

.babelrc: The Babel configuration file.

.npmbundlerrc: The liferay-npm-bundler configuration file.

bnd.bnd: The module’s metadata.

build.gradle: The module’s dependencies and build properties.

package.json: The npm module manager.

package-lock.json: Automatically generated to track the npm modules dependencies.

Get started creating the time field in the next tutorial.

« Introduction to Liferay FormsCreating Form Field Types »
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0