Understanding Liferay Pages

Liferay DXP is known for its power and flexibility in building everything from company portals to complex, customer-facing storefronts. This flexibility is due largely to the composable model of Liferay pages. Instead of locking developers into a single, rigid framework, they can assemble experiences from independent and modular components. This system embraces modern web standards and empowers developers to use the tools they prefer.

In this lesson, you'll learn about the core components of Liferay pages and how you can style and extend them. Which components you choose to use depends on several motivating criteria, from frequency of changes to richness of functionality to supported integrations.

Exploring Page Components

At a high level, a Liferay page is a container for all the content and applications available to users. While Liferay offers several page types, you’ll most often use the Content Page. It provides the most flexible solution for both layout and content. A single Content Page enables an author to freely mix and match various types of elements to achieve a specific goal.

Some page components are static resources like text boxes and images, while others are interactive and dynamic applications that can pull in external data and respond to user input. Additionally, you can control the look and feel of all these with custom themes and styling. Together, these features enable you to create rich and engaging digital experiences.

Page components generally fall under the following categories:

Fragments

Fragments are reusable, drag-and-drop elements built with HTML, CSS, and JavaScript. They are primarily used to design page layouts and display content. While it is possible to create highly complex fragments, this is not an advisable best practice. Complex business functions are better served with widgets and custom elements.

Widgets

Widgets are full web applications that you can place on a page to provide complex functionality like search, navigation, or interactive feeds. They are based on the JSR-362 Portlet 3.0 standard. Because widgets run inside the portal container with tight coupling, they provide access to Liferay’s internal services. There are scenarios where widgets are the best choice, but for most modern business requirements, developers should prefer lighter and less coupled solutions in the form of custom element client extensions. While widgets do provide a frontend interface, they also require backend components to function, making them more appropriate for developers with full stack expertise.

Custom Element Client Extensions

Frontend JavaScript development in Liferay focuses on building micro-applications deployed as custom element client extensions. Architecturally, these extensions live outside the portal runtime, which simplifies maintenance and enables you to scale individual applications independently. Rather than accessing internal services, custom elements communicate with the platform via headless APIs. Once deployed, custom elements appear in Liferay just like native components. As such, they are the natural successor to traditional widgets.

This approach is powerful because it's based on the web components standard, making it framework-agnostic. You can build your micro-application with your preferred tools (e.g., React, Angular, Vue), and then package it as a standard custom element. Liferay can then render it without needing to know how it was built. When designed and built correctly, custom elements are maintainable, portable, and reusable across multiple solutions.

Composing Pages

You can arrange and configure any of these components in the Liferay page editor. Choosing the right component for the job is key, as each type is designed for different use cases. While fragments are ideal for content and widgets offer native functionality, custom element client extensions are the go-to solution for integrating external JavaScript applications into Liferay DXP.

Styling Pages

A great user interface isn't just about functionality; your JavaScript applications also rely on a solid foundation of styling. By default, Liferay provides a comprehensive theme to ensure a consistent look and feel, but you can use frontend client extensions to precisely customize this appearance.

Liferay’s Default Styling

Liferay’s default styling provides developers with a robust toolkit for their projects.

• Lexicon: A design language that provides a common framework for building interfaces within the Liferay product ecosystem. It is a guide to the foundational concepts, components, patterns, and use cases combine to provide consistent, unified user experiences.

• Clay: A web implementation of the Lexicon design language. It is an extensive library of accessible, modular, and reusable user interface components—including HTML, CSS, and React implementations—that developers can use to build applications that are visually consistent with the Liferay ecosystem. If Lexicon is the blueprint, Clay is a build based on the blueprint.

• Bootstrap: The foundational framework of the styling system. Rather than define everything from scratch, Clay is built on top of Bootstrap. While there are styles that are Liferay specific, many of the styles and classes you’ll use come from Bootstrap itself. Changes to themes are most often handled by redefining the underlying CSS variables rather than creating entirely new styles.

Granular Customization with Client Extensions

To customize the default theme and manage your frontend resources, you can use a powerful set of client extensions for precise, granular control:

Using these client extensions enables powerful customizations without the overhead of a traditional theme project.

Clarity’s Custom Element

As part of their growth, Clarity has adopted a partner-first model, expanding its business to include trusted distributors from all over the world. As this network grows, it becomes difficult to keep track of distributors by region.

To address this challenge, Clarity wants to develop a distributor locator tool to centralize distributor information, allowing employees to search for partners by region and view key details on an interactive map. Multiple groups within the organization plan to leverage this tool as a reusable component on different pages (e.g., Sales, Ops, Support). For these reasons, the distributor locator tool is a great candidate for a custom element client extension that's built with JavaScript.

Conclusion

Liferay’s composable page model enables you to assemble user experiences with a variety of modular components. With client extensions, you can build flexible, framework-agnostic micro-applications with JavaScript and embed them in your pages. You can also leverage additional client extensions to customize the look and feel of your site pages and applications.

Next, you’ll help Clarity develop their distributor locator tool.