Skip to main content
This page has thin source coverage. The color mechanisms documented below are derived from the risksheet.json configuration sample and the AppConfig.ts source. Additional color options may be available in your Risksheet version. Verify specific color classes and decorator behaviors in your application.

​
Configuration Architecture

Item colors in Risksheet follow a three-layer architecture. Each layer serves a distinct purpose, and all three work together to produce the final visual appearance of cells and rows. diagram

​
The styles Property

The styles property defines named CSS class rules that control visual appearance. Each entry maps a CSS class name to a set of CSS properties.
PropertyTypeDefaultDescription
stylesobject{}Named CSS style definitions for conditional cell formatting based on data values

​
Style Definition Format

Each key in the styles object is a CSS class name (prefixed with .), and the value is a CSS rule string: 
{
  "styles": {
    ".className": "css-property: value; another-property: value;"
  }
}

​
Risk Priority Number (RPN) Styles

The following built-in style classes implement a three-tier risk color scheme based on RPN thresholds.
Style ClassRPN RangeBackground ColorText ColorPurpose
.boldColAllInheritedInheritedApplies font-weight: 600 for bold text emphasis
.rpn11 — 150 (low risk)#eaf5e9 (light green)#1d5f20 (dark green)Low-risk visual indicator
.rpn2151 — 350 (medium risk)#fff3d2 (light yellow)#735602 (dark yellow)Medium-risk visual indicator
.rpn3> 350 (high risk)#f8eae7 (light red)#ab1c00 (dark red)High-risk visual indicator
All RPN style classes use !important to override default cell styling. This ensures risk color indicators are always visible regardless of other CSS rules that may apply to the cell.

​
RPN Style Configuration

{
  "styles": {
    ".boldCol": "font-weight:600;",
    ".rpn1": "background-color: #eaf5e9 !important;color: #1d5f20 !important;",
    ".rpn2": "background-color: #fff3d2 !important; color: #735602 !important;",
    ".rpn3": "background-color: #f8eae7 !important;color: #ab1c00 !important;"
  }
}

​
Column Group Header Styles

Styles can target specific column group headers by combining row position selectors with header group CSS classes. These styles apply to the column header area, not to data cells.
Style SelectorBackgroundText ColorPurpose
.firstRow .headSysReqrgba(62, 175, 63, 0.12) (light green)#2A792DFirst row of System Requirement column group header
.lastRow .headSysReq#FFF (white)#2A792DLast row of System Requirement column group header
.firstRow .headFinalRankingrgba(62, 175, 63, 0.12) (light green)#2A792DFirst row of Final Ranking column group header
.lastRow .headFinalRanking#FFF (white)#2A792DLast row of Final Ranking column group header
{
  "styles": {
    ".firstRow .headSysReq": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headSysReq": "background-color:#FFF !important;color:#2A792D !important",
    ".firstRow .headFinalRanking": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headFinalRanking": "background-color:#FFF !important;color:#2A792D !important"
  }
}
The headSysReq and headFinalRanking classes are applied to column groups via the headerGroupCss property on column definitions. You assign these classes when configuring column groups to enable targeted header styling.

​
The cellDecorators Property

Cell decorators are JavaScript functions that dynamically apply CSS classes to cells based on their current values or the parent item’s properties. They execute each time a cell is rendered, ensuring colors always reflect the current data.
PropertyTypeDefaultDescription
cellDecoratorsobject{}Maps column IDs to JavaScript functions that apply conditional CSS classes to cells

​
Cell Decorator Function Signature

Each cell decorator receives an info object with the following properties:
ParameterTypeDescription
info.valueanyThe current value of the cell being rendered
info.cellHTMLElementThe DOM element of the cell (wrapped with jQuery for toggleClass calls)
info.itemobjectThe full data item (work item) for the current row, allowing access to any field via info.item['fieldId']

​
RPN Cell Decorator

The rpn cell decorator applies risk-level color classes to RPN cells based on value thresholds: 
{
  "cellDecorators": {
    "rpn": "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val>0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 350);}"
  }
}
Logic breakdown:
ConditionClass AppliedVisual Result
AlwaysboldColBold text (font-weight: 600)
val > 0 && val <= 150rpn1Green background, dark green text
val > 150 && val <= 350rpn2Yellow background, dark yellow text
val > 350rpn3Red background, dark red text
val == 0 or nullNone (except boldCol)Default cell appearance with bold text

​
Row Header RPN Decorator

The rowHeaderRpnNew cell decorator applies the same RPN color scheme to row headers based on the revised (post-mitigation) RPN value stored in the rpnNew field: 
{
  "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);}"
  }
}
Unlike the rpn decorator which uses info.value (the cell’s own value), the rowHeaderRpnNew decorator uses info.item['rpnNew'] to read the revised RPN from the item data. This means the row header color reflects the post-mitigation risk level regardless of which cell triggered the render.

​
Row Header Renderer

The row header renderer is a named function that controls the visual appearance of the row header column (the leftmost column showing work item identifiers).
PropertyTypeDefaultDescription
headers.rowHeader.rendererstringSee applicationDefines the custom renderer function for row headers

​
Row Header Configuration

{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew"
    },
    "columnHeader": {
      "height": 32
    },
    "columnGroupHeader": {
      "height": 32
    }
  }
}
The renderer value references a cell decorator by name. In the example above, rowHeaderRpnNew causes each row header to be colored based on the revised RPN value of the corresponding risk item. This gives users an immediate visual summary of risk levels without scanning individual columns.

​
Applying Colors to Columns

To connect cell decorators to specific columns, reference the decorator name in your column configuration. The decorator is applied every time a cell in that column is rendered.
The exact column property that references a cell decorator should be verified in your Risksheet version. Check the column configuration section of the Column Type Reference for the decorator binding syntax.

​
Typical Column-to-Decorator Mapping

In an FMEA configuration, RPN columns reference the rpn cell decorator:
Column BindingDecoratorApplied Style Classes
rpn (Initial RPN)rpnboldCol, rpn1/rpn2/rpn3
rpnNew (Revised RPN)rpnboldCol, rpn1/rpn2/rpn3
Row headerrowHeaderRpnNewrpn1/rpn2/rpn3

​
Custom Color Schemes

You can define custom color schemes by creating new style classes and cell decorator functions. The general pattern is:
  1. Define CSS classes in styles with your desired colors
  2. Create a JavaScript function in cellDecorators that applies those classes based on data conditions
  3. Reference the decorator in the appropriate column configuration

​
Example: Custom Severity Color Scheme

{
  "styles": {
    ".sev-low": "background-color: #e3f2fd !important; color: #1565c0 !important;",
    ".sev-medium": "background-color: #fff8e1 !important; color: #f57f17 !important;",
    ".sev-high": "background-color: #fce4ec !important; color: #c62828 !important;",
    ".sev-critical": "background-color: #b71c1c !important; color: #ffffff !important;"
  },
  "cellDecorators": {
    "severityColor": "function(info){ var val = info.value; $(info.cell).toggleClass('sev-low', val >= 1 && val <= 3); $(info.cell).toggleClass('sev-medium', val >= 4 && val <= 6); $(info.cell).toggleClass('sev-high', val >= 7 && val <= 8); $(info.cell).toggleClass('sev-critical', val >= 9);}"
  }
}

​
Color Behavior in Export

Cell colors applied through styles and cellDecorators have different behaviors across export formats:
Export FormatColor SupportNotes
PDF ExportSupportedCell formatter processes styles during PDF generation; see PDF Export API
Excel ExportLimitedSome style information transfers; see Compatibility for details
Baseline ComparisonModifiedComparison mode adds its own color indicators (added/removed/modified) which may override decorator colors
The exact behavior of custom styles in PDF and Excel exports depends on the export script configuration. Colors defined with !important are more likely to be preserved. Check your pdfscript.js for custom export formatting logic.

​
Complete Example

A complete risksheet.json configuration demonstrating all item color mechanisms for an FMEA risk analysis: 
{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew"
    },
    "columnHeader": {
      "height": 32
    },
    "columnGroupHeader": {
      "height": 32
    }
  },
  "styles": {
    ".boldCol": "font-weight:600;",
    ".rpn1": "background-color: #eaf5e9 !important;color: #1d5f20 !important;",
    ".rpn2": "background-color: #fff3d2 !important; color: #735602 !important;",
    ".rpn3": "background-color: #f8eae7 !important;color: #ab1c00 !important;",
    ".firstRow .headSysReq": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headSysReq": "background-color:#FFF !important;color:#2A792D !important",
    ".firstRow .headFinalRanking": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headFinalRanking": "background-color:#FFF !important;color:#2A792D !important"
  },
  "cellDecorators": {
    "rpn": "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val>0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 350);}",
    "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);}"
  }
}
KB ArticlesSource Code
  • AppConfig.ts
  • RiskSheetContextMenu.ts
  • SheetConstants.ts
  • CellEditorFormatter.ts
  • ExportToPdf.ts