Extending Frontend Data Sets

Frontend data sets (FDS) act as virtual containers for aggregating data from multiple sources using headless APIs. Data sources include custom objects, documents, web content, and more. Once you’ve selected a data source, you can configure which fields to include and choose from three default visualization modes: tables, lists, and cards. Each of these modes supports custom display configurations, in addition to filtering and sorting capabilities.

While the standard display options satisfy a wide range of needs, some use cases may require you to extend out-of-the-box options due to the complexity or specificity of the data involved. For these cases, Liferay provides two FDS client extensions:

• FDS Cell Renderer Client Extension
• FDS Filter Client Extension

Here you’ll learn how to leverage these extensions for your solutions.

Using Frontend Data Set Cell Renderer Client Extensions

With the FDS cell renderer client extension, you can define a JavaScript function for rendering specific cells within a data set. In fact, you can assign a different cell renderer client extension to each field in a data set via the Renderer drop-down menu. To create and deploy this client extension, you must package your JavaScript code within an ES module and provide a URL for Liferay to locate the module.

The cell renderer function must adhere to the FDSTableCellHTMLElementBuilder interface from Liferay’s JavaScript API. Once defined, the function receives an object containing the assigned cell’s value and returns HTML that determines the visual presentation of the data. The returned HTML supports interactive elements like buttons, links, and event handlers, enabling the creation of rich, flexible displays for the information in your data sets. Liferay calls the cell renderer function for every assigned data set field and inserts the returned HTML element into the page structure.

Anatomy of FDS Cell Renderer Client Extensions

The client-extension.yaml file for FDS cell renderer client extensions has an assemble block indicating the source and target folders for the build process.

assemble:
    - from: build/static
      into: static

The extension definition block contains core configurations for the client extension, as in the following example from liferay-sample-fds-cell-renderer.

liferay-sample-fds-cell-renderer:
    name: Liferay Sample Frontend Data Set Cell Renderer
    type: fdsCellRenderer
    url: index.*.js

This table provides descriptions of the properties in the extension definition.

Using Frontend Data Set Filter Client Extensions

Filters are predefined criteria used to select a subset of the items in a data set. Out of the box, you can filter data sets by date range or string and numeric values. With the FDS filter client extension, you can define more dynamic, complex filters to better tailor experiences for users. Like cell renderers, filter client extensions are implemented with JavaScript and packaged in ES modules. Once deployed, filter client extensions can be added for a specific field in a data set through the UI.

The FDS filter client extension must adhere to the interface FDSFilter from Liferay’s JavaScript API. This interface specifies three critical functions that must be implemented in the filter:

• htmlElementBuilder creates the user interface for interacting with the filter.
• descriptionBuilder generates a human-readable description of the filter based on the stored selection criteria.
• oDataQueryBuilder translates the selection criteria into a standard OData query, which Liferay DXP uses to retrieve the filtered subset of data.

To make your FDS filters more versatile, you can code them to dynamically handle different values for the Filter By field. Because the selected field is accessible from the code, you can create a single filter client extension that can handle multiple fields, reducing your overall development effort. Additionally, if you are using TypeScript for your implementation, Liferay recommends defining an interface for your filter’s internal state to ensure type safety.

Anatomy of FDS Filter Client Extensions

The client-extension.yaml file for FDS filter client extensions has an assemble block indicating the source and target folders for the build process.

assemble:
    - from: build/static
      into: static

The extension definition block contains core configurations for the client extension, as in the following example from liferay-sample-fds-filter.

liferay-sample-fds-filter:
    name: Liferay Sample FDS Filter
    type: fdsFilter
    url: index.*.js

This table provides descriptions of the properties in the extension definition.

Conclusion

Data sets are an integral part of application design in Liferay, and they benefit from the same customization capabilities available to other platform features. With the FDS cell renderer and FDS filter client extensions, you can tailor the look and feel of your data sets to match the overall presentation and behavior of your solution. To learn more about how frontend data sets fit into Liferay applications, see the Foundations of Modern Liferay Application Design course.

Next, you’ll use FDS cell renderer client extensions to make Clarity’s ticketing system more interactive and visually engaging.