Motivation
cssRules already allows conditional CSS styling (e.g. color a score red when it is below a threshold). However, there is no way to map a raw integer or enum value to a human-readable category label without pre-computing that label in the data source.
Example use case: An activityScore integer field (0–100) should display as "Low", "Medium", or "High" based on the score range, while still applying color coding via cssRules.
Proposed API
Add valueRules?: ValueRule[] to UiSettings:
interface ValueRule {
if: { condition: CssRuleCondition; value: string };
then: string; // display text to show when condition matches
}
The first matching rule wins. Falls back to the raw resolved value when no rule matches.
Example configuration (ContentConfiguration YAML)
{
"label": "Activity Score",
"property": "spec.extensions.repository.activityScore",
"uiSettings": {
"valueRules": [
{ "if": { "condition": "lessThan", "value": "20" }, "then": "Low" },
{ "if": { "condition": "lessThan", "value": "60" }, "then": "Medium" },
{ "if": { "condition": "greaterThanOrEqual", "value": "60" }, "then": "High" }
],
"cssRules": [
{ "if": { "condition": "lessThan", "value": "20" }, "styles": { "color": "red" } }
]
}
}
Motivation
cssRulesalready allows conditional CSS styling (e.g. color a score red when it is below a threshold). However, there is no way to map a raw integer or enum value to a human-readable category label without pre-computing that label in the data source.Example use case: An
activityScoreinteger field (0–100) should display as "Low", "Medium", or "High" based on the score range, while still applying color coding viacssRules.Proposed API
Add
valueRules?: ValueRule[]toUiSettings:The first matching rule wins. Falls back to the raw resolved value when no rule matches.
Example configuration (ContentConfiguration YAML)
{ "label": "Activity Score", "property": "spec.extensions.repository.activityScore", "uiSettings": { "valueRules": [ { "if": { "condition": "lessThan", "value": "20" }, "then": "Low" }, { "if": { "condition": "lessThan", "value": "60" }, "then": "Medium" }, { "if": { "condition": "greaterThanOrEqual", "value": "60" }, "then": "High" } ], "cssRules": [ { "if": { "condition": "lessThan", "value": "20" }, "styles": { "color": "red" } } ] } }