Skip to main content

​
Property Definition

PropertyTypeDefaultDescription
columns.<key>.renderstringNoneJavaScript arrow function string returning HTML, or a predefined renderer name. Evaluated at render time in the browser.

​
Render Types

TypeSyntaxDescription
Inline functionrender: > () => ...JavaScript arrow function returning HTML template literal
YAML anchorrender: *displayItemAsIconIDTitleLinkReference to a reusable YAML anchor
Predefined rendererrender: myCustomRendererReference to a renderer name defined in configuration

​
Render Resolution Flow

diagram

​
Context Object

The JavaScript function has access to a context object for building dynamic HTML:
VariableDescription
context.valueThe current cell value
context.itemThe current row item with entity properties (projectId, id, entityType)
context.item.entityType.custom.iconPathIcon path from entity type metadata
context.item.projectIdPolarion project ID of the current item
context.item.idWork item ID of the current item
context.polarionModel.polarionBaseUrlBase URL of the Polarion server

​
Inline Function Render

columns:
  title:
    title: Title
    render: >
      () => `<strong>${context.value}</strong>`
Using a YAML anchor for reuse across columns: 
snippets:
  displayItemAsIconIDTitleLink: &displayItemAsIconIDTitleLink >
    () =>
      `<img src='${context.item.entityType.custom.iconPath}'><a
        target="_blank"
        href="/powersheet/polarion/nx_databridge/redirect/WorkItem/${context.item.projectId}/${context.item.id}">${context.value}</a>`

columns:
  systemRequirements.systemRequirement:
    title: System Requirement
    render: *displayItemAsIconIDTitleLink

​
Predefined Renderer Reference

Renderers can be defined in the configuration and referenced by name: 
renderers:
  myCustomRenderer: "() => `<strong>${context.value}</strong>`"

columns:
  status:
    render: myCustomRenderer
The exact renderers section configuration and available predefined renderer names may vary. Verify the supported renderer names in your Powersheet version.

​
Render vs Display

Aspectdisplayrender
Primary purposeSelect which property of a referenced entity to showFull custom HTML rendering
Property name inputtitle, id, titleOrNameNot supported (function or name only)
JS function inputSupportedSupported
Predefined namesNot supportedSupported via renderers section
Typical useNavigation columns needing property selectionAny column needing custom HTML
Use render when you need full control over cell HTML. Use display when you simply need to select which property of a navigation target to show. When both are needed on the same column, display handles property selection while render handles visual formatting.

​
Complete YAML Example

snippets:
  displayItemAsIconLink: &displayItemAsIconLink >
    () =>
      `<img src='${context.item.entityType.custom.iconPath}'><a
        target="_blank"
        href="/powersheet/polarion/nx_databridge/redirect/WorkItem/${context.item.projectId}/${context.item.id}">${context.value}</a>`

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
  title:
    title: User Need
    width: 200
    hasFocus: true
    render: *displayItemAsIconLink
  systemRequirements.systemRequirement.title:
    title: System Requirement
    width: 180
    render: *displayItemAsIconLink
    columnGroup: sysReq
  systemRequirements.systemRequirement.severity:
    title: Severity
    width: 100
    columnGroup: sysReq

columnGroups:
  sysReq:
    groupName: System Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

sources:
  - id: main
    model: rtm
    query:
      from: UserNeed
      where: <WHERE>
    expand:
      - name: systemRequirements
        title: System Requirements
Source references: Column Configuration Guide KB article, powersheet.yaml, domain/document.ts (Column.render)
KB ArticlesSource Code
  • configContext.ts
  • prod-powersheet-src/com.nextedy.powersheet/src/com/nextedy/powersheet/PowersheetService.java
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/common/types/domain/document.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/src/modules/Powersheet/Powersheet.tsx
  • prod-powersheet-src/com.nextedy.powersheet.client/src/modules/ConfigProvider/ConfigProvider.tsx