> ## 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.

# Display Property

> The `display` property in a Nextedy POWERSHEET column configuration controls which property of a referenced entity is shown in the cell when the column is bound to a navigation property (a relationship).

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>;
};

## Property Definition

| Property                | Type   | Default | Description                                                                                                                                                                    |
| ----------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `columns.<key>.display` | string | `id`    | Specifies which property of a referenced entity to display. Accepts a property name (`title`, `titleOrName`, `id`) or a JavaScript arrow function string for custom rendering. |

## Display Values

| Value              | Description                                                           |
| ------------------ | --------------------------------------------------------------------- |
| `id`               | Shows the entity's ID (default)                                       |
| `title`            | Shows the entity's title property                                     |
| `titleOrName`      | Shows the title if available, otherwise falls back to the entity name |
| Custom property    | Any valid property name from the referenced entity type               |
| JS function string | Arrow function returning custom HTML (see below)                      |

## Display Resolution Flow

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-WiVljKlDztH36bB/powersheet/diagrams/reference/sheet-config/display-property/diagram-1.svg?fit=max&auto=format&n=-WiVljKlDztH36bB&q=85&s=8d8b218d2a1eb2db9624b44859a53dba" alt="diagram" style={{ width: "520px", maxWidth: "100%" }} width="520" height="160" data-path="powersheet/diagrams/reference/sheet-config/display-property/diagram-1.svg" />
</Frame>

## Simple Property Display

Show the `title` property of a referenced `Hazard` entity:

```yaml theme={null}
columns:
  hazard:
    title: Hazard
    display: title
```

Show the `titleOrName` property with fallback:

```yaml theme={null}
columns:
  hazard:
    title: Hazard
    display: titleOrName
```

## JavaScript Function Display

Use a JavaScript arrow function string to return custom HTML. The function has access to a `context` object.

### Context Object

| Variable                                | Description                                                      |
| --------------------------------------- | ---------------------------------------------------------------- |
| `context.value`                         | The current cell value (the referenced entity or property value) |
| `context.item`                          | The current row item with properties like `projectId`, `id`      |
| `context.polarionModel.polarionBaseUrl` | Base URL of the Polarion server                                  |

### Example: Icon with Link

```yaml theme={null}
columns:
  riskControls.riskControl:
    title: Risk Control
    display: >
      () => `<img
        src='${context.polarionModel.polarionBaseUrl}/polarion/icons/default/enums/type_purple_feature.png'>
        <a
          target="_blank"
          href="${context.polarionModel.polarionBaseUrl}/polarion/#/project/${context.item.projectId}/workitem?id=${context.item.id}">
          ${context.value.objectId}
        </a>`
```

<Tip title="Multi-Line YAML Strings">
  Use the `>` (folded scalar) indicator for multi-line JavaScript function strings in YAML. The function is evaluated in the browser at render time.
</Tip>

## Display vs Render

Both `display` and [render](/powersheet/reference/sheet-config/render-property) can accept JavaScript function strings, but they serve different purposes:

| Property  | Primary Use                                    | When to Use                                                                                                                                        |
| --------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `display` | Property name selection for navigation columns | Use when you need to select which property of a referenced entity to show, or when using a simple JS function                                      |
| `render`  | Custom HTML cell rendering                     | Use when `display` is already used for property selection and you need additional rendering control. Can also reference predefined renderer names. |

<Warning title="display and render Interaction">
  When both `display` and `render` are set on the same column, `render` typically takes precedence for visual output. Use `display` for property selection and `render` for custom HTML when both are needed.
</Warning>

## Complete YAML Example

```yaml theme={null}
columns:
  outlineNumber:
    title: "#"
    width: 80
  title:
    title: User Need
    width: 200
    hasFocus: true
  hazard:
    title: Hazard
    display: title
    list:
      search:
        - title
        - id
  riskControls.riskControl:
    title: Risk Control
    width: 160
    multiItem: true
    display: >
      () => `<img
        src='${context.polarionModel.polarionBaseUrl}/polarion/icons/default/enums/type_purple_feature.png'>
        <a
          target="_blank"
          href="${context.polarionModel.polarionBaseUrl}/polarion/#/project/${context.item.projectId}/workitem?id=${context.item.id}">
          ${context.value.objectId}
        </a>`
    list:
      search:
        - title
        - id
      display: >
        () => `<img
          src='${context.polarionModel.polarionBaseUrl}/polarion/icons/default/enums/type_purple_feature.png'>
          ${context.value.objectId} ${context.value.title ? '- ' + context.value.title : ''}`

sources:
  - id: main
    model: rtm
    query:
      from: UserNeed
      where: "type = 'UserNeed'"
    expand:
      - name: hazards
        title: Hazards
        expand:
          - name: riskControls
            title: Risk Controls
```

## Related Pages

* [Render Property](/powersheet/reference/sheet-config/render-property) -- custom HTML rendering as an alternative to `display`
* [Columns](/powersheet/reference/sheet-config/columns) -- full column property reference
* [Binding Syntax](/powersheet/reference/sheet-config/binding-syntax) -- column key patterns for navigation properties
* [Multi-Item Columns](/powersheet/reference/sheet-config/multi-item-columns) -- display for collections

***

<LastReviewed date="2026-07-02" />