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 getParameter 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 toggle 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.
For comprehensive business solutions and in-depth insights into Liferay custom fields, connect with us at info@stockfish.app to unlock the full potential of your digital platform.
