Introduction

Liferay Objects is a cool no-code feature that allows us to define full-featured entities - integrated with all Liferay Frameworks and providing auto-generated Headless API for accessing and updating objects information.

Liferay Forms is a powerful Liferay tool, providing a lot of possibilities for building and configuring custom forms with advanced rules builder and field configuration options, workflow, notifications and personalization options. Even though Forms are becoming deprecated in favor of Objects, they still can be used for building user experiences, even in combination with Objects.

Finally, Form Containers is a modern tool for rendering forms based on Objects with a possibility to map Form Fragments to object fields and an easy way for user interface customization.

In this blog we’ll review each of these features, and how they can be used together.

Sample Application Overview

We will build a small application based on Objects, integrated with Forms and Form Containers - “Feedback Form”. The feedback form should render four fields: first name / last name - prefilled from current user profile, and title / description - the feedback title/body. All the fields should be saved as a new Feedback Object entry after feedback submission.

1. Object Definition

First, we need to define our Feedback object. To do it - navigate to Control Panel -> Objects, create a new Object Folder, and define a new Object within it:

Define required fields for the Object:

Define additional Object configuration and Publish it.

Note: I made object entries scoped to Site and available under “Content & Data” site menu.

Navigate to Site menu - there should be a new “Feedback” entry under the “Content & Data” section:

Also, define permissions on Feedback application for User role to allow objects creation:

Note: Navigate to Control Panel -> Roles -> User -> Edit -> Define Permissions for defining permissions

2. Form Integration

2.1. Form Creation and Integration with Object

Now let’s integrate the created object with a Liferay Form. First, create a new “Feedback” form with the same fields structure as the Object:

Before publishing the form - navigate to Form Configuration, select Storage Type as Object and Feedback as Object:

Then you’ll be able to map form fields to Object fields:

Publish the form and add it to a page. Submit a feedback:

Submitted data should be stored as a new Feedback Object:

2.2. Data Provider and Rules

In the example above we created a new Form and integrated it with a Feedback object.

What if we need user’s First Name / Last Name to be pre-populated from the current Liferay User profile?

In this case we can implement a custom Data Provider, sample: DDMCurrentUserDataProvider.java. The component provides the current user’s firstName and lastName field to a data provider context.

After Data Provider component is deployed - you need to add it on “Data Providers” tab in Forms application:

Define the name, output parameters and labels, make it available for Guest user:

Then you can use Data Provider to pre-populate form fields. Form Fields can be pre-populated using Form Rules, based on condition.

If you need to pre-populate First Name / Last Name fields always - you need to define a “fake” condition, which is met always. An example is “User belongs to User” - because all portal users have a “User” role by default. For this condition we can define an “Autofill” action to pre-fill First Name / Last Name fields from the Data Provider. The resulting rule looks like this:

Note: To define the rule - navigate to the “Rules” tab in the Edit Form page.

Save the rule and the form, and check the result - form fields should be prefilled with current Liferay user data:

The Feedback object should be saved in the same way as before, but the user does not need to insert his personal data anymore.

3. Form Container Integration

3.1. Form Container Configuration

Form Container is a new modern way for creating forms in Liferay in combination with Liferay Objects. It’s going to replace Liferay Forms in the future, so it makes sense to focus on this approach as well.

To create a form using Form Container - add a “Form Container” fragment onto a page and select a “Feedback” content type:

The input fields will be rendered and mapped automatically based on Object field types, but you can rearrange them as needed:

Note: Form Container gives much more flexibility for UI customization compared to Forms: here you can change UI directly from the interface, add any content and fragments between the input fields, etc.

Publish the page, and you’ll see a form similar to a previous one, created with Liferay Forms:

Submit the form - and a new Feedback object should be created, in the same way like with forms previously.

3.2. Custom Fragment Fields

What if we need user’s First Name / Last Name to be pre-populated for the Form Container approach as well? For Forms we implemented a custom Data Provider. For the Form Container we can implement custom Form Fragments - a special type of fragments, that can be used for creating forms.

All the input fields inside the Form Container are Form Fragments. The most typical one is Text Input - for rendering the text fields. So, we can take it as a baseline and create two custom Form Fragments based on it - First Name Input and Last Name Input, which should display information about the current user by default:

The implementation of custom form fragments can be the same as for Text Input, except they should display the user's first name / last name by default.

Thus, create a new Form Fragment “First Name Input”:

Copy implementation from the Text Input and set the default input value as user’s first name:

In a similar way create the “Last Name Input”, which will display the user’s last name.

Finally, replace Text Field fragment in Form Container with custom fragments for first name / last name and map to appropriate Object fields:

Now fields should be prefilled on the feedback form using Form Container:

On form submission the Feedback object should be saved in the same way as before.

Conclusion

Here we create a small feedback app with a low-code / no-code approach. We defined a custom Liferay Object for data storage, and created a submission form using two approaches: Liferay Forms and Form Container. Each of them has its own pros and cons, but Form Container is much better in terms of configuration and user interface customization. Unless you need Form-specific features which are missing in the Form Container approach, it’s suggested to proceed with the latest one.

Leave your comments and feedback.

Stand with Ukraine