Building Object Forms
Implementing user-friendly forms for data collection is as important as determining the data you want to collect. So far, you've used custom layouts to design entry creation forms for Clarity's distributor management app. However, these layouts have limitations that make them suitable only for basic applications or proof-of-concept development.
Instead of layouts, you should use form fragments to build engaging, user-centric experiences directly in Liferay sites. Here, you'll learn how you can use these fragments to build forms for Clarity's apps.
Understanding Form Fragments
Form fragments enable you to build flexible and dynamic user experiences for custom objects, making them the go-to option for modern applications. As fragments, form fragments are reusable components for designing content pages and display pages. Fragments are built using HTML, CSS, and JavaScript and can provide both structure and functionality to pages. Liferay provides a variety of form fragments out-of-the-box, but you can develop your own.
To build an object form, you start by adding a form container to your page or page template and mapping it to a published object. This automatically populates the container with fragments mapped to the object's fields. You can then organize, remove, or add fragments manually as needed. Each form component has the standard fragment configuration options, as well as some unique options. For example, with form containers, you can configure what happens after form submissions (e.g., displaying a success message or redirecting users to another page). Once published, users can begin using the form to create entries.
You can also use these fragments with display page templates to create multi-step forms and pages for editing object entries. See Using Fragments to Build Multi-Step Forms and Building Multi-Step Forms With Liferay DXP Objects for more information.
Form fragments offer several advantages over layouts, making them a more robust and versatile choice for building object forms:
- Comprehensive Feature Support: Form fragments support all Liferay object features, including actions, validations, permissions, workflows, and translations. This ensures seamless integration with your existing object definitions and business logic.
- Enhanced User Experiences: Form fragments provide greater flexibility for tailoring digital experiences to meet specific business requirements. You can leverage the full range of Liferay page builder features to align form elements with your branding and enhance the user journey.
Liferay also provides Dynamic Data Mapping Forms (DDM Forms) for designing simple user input forms. However, these forms do not support all object features. They also have limited extensibility, especially when integrating with external systems or implementing complex business logic.
Using Form Fragments
To build forms in content pages and page templates, you must
- Place form fragments in a mapped form container.
- Map every form fragment in the form to an object field to prevent data loss.
- Include fragments for all mandatory object fields (unless draft mode is enabled).
- Make all mandatory form fragments visible.
- Include a visible submit button.
Best Practices for Building Object Forms
When designing object forms, keep these best practices in mind to create effective and intuitive user experiences:
- Default to Using Form Fragments: Always use form fragments when working with objects. Form fragments are best suited for handling object data and offer more flexibility for data interaction and future scalability.
- Plan Object Definitions in Advance: Define your object structures and relationships before building your forms. Also, enable draft mode if you want to allow users to save their progress before submitting their entries and triggering automations. This ensures your forms have the necessary data structure and behaviors from the outset, avoiding later adjustments.
- Enable Multi-Step Navigation for Long Forms: For lengthy forms, leverage multi-step navigation to enhance user experience. This is especially important for complex data collection processes.
Building Forms for Clarity's Distributor Management App
To attract new partners, Clarity wants to embed Distributor Application forms in their public enterprise website. They also want to create an Application Evaluation form for Sales team members to review applications. After an application or evaluation is submitted, Clarity also wants to provide users with a form for editing their entries.
Clarity can implement these forms using fragments in content pages and display page templates. For example, to build the Distributor Application form, Clarity can use display page templates for each application step, leading users through the application process. This helps to break up the long form and create a more user friendly experience.
Clarity can also create dedicated edit pages for entries using display pages and form fragments. This enables users to modify existing entries in a structured and user-friendly manner. You'll explore this use case in a later lesson.
Conclusion
Form fragments empower you to create integrated, user-friendly forms for creating and editing object entries. By following best practices, you can streamline data collection, enhance user experiences, and ensure your forms are both maintainable and scalable. Next, you'll build a multi-step Distributor Application form.
Capabilities
Product
Education
Contact Us