Risk Matrix Cell
Overview
- Plots each item on a three-by-three red-amber-green risk grid
- Positions the dot by likelihood across and impact up
- Gives the familiar risk-heatmap read in one small cell
- Reads two number columns – likelihood and impact
- The grid colors are set in the JSON and easy to change
- Applied as column-formatting JSON on the impact column, so it changes nothing about the underlying data
Common Use Cases
- Risk registers and issue logs
- Project or program risk tracking
- Security or compliance risk reviews
- Vendor or supplier risk scoring
- Change or release risk assessment
- Any likelihood-and-impact pair you want plotted
Details
- Design Pattern: Metrics & Progress
- Format Scope: Column
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Risk | Single line of text | [Title] |
| Likelihood | Number | [Likelihood] |
| Impact | Number | [Impact] |
Prerequisites
- Build a list with these columns before you paste the JSON.
- Then populate each row with a likelihood and an impact from 1 to 3.
- The JSON reads likelihood from the Likelihood column, so its internal name in brackets must match the JSON exactly – or rename [$Likelihood] in the JSON to your own column.
- Apply the formatting to the impact column, not to the likelihood column.
- It is designed for Likelihood and Impact values of 1 to 3 only – values outside that range are not supported.
How to Apply JSON code
- On the Impact column, open the column header menu, choose Column settings, then Format this column.
- Switch to Advanced mode.
- Paste the JSON below and click Save.
JSON Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"position": "relative",
"width": "52px",
"height": "52px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "52px",
"gap": "2px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#86efac"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#bbf7d0"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#fde68a"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#bbf7d0"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#fde68a"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#fca5a5"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#fde68a"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#fca5a5"
}
},
{
"elmType": "div",
"style": {
"width": "16px",
"height": "16px",
"border-radius": "2px",
"background-color": "#ef4444"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "=if(if(@currentField == '', false, if([$Likelihood] == '', false, true)), 'block', 'none')",
"position": "absolute",
"width": "10px",
"height": "10px",
"border-radius": "50%",
"background-color": "#111827",
"border": "2px solid #ffffff",
"left": "=((Number([$Likelihood]) - 1) * 18 + 3) + 'px'",
"top": "=((3 - Number(@currentField)) * 18 + 3) + 'px'"
}
}
]
}
Common Questions About the Risk Matrix Cell
What is the Risk Matrix Cell built with?
It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a compact risk heatmap in one column without ongoing development overhead.
What columns does it need?
It needs two Number columns on a 1 to 3 scale – likelihood and impact, where the JSON is applied – plus any label column such as the risk name. The dot is placed from those two values.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.
If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?
Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.
Can I change the grid colors?
Yes. The nine cell colors are set in the JSON. Adjust them to match your own risk palette, and the dot still lands by likelihood and impact.
Can Greg build a design like this for our lists?
Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.
