Forms are at the heart of every Liferay portal — from user onboarding to content submission. But to make forms truly dynamic, you need more than static input fields.
In this guide, we’ll explore powerful UI tricks for Liferay DXP 7.4 Forms, including how to:
- Add conditional fields that respond to user choices
- Create custom validators for real-time error handling
1. Conditional Fields in Liferay Forms
Conditional logic lets you show or hide fields based on user input.
Example Scenario:
Display an “Other Reason” text box only when the user selects “Other” from a dropdown.
Steps:
- Open Content & Data → Forms.
- Create a new form and add a Select field → “Reason”.
- Add a Text Field → “Other Reason”.
- Click the Rule Builder tab.
- Add the following condition:
IF Reason IS EQUAL TO "Other" THEN Show Field "Other Reason"
Now, the Other Reason field will appear dynamically when selected.
2. Adding Custom Validation Logic
Sometimes built-in validations (required, email, number) aren’t enough. You can write custom validators with JavaScript expressions or back-end logic.
Example: Validate Age Field
Client-Side Expression:
function validateAge(value) {
return value >= 18 && value <= 65;
}
Apply this as a custom validation rule in the field properties.
If you’re using a React-based portlet form, you can validate like this:
if (age < 18 || age > 65) {
setError("Age must be between 18 and 65");
}
3. Backend Validation (Liferay Form Rules API)
For complex workflows, use Form Rules API to enforce server-side validation.
public boolean validate(DDMFormField ddmFormField, Object value) {
if ("email".equals(ddmFormField.getName())) {
return value.toString().endsWith("@company.com");
}
return true;
}Deploy this logic as a module so it applies across all forms globally.
4. Best Practices for Form UX
✅ Keep conditions intuitive — users should see logic, not magic.
✅ Combine multiple rules sparingly; too many can slow the form.
✅ Always include helpful error messages and visual cues.
✅ Test forms in different browsers and languages.
Conclusion
Dynamic forms create smarter, more user-friendly experiences.
With Liferay DXP, you can empower your teams to build adaptive, validated forms — without writing endless backend logic.
