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