Skip to main content

​
Overview

Item colors in RISKSHEET are applied through row header renderers that conditionally style entire rows based on field values. This feature is commonly used to highlight high-risk items, differentiate between work item types, or visually indicate workflow status.

​
Configuration Steps

​
1. Define Color Schemes in Styles Section

Add CSS class definitions to the styles section of your risksheet.json: 
{
  "styles": {
    ".rpn1": {
      "background-color": "#eaf5e9 !important",
      "color": "#1d5f20 !important"
    },
    ".rpn2": {
      "background-color": "#fff3d2 !important",
      "color": "#735602 !important"
    },
    ".rpn3": {
      "background-color": "#f8eae7 !important",
      "color": "#ab1c00 !important"
    }
  }
}
Use sufficient color contrast ratios (WCAG AA standard: 4.5:1 for normal text) to ensure readability. The !important flag ensures your styles override default RISKSHEET styling.

​
2. Create a Cell Decorator Function

Define a JavaScript function in the cellDecorators section that applies CSS classes based on field values: 
{
  "cellDecorators": {
    "rowHeaderRpnNew": "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val>0 && val <= 150 ); $(info.cell).toggleClass('rpn2', val>0 && val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val>0 && val > 350);}"
  }
}
Key Properties:
  • info.item['fieldName'] - Access work item field values
  • $(info.cell).toggleClass('className', condition) - Apply CSS class when condition is true
  • Multiple toggleClass calls support multi-condition logic

​
3. Apply Renderer to Row Header

Reference your decorator in the headers.rowHeader.renderer configuration property: 
{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew",
      "width": 90
    }
  }
}

​
Complete Example: RPN-Based Risk Coloring

RPN ValueDecorator LogicCSS ClassColor
0-150rpn1 condition.rpn1Green
151-350rpn2 condition.rpn2Yellow
351+rpn3 condition.rpn3Red
Full configuration combining all three elements: 
{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew"
    }
  },
  "cellDecorators": {
    "rowHeaderRpnNew": "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val>0 && val <= 150 ); $(info.cell).toggleClass('rpn2', val>0 && val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val>0 && val > 350);}"
  },
  "styles": {
    ".rpn1": {
      "background-color": "#eaf5e9 !important",
      "color": "#1d5f20 !important"
    },
    ".rpn2": {
      "background-color": "#fff3d2 !important",
      "color": "#735602 !important"
    },
    ".rpn3": {
      "background-color": "#f8eae7 !important",
      "color": "#ab1c00 !important"
    }
  }
}

​
Alternative: Enum-Based Coloring

For status or category-based coloring, compare field values to enum IDs (not display labels): 
{
  "cellDecorators": {
    "statusColorRenderer": "function(info){ var status = info.item['status']; $(info.cell).toggleClass('status-open', status === 'open'); $(info.cell).toggleClass('status-closed', status === 'closed'); $(info.cell).toggleClass('status-review', status === 'in_review');}"
  }
}
Always compare against enum IDs (e.g., 'open') rather than display labels (e.g., 'Open'). Display labels may change based on localization settings, breaking your color logic.

​
Verification

After saving your configuration:
  1. Open your RISKSHEET widget
  2. Row headers should display background colors corresponding to their field values
  3. Verify colors update automatically when field values change (e.g., when RPN recalculates after editing severity/occurrence)
You should see color-coded row headers that make high-priority items immediately visible in your risk table.

​
See Also

KB ArticlesSource Code
  • risksheet.json
  • AppConfig.ts
  • CellEditorFormatter.ts
  • ExportToPdf.ts
  • RiskSheetContextMenu.ts