Unifying Data Presentation

Designing an effective user interface requires sophisticated, customizable data presentation. Frontend data sets (FDS) are a design element with low-code capabilities for displaying and interacting with Liferay data. With them, you can create and customize complex views that unify data from multiple sources to give users streamlined access to information with a consistent visual identity. Clarity’s web solution can take advantage of frontend data sets for a range of use cases, such as admin dashboards, product catalogs, customer support interfaces, and any number of data-driven applications. In this lesson, you’ll learn about the capabilities of frontend data sets and how you can best employ them as part of Liferay’s design system.

Understanding Frontend Data Sets

Frontend data sets act as virtual containers for aggregating data from sources using Liferay’s headless APIs. This includes data from custom objects, documents, web content, and more. Once you’ve selected a data source, you can configure which fields to include and how to render them. 

Liferay provides three visualization modes out of the box: table, card, and list. Each of these views has built-in support for sorting, filtering, pagination, and search to enrich the user experience by surfacing the right data as efficiently as possible. Because the presentation layer is decoupled from the data sources themselves, designers can style and interact with data without needing developer expertise to work with APIs.

Modern web solutions often need to present the same data in different contexts, or present data from different sources in a cohesive display. You can do both with frontend data sets, which are reusable, modular, and customizable. You can define rendering rules for a given data set once and deploy it in multiple locations of your site. Each instance of a frontend data set can then be tailored to the styling requirements of its specific context. As Clarity’s design needs scale in complexity, frontend data sets become an invaluable tool for unifying data presentation without sacrificing flexibility or performance.

Best Practices for Frontend Data Sets

While frontend data sets are not content templates in their own right, they provide a similar utility by standardizing the layout and style of your data presentation. When choosing a visualization mode for a given data source, it’s important to consider not only the type of data, but also the best way to make that data digestible for your users. Each of the three out-of-the-box visualization modes satisfies specific presentation needs:

• Table view is ideal for displaying structured data with multiple information-dense fields, such as support tickets.
• Card view is ideal for use cases that require scanning key details and summaries quickly, such as product catalogs.
• List view is ideal for presenting sequential data in a simple, legible format, such as system logs.

Regardless of the display option you choose, you should take advantage of the rich interactions supported by frontend data sets. With features like client-side filtering and pagination, along with lazy loading, you can serve data to users in real time without requiring a page refresh. Frontend data sets represent a modern, dynamic approach to data presentation that integrates seamlessly with other Liferay design elements and platform capabilities.

While the standard display modes provide deep customization, some use cases may require you to extend out-of-the-box options due to the complexity or specificity of the data involved. For designers with more developer expertise, Liferay provides two FDS client extensions:

• The FDS cell renderer client extension packages JavaScript functions to render individual cells, or fields, in a data set. With this client extension, you can implement interactive elements within your frontend data set, such as buttons, links, and event handlers.
• The FDS filter client extension facilitates more complex filtering logic than you can achieve out of the box. You can code filters to handle different data sources and values dynamically, making your frontend data sets more responsive and context-sensitive.

To learn more about the FDS client extensions, see the Mastering Liferay Frontend Client Extensions course.

Conclusion

Frontend data sets are an integral part of Liferay’s design system. They provide a dynamic interface for rendering a wide range of data types while maintaining visual cohesion and minimizing custom development. Whether Clarity wants to accelerate internal workflows with admin dashboards or improve customer success with a responsive ticketing system, frontend data sets make it possible for the design team to unify data presentation under the company’s unique visual identity. 

Next, you’ll review what you've learned before moving on to the next module.