Custom form fields built with the use of React also provide a more efficient way to build dynamic and engaging forms in Liferay 7. 4. As developers move away from Liferay 7 which uses the MetalJS and Soy closure templates that were used before. 2, it becomes essential to explore how to implement this in React for developing unique form field types.

This tutorial will explain how to take a turnkey React-based custom form field, the Acme C2P9 Slider, and integrate it into a Liferay 7. 2 environment. Whether you are simply adding new features to an existing project, or migrating from previous Liferay versions to this latest 6. 2, this guide covers the basic and crucial information that would allow you to successfully enrich your Liferay developments.

What’s New in Liferay DXP 7.4

Liferay DXP 7. 4 presents many novelties that enhance the possibilities to produce and manipulate content according to various users. It also explains why this change improves the system for everyone, regardless of their technical ability, and offers a new, less cluttered, and more intuitive interface. 

These are several of the primary improvements: improved tools for working with content, more choices when it comes to targeting content for specific audiences, and greater analytical capabilities for optimizing the way that content works. Also, Liferay DXP 7. 4 works better with the most current development tools, and thus, is easier for developers to build and maintain robust, effective applications. Such adaptations make user interactions more appealing and enable an organization to present material that would be relevant to a given consumer.

Learn | Upgrade Liferay 7.0 to 7.4 Migration

1. Creating Module

• Navigate to your Liferay workspace
• Create a Liferay module
• Select the form-field module as below

2. Module Structure

3. Custom Form Field Setting

• Create custom form field settings for the date picker
• Define the minimum and maximum values of years to allow users to choose dates within a specific range
• Use the DatePickerFormFieldTypeSettings interface, extending DefaultDDMFormFieldTypeSettings, to define these settings
• Define the form field settings in the DDMTypeSettings class using annotations like @DDMForm and @DDMFormField
• Ensure the layout of the form field settings is appropriately structured using @DDMFormLayout

4. Adding Settings to Custom Form Field Type

• Add the custom form field settings to the custom date picker form field type by implementing the getDDMFormFieldTypeSettings method
• Return the DatePickerFormFieldTypeSettings class from this method to include the custom settings in the field type

5. Frontend Updates

• Update the frontend component custom-date-picker.es.js to support user-entered min and max values.
• Create a DatePickerTemplateContextContributor class to send setting values from the backend to the frontend.
• This ensures that the React component receives the necessary settings to display the date picker accurately.

Learn | CI/CD Pipeline Integration for Liferay with Jenkins

6. Implementing Date Picker

• Utilize the Clay date picker for the frontend implementation, ensuring it integrates seamlessly with Liferay
• Retrieve the min and max values from the settings to limit the selectable date range within the specified bounds
• Implement the date picker component using React, managing state for selected dates and handling user interactions

7. Deployment and Localization

Remember to define the label for the custom date picker field in properties to ensure proper localization.

• Deploy the module containing the custom form field type to your Liferay environment to make it accessible for use in forms.

8. Usage

Now, go to content & data => Forms

• Click on the plus icon and create a new form

Below, you can see that in the builder custom form field type shown which we made earlier.

Below, you can see that in the builder custom form field type shown which we made earlier.

Liferay 7. 4 provides very rich features for the form field customization to provide as much degree of freedom as needed to define the input and further processing of the data. If you have an interest in these features and want to continue with all these, contact Inexture, where Experienced Liferay Developers are ready to help uplift your projects.