When should I use the FDS Filter client extension type?

• The built-in text / select filters do not fit your data (date ranges, geo, multi-select trees). • You need a filter tied to an external query (e.g., ElasticSearch).

How do I create a FDS Filter client extension?

1. Export a default class implementing `getValue()`, `setValue(v)`, and `render(root)`. 2. Assemble the JS and reference it via `url:`.

What fields are required on a FDS Filter client extension?

url (string): Path to the JS module implementing FDSFilter.

FDS Filter

Add a custom filter to a Frontend Data Set.

type: fdsFilter·Frontend·Liferay docs →

# description

Registers a class that implements Liferay's `FDSFilter` interface — a custom filter UI for the tables that back DXP admin.

UI extensions that render on Liferay pages or modify page appearance.

# when to use

→The built-in text / select filters do not fit your data (date ranges, geo, multi-select trees).
→You need a filter tied to an external query (e.g., ElasticSearch).

# how to use

01Export a default class implementing getValue(), setValue(v), and render(root).
02Assemble the JS and reference it via url:.

# required fields

field	type	description
`url`required	`string`	Path to the JS module implementing FDSFilter.

# optional fields

field	type	description
`name`	`string`	Display name.

# example

client-extension.yaml

date-range-filter:
    type: fdsFilter
    name: Date Range
    url: date-range-filter.js

# more in frontend

❯Custom ElementcustomElement
❯IFrameiframe
❯Global CSSglobalCSS
❯Global JSglobalJS
❯Theme CSSthemeCSS
❯Theme FaviconthemeFavicon

cd ..scaffold this type in VS Code →