Skip to main content

​
Prerequisites

Before you begin, locate your risksheet.json configuration file. See Find Configuration Files for guidance.

​
Configuration Steps

​
1. Set the Row Header Renderer

Open your risksheet.json file and configure the headers.rowHeader.renderer property to reference your custom decorator function: 
"headers": {
  "rowHeader": {
    "renderer": "rowHeaderRpnNew"
  }
}
This tells RISKSHEET to use the rowHeaderRpnNew function for styling row headers.

​
2. Define the Cell Decorator Function

Add your styling function to the cellDecorators section: 
"cellDecorators": {
  "rowHeaderRpnNew": "function(info){\n var val = info.item['rpnNew'];\n wijmo.toggleClass(info.cell, 'rowHeadRpn1', val>0 && val <= 150 );\n wijmo.toggleClass(info.cell, 'rowHeadRpn2', val>0 && val > 150 && val <= 250);\n wijmo.toggleClass(info.cell, 'rowHeadRpn3', val>0 && val > 250);}"
}
What this does:
  • Retrieves the rpnNew field value from the row using info.item['rpnNew']
  • Applies different CSS classes based on risk thresholds:
    • rowHeadRpn1 for low risk (1-150)
    • rowHeadRpn2 for medium risk (151-250)
    • rowHeadRpn3 for high risk (251+)
Row header decorators use info.item['fieldName'] to access row data, not info.value. The row header doesn’t have a single bound field, so you must explicitly reference the field you want to evaluate.

​
3. Define the CSS Styles

Add style definitions to the styles section. This example uses colored left borders: 
"styles": {
  ".rowHeadRpn1": "{border-left: 7px solid #B0D444 !important;}",
  ".rowHeadRpn2": "{border-left: 7px solid #FFFE54 !important;}",
  ".rowHeadRpn3": "{border-left: 7px solid #F3AEAC !important;}"
}
You can customize with background colors, icons, or font styling: 
".rowHeadRpn3": "{border-left: 7px solid #F3AEAC !important; background-color: #f8eae7 !important; font-weight: 600;}"
Row header styles must include the !important flag to override default styling. Without it, your custom styles may not display.

​
Row Header Styling Flow

diagram

​
Common Patterns

​
Enum-Based Row Styling

Style row headers based on enumeration field values: 
"rowHeaderStatus": "function(info){\n var status = info.item['status'];\n wijmo.toggleClass(info.cell, 'status-open', status === 'open');\n wijmo.toggleClass(info.cell, 'status-closed', status === 'closed');\n wijmo.toggleClass(info.cell, 'status-review', status === 'inReview');}"
When comparing enum values, use the enum option ID (e.g., 'open') not the display label (e.g., 'Open'). Check your Polarion enum configuration to find the correct IDs.

​
Multi-Field Conditional Styling

Combine multiple field values to determine styling: 
"rowHeaderComplex": "function(info){\n var severity = info.item['severity'];\n var occurrence = info.item['occurrence'];\n var isCritical = (severity > 7 && occurrence > 7);\n wijmo.toggleClass(info.cell, 'row-critical', isCritical);}"

​
Calculated Field Styling

Use calculated or formula column values for styling: 
"rowHeaderCalc": "function(info){\n var rpn = info.item['rpn'];\n var rpnNew = info.item['rpnNew'];\n var improved = rpnNew < rpn * 0.5;\n wijmo.toggleClass(info.cell, 'row-improved', improved);}"

​
Visual Styling Options

Style PropertyUse CaseExample
border-leftRisk level indicator7px solid #B0D444
background-colorFull cell highlighting#f8eae7
colorText color change#ab1c00
font-weightEmphasis600 or bold
font-styleVisual distinctionitalic
Use multiple CSS properties together for stronger visual impact: border color for quick scanning, background for emphasis, and font weight for critical items.

​
Verification

  1. Save your risksheet.json configuration
  2. Upload the configuration file (if using document/template attachments)
  3. Refresh the RISKSHEET widget
  4. You should now see row headers styled with colored borders or backgrounds based on the configured field values
  5. Change a field value (e.g., update rpnNew) and verify the row header styling updates accordingly

​
Troubleshooting

Row header styles not displaying:
  • Verify headers.rowHeader.renderer matches the decorator function name exactly
  • Confirm the decorator function is defined in the cellDecorators section
  • Check that the field name in info.item['fieldName'] is correct and exists
  • Ensure CSS class names match between the decorator and styles section
Field value not populated:
  • Verify the field is correctly populated in work items
  • For calculated columns, ensure the formula executes correctly
  • Check that the field ID matches the column binding name
Styles not updating after data changes:
  • Use wijmo.toggleClass() instead of direct DOM manipulation
  • Avoid setting inline styles directly on info.cell
  • The grid reuses cells during scrolling, so class toggling is required
Wrong enum values:
  • Open Polarion Administration → Enumerations
  • Check the exact ID values for enum options
  • Use the ID in decorator logic, not the display name
Test your JavaScript logic in the browser console before embedding it in the JSON configuration. This helps you catch syntax errors and verify field names before configuration deployment.

​
See Also

KB ArticlesSupport TicketsSource Code
  • risksheet.json
  • AppConfig.ts
  • ExportToExcel.ts
  • AppConfigHelper.ts
  • SheetConstants.ts