Customizing Liferay Form using React Custom Fields

Liferay is a powerful platform for building websites and web applications, offering a wide range of features to streamline development. One such feature is the ability to create React custom form fields in Liferay forms, enabling developers to tailor their applications to specific requirements. In this article post, we'll explore the process of creating custom fields in Liferay forms, empowering you to enhance the functionality of your applications.

You can create custom fields to capture specialized information or extend the capabilities of your forms as required. Additionally, you have the advantage of utilizing the built-in features of Liferay forms, ensuring a seamless integration of custom fields alongside standard form elements. This combination allows for the creation of dynamic and versatile forms that cater to diverse use cases, providing users with an enhanced and intuitive experience.

Now Let’s see the how can we create custom fields in Liferay Form:

Here we are creating Liferay custom form field module using Blade CLI . Blade CLI simplifies the process of creating Liferay modules by providing a set of commands for generating project structures and files. Here is the Command for creating the custom form field module in Liferay using Blade CLI:

blade create -t form-field -v 7.4 -p com.liferay.docs.formfieldtype -c UserInfo DDMTypeUserInfo        

The above command utilizes Blade CLI to create a custom form field module in Liferay. In the 7.4 version, the command will automatically generate the React component for the frontend. However, for earlier versions, Liferay uses 'soy' as the frontend framework

Next, let's look at the Form Field Module's Code

First let's see the Java Class UserInfoDDMFormFieldType

@Component(
	property = {
		"ddm.form.field.type.description=ddm-type-user-info-description",
		"ddm.form.field.type.display.order:Integer=13",
		"ddm.form.field.type.group=customized",
		"ddm.form.field.type.icon=text",
		"ddm.form.field.type.label=ddm-type-user-info-label",
		"ddm.form.field.type.name=DDMTypeUserInfo"
	},
	service = DDMFormFieldType.class
)
public class UserInfoDDMFormFieldType extends BaseDDMFormFieldType {        

in above code ,

ddm.form.field.type.name: provide the field type identifier. This is used to identify the field internally and in other components.

ddm.form.field.type.label: provide the language key for the label text. Make sure the translated value is defined in the Language.properties file.

@Override
public String getModuleName() {
    return _npmResolver.resolveModuleName(
       "dynamic-data-DDMTypeUserInfo-form-field/DDMTypeUserInfo.es");
}

@Reference
private NPMResolver _npmResolver;        

The getModuleName method passes the DDMTypeUserInfo.es.js file path to the NPMResolver service.

Let's delve into how the UserInfoDDMFormFieldTemplateContextContributor class enables passing data from the Backend to the React Component on the Frontend side

By adding the UserInfoDDMFormFieldTemplateContextContributor class as below , we can override the getParameters method to pass data seamlessly to the React Component

public class UserInfoDDMFormFieldTemplateContextContributor
implements DDMFormFieldTemplateContextContributor {

  @Override
  public Map < String, Object > getParameters(DDMFormField ddmFormField,
    DDMFormFieldRenderingContext ddmFormFieldRenderingContext) {

  }        

If you want to add configuration options in the basic or advanced settings of a field, you can make a new interface like UserInfoDDMFormFieldTypeSettings, by extending the DefaultDDMFormFieldTypeSettings interface. For instance, to add a toggle for hiding or showing a field, you can use the @DDMFormField in the UserInfoDDMFormFieldTypeSettings interface, as demonstrated below

  @DDMFormField(label = "%hide-field", properties = "showAsSwitcher=true")
  public boolean hideField();        

so this above code will add switch in UI ,

and last is the React component, specifically the DDMUserInfo.es.js component. Within this component, we can configure frontend settings and implement the logic for handling values received from the backend.

Now that your custom form field module is ready, you can deploy it to your Liferay platform. Once uploaded, you can use it in your forms. Whether you're making registration forms, surveys, or any other type of form, this custom field will help you collect the exact information you need. Liferay's custom fields are flexible and versatile, allowing you to customize your forms to fit your app's needs perfectly.

For comprehensive business solutions and in-depth insights into Liferay custom fields, connect with us at [email protected] to unlock the full potential of your digital platform.

Authored By: Ankit Hadiyal