Configure Item Colors - Nextedy Documentation

Prerequisites

A working Risksheet document with risk items
Access to the risksheet.json configuration file
Familiarity with CSS color properties

How Item Color Styling Works

Risksheet uses three configuration properties that work together to apply data-driven colors:

cellDecorators — JavaScript functions that evaluate cell values and apply CSS classes
styles — CSS class definitions that specify colors, fonts, and backgrounds
headers.rowHeader.renderer — Optional row header renderer for applying colors to the row header column

Configuration Flow
cellDecorators styles Grid Display
rpn: function()	------>	.rpn1 { green }	--->	Cell: 120 (green)
evaluates value	.rpn2 { yellow }	Cell: 250 (amber)
applies CSS class	.rpn3 { red }	Cell: 400 (red)

Step 1: Define Cell Decorator Functions

Cell decorators are JavaScript functions that inspect cell values and toggle CSS classes. Add them to the cellDecorators section of your risksheet.json:

{
  "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); }"
  }
}

The info parameter provides:

Property	Description
`info.value`	The current cell value
`info.cell`	The DOM element of the cell
`info.item`	The full work item data for the row

Step 2: Define CSS Styles for Color Classes

Map the CSS classes used in your decorators to actual color definitions in the styles section:

{
  "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;}",
    ".boldCol": "{font-weight: 600;}"
  }
}

This example creates a three-tier color scheme for Risk Priority Numbers (RPN):

Class	Range	Background	Text	Meaning
`rpn1`	1 — 150	Light green (`#eaf5e9`)	Dark green (`#1d5f20`)	Low risk
`rpn2`	151 — 350	Light yellow (`#fff3d2`)	Dark amber (`#735602`)	Medium risk
`rpn3`	> 350	Light red (`#f8eae7`)	Dark red (`#ab1c00`)	High risk

Always include !important on background-color and color properties in your style definitions. Without it, the grid’s default CSS may silently override your custom colors.

Step 3: Assign the Decorator to Your Column

Reference the decorator name in the cellDecorator property of the column that should display conditional colors:

{
  "columns": [
    {
      "binding": "rpn",
      "header": "RPN",
      "formula": "commonRpn",
      "cellDecorator": "rpn",
      "width": 60
    }
  ]
}

The cellDecorator value must match a key defined in the top-level cellDecorators object.

Step 4: Color Row Headers

To apply color coding to the row header column for at-a-glance risk visibility, configure a custom renderer in the headers section and pair it with a cell decorator that reads from the work item:

{
  "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); }"
  }
}

Row headers are not bound to a specific column. Access data through info.item['fieldName'] instead. The example above reads the revised RPN field rpnNew.

Step 5: Style Column Group Headers

Apply distinct background colors to column group headers to visually separate FMEA sections:

{
  "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 .firstRow and .lastRow selectors target multi-row column group headers, letting you differentiate between the group title row and the individual column title row.

Common Color Palettes

Recommended color combinations for standard risk analysis use cases:

Use Case	Low	Medium	High
RPN (3-tier)	`#eaf5e9` / `#1d5f20`	`#fff3d2` / `#735602`	`#f8eae7` / `#ab1c00`
Status flags	`#e8f5e9` / `#388e3c`	`#e3f2fd` / `#1565c0`	`#ffebee` / `#b71c1c`

The color palettes above are suggested starting points. Adjust the threshold values in your cellDecorators functions to match your organization’s risk classification scales and standards.

Verification

After saving your risksheet.json and refreshing the page:

You should now see RPN cells color-coded green (1—150), yellow (151—350), or red (>350)
Row headers should reflect the revised RPN color for each risk item
Column group headers should display the configured section colors

If colors do not appear, open the browser developer console and verify that the CSS classes (rpn1, rpn2, rpn3) are being applied to the cell elements.

​Prerequisites

​How Item Color Styling Works

​Step 1: Define Cell Decorator Functions

​Step 2: Define CSS Styles for Color Classes

​Step 3: Assign the Decorator to Your Column

​Step 4: Color Row Headers

​Step 5: Style Column Group Headers

​Common Color Palettes

​Verification

​See Also

Prerequisites

How Item Color Styling Works

Step 1: Define Cell Decorator Functions

Step 2: Define CSS Styles for Color Classes

Step 3: Assign the Decorator to Your Column

Step 4: Color Row Headers

Step 5: Style Column Group Headers

Common Color Palettes

Verification

See Also