Skip to main content

​
Rendering Options Overview

Risksheet offers two approaches for custom data rendering:
ApproachPropertyEditableRendering Location
Client-side renderercellRendererColumn remains editableBrowser (JavaScript)
Server-side rendererserverRenderColumn becomes read-onlyServer (Velocity script)

​
Step 1: Add a Client-Side Cell Renderer

Define a custom renderer function in the cellRenderers section and reference it in the column configuration: 
{
  "columns": [
    {
      "id": "riskLevel",
      "binding": "riskLevel",
      "header": "Risk Level",
      "cellRenderer": "riskLevelRenderer",
      "width": 120
    }
  ]
}
The renderer function receives the grid, cell element, data item, and current value as parameters. It can modify the cell’s HTML content and styling.
Cell renderers (cellRenderer) replace the entire cell display logic. Cell decorators (cellDecorators) add CSS classes to cells without changing their content. Use renderers for custom HTML; use decorators for conditional styling.

​
Step 2: Add a Server-Side Rendered Column

For complex rendering that requires access to Polarion data relationships or cross-item queries, use serverRender with a Velocity script: 
{
  "columns": [
    {
      "id": "linkedRequirements",
      "binding": "linkedReqs",
      "header": "Linked Requirements",
      "serverRender": "linkedItemsRenderer",
      "width": 200
    }
  ]
}
When you set a serverRender property on a column, it automatically becomes type: "text" and readOnly: true. Users cannot edit server-rendered columns.

​
Step 3: Use Cell Decorators for Conditional Formatting

Cell decorators apply CSS classes to cells based on their values. Define them in the cellDecorators section: 
{
  "cellDecorators": {
    "severity": "function(info){ var val = info.value; $(info.cell).toggleClass('high-severity', val >= 8); $(info.cell).toggleClass('medium-severity', val >= 4 && val < 8); $(info.cell).toggleClass('low-severity', val < 4);}"
  },
  "styles": {
    ".high-severity": "{background-color: #f8eae7 !important; color: #ab1c00 !important;}",
    ".medium-severity": "{background-color: #fff3d2 !important; color: #735602 !important;}",
    ".low-severity": "{background-color: #eaf5e9 !important; color: #1d5f20 !important;}"
  }
}
The decorator function receives info.value (the cell’s current value), info.cell (the DOM element), and info.item (the full row data). diagram

​
Step 4: Combine Formulas with Decorators

A common pattern is using a formula to compute a value and a decorator to style it: 
{
  "formulas": {
    "commonRpn": "function(info){ var value = info.item['occ']*info.item['det']*info.item['sev']; return value?value:null;}"
  },
  "cellDecorators": {
    "rpn": "function(info){ var val = info.value; $(info.cell).toggleClass('rpn1', val>0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 350);}"
  },
  "columns": [
    {
      "id": "rpn",
      "binding": "rpn",
      "header": "RPN",
      "formula": "commonRpn",
      "width": 70
    }
  ]
}
The formula calculates the RPN value; the cell decorator applies color coding based on the result.
Custom cell renderers are skipped when the Risksheet is in baseline comparison mode. The comparison highlighting takes precedence to clearly show changes between versions.

​
Verification

Save the configuration and reload your Risksheet. You should now see cells with custom rendering applied. For cell decorators, verify that the conditional CSS classes are applied by checking that cells display the correct background colors based on their values.

​
See Also