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.

forms-field-types.png

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

Creating Form Field Types

Liferay’s Forms application does not contain a dedicated time field out-of-the-box. For ease of use and to ensure proper time data is collected, you’ll develop a time field and learn how Liferay...

Read More

Rendering Field Types

Before you get to the front-end coding necessary to render your field type, there’s another Component to define and a Java class to code. Implementing a DDMFormFieldRenderer The Component only has...

Read More

Adding Settings to Form Field Types

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

Read More

Rendering Form Field Settings

Once the settings are added to the class backing the field’s settings, make sure the *Renderer can get the settings and update the front-end code. Passing Settings to the Renderer Class Send the...

Read More
0 (0 Votes)
Forms Storage Adapters Previous