Building User Experiences with Page Fragments

In modern application design, user experience (UX) is paramount. A well-crafted UX not only improves user satisfaction but also drives engagement and adoption. Liferay provides a robust suite of tools to empower content creators and developers to build compelling experiences directly in Liferay sites. Among these, Liferay Fragments is a pivotal feature for designing dynamic and user-friendly pages, whether you’re displaying application data or designing forms for creating object entries.

Understanding Page Fragments

Page fragments are reusable drag-and-drop elements for designing page layouts, displaying content, building forms, and more. They are created using HTML, CSS, and JavaScript and can provide both structure and functionality to pages. Liferay provides a variety of fragments out-of-the-box that cover common content needs. but you can develop your own. Once created, users can compose engaging experiences without requiring deep technical knowledge.

Page fragments are reusable drag-and-drop elements for designing page layouts, displaying content, building forms, and more.

Here are some key fragment features:

Composable Page Design: Fragments act as modular components that can be easily combined to create complete pages.
User-Friendly Page Editor: Liferay’s page editor UI enables users to configure fragment settings without coding.
Reusable Compositions: Users can design and save fragment compositions to reuse across pages, ensuring consistency and reducing duplicate work.
Responsive Design: Fragment-based pages are inherently responsive, adapting to various device sizes with minimal effort.

As such, fragments enhance modern Liferay applications by empowering content creators to build and manage pages independently, lowering the technical barrier. They encourage reusability, promoting consistency across pages and streamlining content updates. Custom fragments, developed with minimal code, align with modern low-code principles. Furthermore, fragments support lazy-loading and optimized rendering, maintaining performance even on content-heavy pages.

Here are a few example use cases:

Marketing Landing Pages: Quickly assemble engaging campaign pages using both out-of-the-box and custom fragments.
Product Display Pages: Use fragments to present product information dynamically based on structured content.
Knowledge Base and Documentation Sites: Build and maintain documentation sites efficiently using reusable fragments for standard layouts.

Use basic page fragments primarily for content rendering. For performance reasons, avoid implementing complex logic directly in custom fragments. Instead, rely on other OOTB features or create custom web component client extensions.

Understanding Form Fragments

In addition to standard fragments, Liferay also provides form fragments, which you can use to build dynamic, complex forms for custom objects. This provides a flexible and user-friendly way to receive and manage object data. Since form fragments use the same architecture as content page fragments, they ensure a consistent design and development experience. They also support all object features, so you can leverage the power of low-code validations, automation, and more with your forms. This makes form fragments the go-to option for modern application design.

Here are some key form fragment features:

Object-Based Data Storage: Leverage Liferay Objects for structured, scalable data, with automatic persistence and API generation.
Consistent Fragment Design: Build forms using the same fragment architecture as content pages, ensuring a unified experience.
Intuitive Low-Code Configuration: Implement business logic for forms using object actions and validations without needing custom JavaScript.
Workflow Integration: Trigger workflows directly from form submissions.
Headless API Support: Enable external applications to interact with Liferay forms via headless APIs.

Form fragments simplify complex form development, reducing the effort required to build intricate forms while enabling non-technical participation through an intuitive interface. As fragments, they promote reuse and consistency when building user interfaces for custom data models. For these reasons, form fragments align with the core principles of modern Liferay application design by minimizing custom development and maximizing OOTB functionality.

Here are a few example user cases:

Lead Capture: Rapidly deploy lead capture forms for marketing campaigns.
Customer Feedback: Create dynamic feedback forms that integrate with customer records.
Internal Processes: Develop forms that support HR, finance, and other internal processes.

Conclusion

Liferay fragments provide a powerful solution for building dynamic experiences for modern applications. Their modular design fosters composable, flexible, and maintainable content pages, aligning with best practices by maximizing out-of-the-box features and minimizing custom development. Form fragments also provide a ready way to interact with custom data models. By combining pre-built and custom fragments, organizations can build dynamic applications that are easy to manage and evolve.

Next, you’ll explore how you can leverage standard web components to extend Liferay’s frontend with advanced functionality.