When should I use the FDS Cell Renderer client extension type?

• You need to render a badge, progress bar, avatar, or link inside an admin table. • The default renderers do not display your custom field the way you want.

How do I create a FDS Cell Renderer client extension?

1. Export a default function that receives `{ value, itemData, fieldName }` and returns a string or HTMLElement. 2. Assemble the JS and reference it via `url:`.

What fields are required on a FDS Cell Renderer client extension?

url (string): Path to the JS module exporting the renderer.

FDS Cell Renderer

Render a custom cell in a Frontend Data Set table.

type: fdsCellRenderer·Frontend·Liferay docs →

# description

Registers a JS function that renders individual cells in a Liferay Frontend Data Set (the tables used across DXP admin surfaces).

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

# when to use

→You need to render a badge, progress bar, avatar, or link inside an admin table.
→The default renderers do not display your custom field the way you want.

# how to use

01Export a default function that receives { value, itemData, fieldName } and returns a string or HTMLElement.
02Assemble the JS and reference it via url:.

# required fields

field	type	description
`url`required	`string`	Path to the JS module exporting the renderer.

# optional fields

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

# example

client-extension.yaml

status-badge:
    type: fdsCellRenderer
    name: Status Badge
    url: status-badge.js

# more in frontend

cd ..scaffold this type in VS Code →