Skip to main content
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:
PropertyLocationPurposeModifies data?
displayColumn definitionSelect which property of a linked entity to show, or use a JS function for custom outputNo
renderColumn definitionReference a named renderer or inline JS expression for custom HTMLNo
renderersRoot-level sectionDefine reusable named renderer functionsNo
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.
diagram

​
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:
PropertyAvailable inDescription
context.valuerender, display, renderersThe current cell value
context.itemrender, display, renderers, formula, formatterThe entity object for the current row
context.item.idAll per-cell contextsThe work item ID
context.item.projectIdAll per-cell contextsThe project ID
context.documentformatterCurrent document information
context.sourceformula, displayParent entity in relationship contexts
context.entityformulaCurrent 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.

​
See also