Skip to main content

​
Prerequisites

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

​
Configuration Steps

​
1. Define the Cell Decorator Function

Open your risksheet.json file and add a function to the cellDecorators section. This JavaScript function applies CSS classes to cells based on their values. 
"cellDecorators": {
  "rpn": "function(info){\n var val = info.value;\n wijmo.toggleClass(info.cell, 'rpn1', val>0 && val <= 150 );\n wijmo.toggleClass(info.cell, 'rpn2', val > 150 && val <= 250);\n wijmo.toggleClass(info.cell, 'rpn3', val > 250);}"
}
What this does:
  • Reads the cell’s value from info.value
  • Applies rpn1 class for values 1-150 (low risk)
  • Applies rpn2 class for values 151-250 (medium risk)
  • Applies rpn3 class for values 251+ (high risk)
Use info.item['fieldName'] to access other field values from the same row. For example: var severity = info.item['severity'];

​
2. Define CSS Styles

Add style definitions to the styles section that specify how each CSS class should appear: 
"styles": {
  ".rpn1": "{background-color: #B0D444 !important;}",
  ".rpn2": "{background-color: #FFFE54 !important;}",
  ".rpn3": "{background-color: #F3AEAC !important;}"
}
You can style multiple properties: 
".rpn3": "{background-color: #f8eae7 !important; color: #ab1c00 !important; font-weight: 600;}"
Always add !important to CSS properties to ensure they override default styles. Without this flag, your custom styles may not apply correctly when multiple decorators target the same cell.

​
3. Apply the Decorator to a Column

In the columns array, add the cellRenderer property to the column you want to style: 
{
  "header": "RPN",
  "id": "rpn",
  "bindings": "rpn",
  "width": 80,
  "cellRenderer": "rpn"
}

​
Working with Enum Fields

When styling based on enumeration values, reference the enum ID, not the display label: 
"cellDecorators": {
  "statusStyle": "function(info){\n var val = info.value;\n wijmo.toggleClass(info.cell, 'bg-green', val === 'accepted');\n wijmo.toggleClass(info.cell, 'bg-yellow', val === 'pending');\n wijmo.toggleClass(info.cell, 'bg-red', val === 'rejected');}"
}
If your enum shows “Accepted” but the decorator doesn’t work, check the enum definition in Polarion. You may need to use the enum ID (e.g., 'accepted') instead of the display value (e.g., 'Accepted').

​
Styling Decision Matrix

diagram

​
Common Patterns

​
Multi-Condition Styling

Style cells based on multiple field values: 
"conditionalHighlight": "function(info){\n var sev = info.item['severity'];\n var occ = info.item['occurrence'];\n var isHighRisk = sev > 7 && occ > 7;\n wijmo.toggleClass(info.cell, 'critical', isHighRisk);}"

​
Text Color and Background

Combine multiple visual properties: 
".critical": "{background-color: #f8eae7 !important; color: #ab1c00 !important; border-left: 4px solid #ab1c00 !important;}"

​
Null Value Handling

Apply styles only when values exist: 
"safeDecorator": "function(info){\n var val = info.value;\n if (val !== null && val !== undefined) {\n   wijmo.toggleClass(info.cell, 'has-value', true);\n }}"
Use your browser’s developer console to test JavaScript logic before embedding it in JSON. Remember to escape double quotes (\") and newlines (\n) when adding to the configuration.

​
Verification

  1. Save your risksheet.json configuration
  2. Refresh the RISKSHEET widget
  3. You should now see cells styled according to their values
  4. Cells should dynamically update styling as values change

​
Troubleshooting

Styles not applying:
  • Verify the decorator function name matches the cellRenderer value
  • Confirm the decorator is defined in cellDecorators section
  • Check that CSS class names match between decorator and styles section
  • Add !important flags to CSS properties
Enum-based styling not working:
  • Use enum ID (e.g., 'yes') not display label (e.g., 'Y')
  • Check enum definition in Polarion for correct ID values
Styles disappear after editing:
  • Use wijmo.toggleClass() instead of setting styles directly
  • Cells are reused during scrolling, so inline styles don’t persist

​
See Also

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