> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Work with Rich Text Fields

> Display rich text content from Polarion work items in Nextedy RISKSHEET columns using server-side rendering, and understand the limitations when editing formatted text.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Overview

Polarion work items can contain rich text fields with HTML formatting, embedded images, and styled content. Risksheet supports displaying these fields read-only through server-side rendering with Velocity templates. Direct editing of rich text fields in the grid has limitations that require specific workarounds.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-Icoak49xQVOW38R/risksheet/diagrams/guides/columns/rich-text-fields/diagram-1.svg?fit=max&auto=format&n=-Icoak49xQVOW38R&q=85&s=3a37c0bf456f9bcbf4c5dfd987a2ff39" alt="diagram" style={{ maxWidth: "540px", width: "100%" }} width="540" height="130" data-path="risksheet/diagrams/guides/columns/rich-text-fields/diagram-1.svg" />
</Frame>

## Display a Rich Text Field

Add a column with the `serverRender` property using the Velocity expression that renders the field as HTML.

**Step 1.** Open your sheet configuration sheet configuration.

**Step 2.** Add a column with the `serverRender` property:

```yaml theme={null}
{
  "columns": [
    {
      "id": "description",
      "header": "Description",
      bindings: "description",
      "serverRender": "$item.fields().get('description').render().htmlFor().forFrame()",
      "width": 300
    }
  ]
}
```

The Velocity expression `$item.fields().get('fieldID').render().htmlFor().forFrame()` renders the full HTML content of the field, including images and formatting.

**Step 3.** Replace `'description'` with the actual field ID of your rich text custom field. For example, for a custom field named `testRichTextFieldID`:

```yaml theme={null}
serverRender: $item.fields().get('testRichTextFieldID').render().htmlFor().forFrame()
```

<Tip title="Finding your field ID">
  The field ID in the Velocity expression must match the Polarion field ID exactly. Check your project's custom field configuration in **Administration > Work Items > Custom Fields** for the correct ID.
</Tip>

<Info title="Automatic read-only">
  Columns with `serverRender` are automatically set to `readOnly: true`. You do not need to add this property separately.
</Info>

## Display Rich Text Fields with Images

Rich text fields that contain embedded images (such as symbol libraries or diagrams) require the same `serverRender` approach, but with a specific binding configuration.

**Step 1.** Configure the column with `serverRender` as shown above.

**Step 2.** Ensure the bindings reference `task.$item` rather than a specific field binding:

```yaml theme={null}
{
  "id": "symbols",
  "header": "Symbols",
  bindings: "task.$item",
  "serverRender": "$item.fields().get('symbols').render().htmlFor().forFrame()",
  "width": 250
}
```

<Warning title="Image binding reference">
  When rendering rich text fields with images via `serverRender`, the bindings must be set to `task.$item` rather than the specific field binding. Using the wrong binding reference causes images to fail to render or display incorrectly.
</Warning>

**Step 3.** To control image sizing within the column, add CSS styles through a TopPanel template:

```html theme={null}
<style>
  .wj-cell img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
  }
</style>
```

| CSS Property          | Effect                           |
| --------------------- | -------------------------------- |
| `max-width: 100%`     | Constrains image to column width |
| `max-height: 60px`    | Limits vertical space per image  |
| `object-fit: contain` | Preserves aspect ratio           |

## Use Plain Text as an Alternative

When you need editable multi-line text rather than formatted rich text, configure the column as `type: "text"` instead:

```yaml theme={null}
{
  "columns": [
    {
      "id": "notes",
      "header": "Notes",
      bindings: "notes",
      "type": "text",
      "width": 250
    }
  ]
}
```

This stores content as plain multi-line text without HTML formatting, and the field remains fully editable in the grid.

<Warning title="Editing rich text strips formatting">
  Risksheet does not fully support editing rich text fields directly in the grid. Editing may strip line breaks and HTML formatting from the underlying work item XML, causing all text to collapse into a single line. Use `type: "text"` for fields that need to be editable.
</Warning>

## Column Type Comparison

| Approach         | Editable | Formatting | Images | Use Case                            |
| ---------------- | -------- | ---------- | ------ | ----------------------------------- |
| `serverRender`   | ❌ No     | Preserved  | ✅ Yes  | Display formatted reports, diagrams |
| `type: "text"`   | ✅ Yes    | Stripped   | ❌ No   | Editable multi-line notes           |
| Default (string) | ✅ Yes    | Stripped   | ❌ No   | Short single-line text fields       |

For full property tables, Velocity snippets, export behavior, image sizing controls, and complete configuration examples, see the [Rich Text Fields](/risksheet/reference/columns/rich-text-fields) reference.

## Verification

After saving your configuration changes, reload the Risksheet page. You should now see:

* Rich text content displayed with full HTML formatting in the configured column
* Images rendered inline if the field contains embedded images
* The column is non-editable, indicated by the cursor not changing to an edit cursor on click
* Formatting such as bold text, colored text, and lists preserved from the Polarion work item

## See Also

* [Render Custom Data](/risksheet/guides/columns/custom-data-rendering) -- configure custom rendering functions for columns
* [Configure Cell Styles](/risksheet/guides/styling/cell-styles) -- apply visual styles to cells and columns
* [Customize the Top Panel](/risksheet/guides/customization/top-panel) -- add CSS and scripts via the TopPanel template
* [Column Configuration](/risksheet/guides/columns/index) -- overview of all column configuration options

<LastReviewed date="2026-06-24" />