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.
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
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.
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
.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
*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
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
DefaultDDMFormFieldTypeSettings class in the
config.js: Auto-generated if you use Blade CLI,
config.js defines the
[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.
.babelrc: The Babel 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.