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
hour:minute, some users still enter something indecipherable. You can fix this by adding a time field to Liferay Portal’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
*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
config.js: Auto-generated if you use Blade CLI,
[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.
.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.