Apply dynamic visual styling to Risksheet cells that changes automatically based on cell values, using cellDecorators for logic and styles for appearance in your risksheet.json configuration.
Conditional formatting in Risksheet uses a two-part system:
cellDecorators --- JavaScript functions that evaluate cell data and toggle CSS classes on the cell element
styles --- CSS class definitions that control the visual appearance applied by decorators
The decorator function runs every time a cell is rendered. It receives the cell’s value and the full row data, then adds or removes CSS classes based on conditions you define. The styles section injects those CSS classes into the page, controlling colors, fonts, and other visual properties.
Add named CSS class definitions to the styles object in your risksheet.json. Each entry maps a CSS class selector to a string of CSS properties. The class name must start with a dot (.), and the CSS properties must be wrapped in curly braces.
Risksheet applies default grid styles that override custom styles without !important. You must include !important on background-color and color properties in the styles object. Without it, your conditional formatting colors will not appear.
Add JavaScript functions to the cellDecorators object. Each decorator is keyed by the column binding it targets. The function receives an info object and uses jQuery’s toggleClass method to conditionally apply CSS classes.
{ "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);}" }}
This decorator:
Always applies boldCol (the second argument true means “always add”)
Applies rpn1 only when the value is between 1 and 150
Applies rpn2 only when the value is between 151 and 350
Applies rpn3 only when the value exceeds 350
When a condition is false, toggleClass removes that class, ensuring only one threshold class is active at a time
You can also apply conditional formatting to row headers using the headers.rowHeader.renderer property. The row header decorator accesses data from the entire row:
{ "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);}" }, "headers": { "rowHeader": { "renderer": "rowHeaderRpnNew" } }}
This colors the entire row header based on the revised RPN value, giving an immediate visual indicator of each risk item’s current risk level.
When decorating cells that contain enum values, compare against the enum ID (the internal identifier), not the display name:
{ "cellDecorators": { "completionStatus": "function(info){ var val = info.value; $(info.cell).toggleClass('statusGreen', val === 'yes'); $(info.cell).toggleClass('statusRed', val === 'no'); $(info.cell).toggleClass('statusAmber', val === 'partial');}" }}
Cell decorator functions receive the internal enum ID as the value, not the display name. For example, if your enum has id: "yes" with name: "Y", the decorator must compare against 'yes', not 'Y'. Comparing against display values is a common mistake that causes conditional formatting to never activate.
If you want enum descriptions to appear in dropdown menus alongside the name, use type: 'rating:ENUMID' instead of type: 'enum:ENUMID'. Regular enum columns show only the name; rating columns show both name and description. This does not affect how decorators receive the value --- both types pass the enum ID.
Risksheet intentionally does not enforce Polarion mandatory field validation during data entry (to make risk entry faster). Instead, use conditional formatting to visually indicate which fields require values:
{ "cellDecorators": { "severity": "function(info){ var val = info.value; $(info.cell).toggleClass('requiredEmpty', !val || val === ''); $(info.cell).toggleClass('requiredFilled', val && val !== '');}" }, "styles": { ".requiredEmpty": "{background-color: #fff8e1 !important; border-left: 3px solid #ff9800 !important;}", ".requiredFilled": "{border-left: none;}" }}
Since Risksheet does not enforce Polarion mandatory fields by design (to simplify data entry), use cell decorators and styles to highlight empty required columns with a colored background or border. This provides a visual cue without blocking the user’s workflow.
After applying conditional formatting, you should now see:
✅ RPN cells display with green, amber, or red backgrounds based on their computed values
✅ Row headers change color to match the revised RPN risk level
✅ Bold text appears on formula columns with the boldCol class
✅ Colors update automatically when risk parameter values change
✅ Conditional formatting is preserved in Excel exports (via includeStyles)
The exact appearance of conditional formatting may vary depending on your browser, Polarion theme, and any custom CSS injected at the project level. Test your decorator functions with representative data covering all threshold ranges.
