Skip to main content

​
Understanding Conditional Formatting

Conditional formatting in Nextedy RISKSHEET requires three configuration sections working together: diagram

​
Configure Conditional Cell Formatting

​
Step 1: Reference the Decorator in Your Column

Add a cellRenderer property to the column definition: 
{
  "id": "rpn",
  "header": "RPN",
  "type": "int",
  "formula": "commonRpn",
  "cellRenderer": "rpn"
}

​
Step 2: Define the Cell Decorator Logic

In the cellDecorators section, create a JavaScript function that applies CSS classes based on value thresholds: 
"cellDecorators": {
  "rpn": "function(info){ var val = info.value; wijmo.toggleClass(info.cell, 'rpn-low', val > 0 && val <= 150); wijmo.toggleClass(info.cell, 'rpn-medium', val > 150 && val <= 350); wijmo.toggleClass(info.cell, 'rpn-high', val > 350); }"
}

​
Step 3: Define the CSS Styles

In the styles section, define how each class should appear: 
"styles": {
  ".rpn-low": "{background-color: #eaf5e9 !important; color: #1d5f20 !important;}",
  ".rpn-medium": "{background-color: #fff3d2 !important; color: #735602 !important;}",
  ".rpn-high": "{background-color: #f8eae7 !important; color: #ab1c00 !important;}"
}
CSS classes applied via cell decorators may conflict with default grid styles. Always use !important flags in your CSS definitions to ensure your conditional formatting takes precedence.

​
Access Cell Data in Decorators

The decorator function receives an info object with access to:
PropertyDescriptionExample
info.valueCurrent cell valueinfo.value > 100
info.item['fieldId']Any field in the current rowinfo.item['severity']
info.cellThe DOM cell element$(info.cell).toggleClass(...)

​
Example: Multi-Condition Formatting

Highlight cells based on multiple field values: 
"cellDecorators": {
  "mitigation": "function(info){ var rpn = info.item['rpnNew']; var status = info.item['status']; var isHighRisk = rpn > 350; var isOpen = status === 'open'; wijmo.toggleClass(info.cell, 'urgent', isHighRisk && isOpen); wijmo.toggleClass(info.cell, 'completed', status === 'closed'); }"
}

"styles": {
  ".urgent": "{background-color: #ffebee !important; border-left: 4px solid #c62828 !important; font-weight: 600 !important;}",
  ".completed": "{background-color: #e8f5e9 !important; text-decoration: line-through !important;}"
}
When comparing enumeration fields, use the enum option ID (e.g., 'yes'), not the display value (e.g., 'Y'). Check your enumeration configuration in Polarion to find the correct IDs.

​
Conditional Formatting Decision Matrix

Value RangeCSS ClassVisual Result
RPN 1-150rpn-lowGreen background
RPN 151-350rpn-mediumYellow background
RPN 351+rpn-highRed background
Status = closedcompletedStrikethrough
High risk + openurgentBold red border

​
Example: Row Header Conditional Formatting

Apply conditional styling to the row header column to create a visual risk indicator: 
"headers": {
  "rowHeader": {
    "renderer": "rowHeaderRpn"
  }
},
"cellDecorators": {
  "rowHeaderRpn": "function(info){ var val = info.item['rpnNew']; wijmo.toggleClass(info.cell, 'row-low', val > 0 && val <= 150); wijmo.toggleClass(info.cell, 'row-medium', val > 0 && val > 150 && val <= 350); wijmo.toggleClass(info.cell, 'row-high', val > 0 && val > 350); }"
},
"styles": {
  ".row-low": "{border-left: 7px solid #4caf50 !important;}",
  ".row-medium": "{border-left: 7px solid #ffc107 !important;}",
  ".row-high": "{border-left: 7px solid #f44336 !important;}"
}
You can apply multiple CSS classes to a single cell. The decorator function can call wijmo.toggleClass() multiple times with different class names based on different conditions.

​
Verification

You should now see:
  • Cells displaying different background colors based on their values
  • Styles updating automatically when cell values change
  • Visual risk indicators helping you identify high-priority items

​
See Also

KB ArticlesSupport TicketsSource Code
  • AppConfig.ts
  • risksheet.json
  • CellPreviewFormatter.ts
  • CellEditorFormatter.ts
  • ExportToPdf.ts