Use JavaScript Display Functions - Nextedy Documentation

JavaScript display functions are an advanced customization technique. Before using them, ensure you are comfortable with adding columns and configuring formatters.

Understand render vs display vs renderers

Powersheet offers three properties for controlling cell output. Each serves a distinct purpose:

Property	Location	Purpose	Modifies data?
`display`	Column definition	Select which property of a linked entity to show, or use a JS function for custom output	No
`render`	Column definition	Reference a named renderer or inline JS expression for custom HTML	No
`renderers`	Root-level section	Define reusable named renderer functions	No

Neither render nor display modify the underlying data. If you need a calculated value that is saved back to the data source, use the formula property instead. See Configure Dynamic Expressions for details on formula.

Use display for property selection

The simplest use of display is selecting which property of a linked entity to show. For scalar navigation properties (n-to-1 relationships), set it to a property name string:

columns:
  hazard:
    title: Hazard
    display: title

This shows the title property of the linked Hazard entity instead of the default identifier.

Use display with a JavaScript function

For dynamic cell content, set display to a JavaScript arrow function string. The function receives a context object and should return an HTML string:

columns:
  systemRequirements.systemRequirement:
    title: System Requirement
    display: "() => `${context.value.objectId}: ${context.value.title}`"

Use the YAML > (folded scalar) indicator for multi-line function strings:

columns:
  riskControls.riskControl:
    title: Risk Control
    display: >
      () => `<b>${context.value.objectId}</b>
      ${context.value.title ? '- ' + context.value.title : ''}`

The JavaScript is evaluated in the browser for each cell at render time.

Use render for custom HTML

The render property provides custom HTML rendering for a column. It accepts either an inline JavaScript expression or a reference to a named renderer: Inline expression:

columns:
  title:
    title: Title
    render: "() => `<b>${context.value}</b>`"

Named renderer reference:

columns:
  status:
    title: Status
    render: statusRenderer

Use display when you need to select which property of a navigation property to show, or to format it with JavaScript. Use render when you need custom HTML rendering for any column type. When both are set on the same column, render takes precedence for visual output.

Define reusable renderers

The renderers section at the root level of the sheet configuration defines named renderer functions. Each renderer is a JavaScript arrow function string with access to the context object:

renderers:
  boldName: "() => `<b>${context.value}</b>`"
  linkedItems: "() => context.value.map((item) => `<b>${item.name}</b>`).join(', ')"

Reference a named renderer from any column’s render property:

columns:
  title:
    title: Title
    render: boldName
  riskControls.riskControl:
    title: Risk Controls
    render: linkedItems
    multiItem: true

When the same display logic applies to multiple columns, define it once in renderers and reference it by name. This avoids duplicating JavaScript across column definitions and makes maintenance easier.

Customize picker display

The list.display property customizes how items appear in dropdown pickers, not in the cell itself:

columns:
  riskControls.riskControl:
    title: Risk Control
    multiItem: true
    list:
      search:
        - title
        - id
      display: >
        () => `${context.value.objectId}
        ${context.value.title ? '-- ' + context.value.title : ''}`

Context object reference

Dynamic expressions receive a context object. The available properties depend on the evaluation location:

Property	Available in	Description
`context.value`	`render`, `display`, `renderers`	The current cell value
`context.item`	`render`, `display`, `renderers`, `formula`, `formatter`	The entity object for the current row
`context.item.id`	All per-cell contexts	The work item ID
`context.item.projectId`	All per-cell contexts	The project ID
`context.document`	`formatter`	Current document information
`context.source`	`formula`, `display`	Parent entity in relationship contexts
`context.entity`	`formula`	Current entity as a plain object

If a column uses a custom render or JavaScript display function, the automatic external link (the hasUrl feature) will not be displayed for that column. Plan your link rendering within the JavaScript function if you need clickable URLs.

Complete YAML example

renderers:
  idAndTitle: "() => `${context.value.objectId}: ${context.value.title || ''}`"
  boldValue: "() => `<b>${context.value}</b>`"

columns:
  outlineNumber:
    title: "#"
    width: 80
    isReadOnly: true
  title:
    title: Title
    width: "*"
    hasFocus: true
    render: boldValue
  hazard:
    title: Hazard
    display: title
    list:
      search:
        - title
        - id
  systemRequirements.systemRequirement:
    title: System Requirement
    render: idAndTitle
    list:
      search:
        - title
        - id
      display: >
        () => `${context.value.objectId}
        ${context.value.title ? '-- ' + context.value.title : ''}`
  riskControls.riskControl:
    title: Risk Controls
    multiItem: true
    render: "() => context.value.map((item) => `<b>${item.objectId}</b>`).join(', ')"
    list:
      search:
        - title
        - id

Verify

After saving the sheet configuration, reload the powersheet document. You should now see cells rendering custom HTML content — bold text, formatted identifiers, or concatenated values — according to the JavaScript functions you defined. Columns using render or display functions will show the transformed output instead of raw property values.

​Understand render vs display vs renderers

​Use display for property selection

​Use display with a JavaScript function

​Use render for custom HTML

​Define reusable renderers

​Customize picker display

​Context object reference

​Complete YAML example

​Verify

​See also

Understand render vs display vs renderers

Use display for property selection

Use display with a JavaScript function

Use render for custom HTML

Define reusable renderers

Customize picker display

Context object reference

Complete YAML example

Verify

See also