Introduction
Liferay Form Fragments revolutionizes development with customizable HTML, CSS, and JavaScript elements, offering flexibility in form building. Integrated with Liferay objects, design forms tailored to specific data collection objectives, enhancing user experience. Form Fragments enhance Liferay’s capabilities, providing limitless customization for data collection needs.
Prerequisites
- Liferay DXP/Portal 7.4
- Basic knowledge of Liferay
Environmental Requirements:
- Liferay Portal or DXP
1) Creating an Object
- For Creating an object you can refer to objects in liferay 7.4.
- I have added two custom fields in the object.
- Name (Type: Text)
- Birth date. (Type: Date)
2) Adding a Form Container to the content page or page template
Note: Display page templates do not support form fragments.
- Add the Form Container fragment to the page.
- Here, Map Object with Form container.
- In Form Container, Right Side Panel > General
- Content-Type: Modify the object in the form fragment.
- Success Interaction: It gives embedded messages, and redirects to other pages, URLs, and Entry Display Pages.
- Content Display: Provides Block, Flex Row, and Flex Columns.
- After Mapping, It opens the form adds all fields which are added to the object, and automatically creates a submit button.
- In the Right Side Panel
- General: Modifies the label, placeholder, and fields.
- Styles: Add Background colors, Effects, Borders Images, etc.
- Advanced: Can Add CSS classes and Custom CSS.
Fill in the details and click on submit. It will store the data in the Liferay Object.(Can check form entries from the Control panel > Objects).
Steps to create a custom Form Fragment,
Follow these steps to create a Form Fragment
- Navigate to the Site Menu and access Design > Fragments.
- Click on Plus (+) to create a Fragment Set for organizing your form fragments.
- Then, select Add (+), choose the Form Fragment type, and proceed with the creation process.
Then, Enter the Form Fragment Name and select the field type(Field types change even after the creation of the fragment).
Click on Add and it generates the Draft of Form Fragment. Then we can add HTML, CSS, and Javascript in that and publish according to requirement.
- Go to Fragments > Form Components.
- Take HTML, CSS, and JS and configuration and add it to our custom form fragment.
- And add whatever changes you want in that field.
Go to Content Page/Page Template > Edit Page
- Remove the Name field from the form container.
- Add the custom form fragment in the place of the Name field.
- In the Right Side Panel > General
- Select the Field of the Object which you want to Map with custom form fragment.
- Then Publish it & Fill out the Form, It will store the data in the Liferay Object.
Conclusion
Liferay Form Fragments offer a powerful and flexible way to build customized forms tailored to specific data collection needs. By leveraging HTML, CSS, and JavaScript, you can create rich and dynamic form elements that integrate seamlessly with Liferay objects. This capability enhances the user experience and allows for endless customization options.
