Item Colors - Nextedy Documentation

This page has thin source coverage. The color mechanisms documented below are derived from the sheet 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.

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.

Property	Type	Default	Description
`styles`	`object`	`{}`	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 declaration block wrapped in curly braces {}:

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 Class	RPN Range	Background Color	Text Color	Purpose
`.boldCol`	All	Inherited	Inherited	Applies `font-weight: 600` for bold text emphasis
`.rpn1`	1 — 150 (low risk)	`#eaf5e9` (light green)	`#1d5f20` (dark green)	Low-risk visual indicator
`.rpn2`	151 — 250 (medium risk)	`#fff3d2` (light yellow)	`#735602` (dark yellow)	Medium-risk visual indicator
`.rpn3`	> 250 (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 Selector	Background	Text Color	Purpose
`.firstRow .headSysReq`	`rgba(62, 175, 63, 0.12)` (light green)	`#2A792D`	First row of System Requirement column group header
`.lastRow .headSysReq`	`#FFF` (white)	`#2A792D`	Last row of System Requirement column group header
`.firstRow .headFinalRanking`	`rgba(62, 175, 63, 0.12)` (light green)	`#2A792D`	First row of Final Ranking column group header
`.lastRow .headFinalRanking`	`#FFF` (white)	`#2A792D`	Last 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.

Property	Type	Default	Description
`cellDecorators`	`object`	`{}`	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:

Parameter	Type	Description
`info.value`	`any`	The current value of the cell being rendered
`info.cell`	`HTMLElement`	The DOM element of the cell (wrapped with jQuery for `toggleClass` calls)
`info.item`	`object`	The 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 <= 250); $(info.cell).toggleClass('rpn3', val > 250);}

Logic breakdown:

Condition	Class Applied	Visual Result
Always	`boldCol`	Bold text (font-weight: 600)
`val > 0 && val <= 150`	`rpn1`	Green background, dark green text
`val > 150 && val <= 250`	`rpn2`	Yellow background, dark yellow text
`val > 250`	`rpn3`	Red background, dark red text
`val == 0` or `null`	None (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
    <= 250); $(info.cell).toggleClass('rpn3', val>0 && val > 250);}

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).

Property	Type	Default	Description
`headers.rowHeader.renderer`	`string`	See application	Defines 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. A column references a cell decorator via its cellRenderer property. Set cellRenderer to the decorator name — for example, cellRenderer: "rpn" applies the decorator named rpn to that column. As described in Cell Decorators, a decorator may also auto-match a column when the decorator’s name equals the column id.

Typical Column-to-Decorator Mapping

In an FMEA configuration, RPN columns reference the rpn cell decorator:

Column Binding	Decorator	Applied Style Classes
`rpn` (Initial RPN)	`rpn`	`boldCol`, `rpn1`/`rpn2`/`rpn3`
`rpnNew` (Revised RPN)	`rpn`	`boldCol`, `rpn1`/`rpn2`/`rpn3`
Row header	`rowHeaderRpnNew`	`rpn1`/`rpn2`/`rpn3`

Custom Color Schemes

You can define custom color schemes by creating new style classes and cell decorator functions. The general pattern is:

Define CSS classes in styles with your desired colors
Create a JavaScript function in cellDecorators that applies those classes based on data conditions
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 Format	Color Support	Notes
PDF Export	Supported	Cell formatter processes styles during PDF generation; see PDF Export API
Excel Export	Limited	Some style information transfers; see Compatibility for details
Baseline Comparison	Modified	Comparison 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 sheet 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 <= 250); $(info.cell).toggleClass('rpn3', val > 250);}
  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
    <= 250); $(info.cell).toggleClass('rpn3', val>0 && val > 250);}

Cell Decorators — full reference for the cellDecorators configuration property
CSS Classes — complete list of built-in and custom CSS classes
Conditional Formatting — overview of all conditional formatting mechanisms
Configuration Properties Index — full property reference including styles, cellDecorators, and headers
PDF Export API — how colors are handled during PDF export

​Configuration Architecture

​The styles Property

​Style Definition Format

​Risk Priority Number (RPN) Styles

​RPN Style Configuration

​Column Group Header Styles

​The cellDecorators Property

​Cell Decorator Function Signature

​RPN Cell Decorator

​Row Header RPN Decorator

​Row Header Renderer

​Row Header Configuration

​Applying Colors to Columns

​Typical Column-to-Decorator Mapping

​Custom Color Schemes

​Example: Custom Severity Color Scheme

​Color Behavior in Export

​Complete Example

​Related Pages

Configuration Architecture

The `styles` Property

Style Definition Format

Risk Priority Number (RPN) Styles

RPN Style Configuration

Column Group Header Styles

The `cellDecorators` Property

Cell Decorator Function Signature

RPN Cell Decorator

Row Header RPN Decorator

Row Header Renderer

Row Header Configuration

Applying Colors to Columns

Typical Column-to-Decorator Mapping

Custom Color Schemes

Example: Custom Severity Color Scheme

Color Behavior in Export

Complete Example

Related Pages