Star Rating (Column Formatting)
Overview
- Renders a number as five stars, filled gold up to the rating and outlined for the rest
- Uses SharePoint’s built-in star icons, so it stays crisp at any zoom
- Shows the score as X / 5 beside the stars for a precise read
- A blank rating shows five empty stars, and values are read as whole stars from 0 to 5
- Pure column-formatting JSON, so nothing about the underlying data changes
- Uses the current column, so the same JSON works on any rating field without editing
Common Use Cases
- Vendor and supplier ratings
- Product or service reviews
- Performance or appraisal scores
- Customer satisfaction ratings
- Content or resource quality
- Skill or proficiency levels
How to Apply JSON Formatting
Note – the rating uses the current column (@currentField), so you apply it directly to your rating column and the column name does not need to match anything. It expects a whole Number from 0 to 5; a blank cell shows five empty stars. Add or remove a star, or change the gold color, right in the JSON.
1. Create a list with the following columns:
[Title] Single line of text
[Rating] Number (0 to 5)
[Reviewer] Person
[Category] Choice
2. Populate the list with data.
3. On the Rating column, open the column header menu, choose Column settings, then Format this column.
4. Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code – Select, Copy and Paste
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "inline-flex",
"align-items": "center"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if((if(@currentField == '', 0, Number(@currentField))) >= 1, 'FavoriteStarFill', 'FavoriteStar')"
},
"style": {
"font-size": "16px",
"margin-right": "1px",
"color": "=if((if(@currentField == '', 0, Number(@currentField))) >= 1, '#ff9f00', '#c8c6c4')"
}
},
{
"elmType": "span",
"attributes": {
"iconName": "=if((if(@currentField == '', 0, Number(@currentField))) >= 2, 'FavoriteStarFill', 'FavoriteStar')"
},
"style": {
"font-size": "16px",
"margin-right": "1px",
"color": "=if((if(@currentField == '', 0, Number(@currentField))) >= 2, '#ff9f00', '#c8c6c4')"
}
},
{
"elmType": "span",
"attributes": {
"iconName": "=if((if(@currentField == '', 0, Number(@currentField))) >= 3, 'FavoriteStarFill', 'FavoriteStar')"
},
"style": {
"font-size": "16px",
"margin-right": "1px",
"color": "=if((if(@currentField == '', 0, Number(@currentField))) >= 3, '#ff9f00', '#c8c6c4')"
}
},
{
"elmType": "span",
"attributes": {
"iconName": "=if((if(@currentField == '', 0, Number(@currentField))) >= 4, 'FavoriteStarFill', 'FavoriteStar')"
},
"style": {
"font-size": "16px",
"margin-right": "1px",
"color": "=if((if(@currentField == '', 0, Number(@currentField))) >= 4, '#ff9f00', '#c8c6c4')"
}
},
{
"elmType": "span",
"attributes": {
"iconName": "=if((if(@currentField == '', 0, Number(@currentField))) >= 5, 'FavoriteStarFill', 'FavoriteStar')"
},
"style": {
"font-size": "16px",
"margin-right": "1px",
"color": "=if((if(@currentField == '', 0, Number(@currentField))) >= 5, '#ff9f00', '#c8c6c4')"
}
},
{
"elmType": "span",
"style": {
"margin-left": "7px",
"font-size": "12px",
"color": "#605e5c"
},
"txtContent": "=if(@currentField == '', '', Number(@currentField) + ' / 5')"
}
]
}Common Questions About the Star Rating
What is the Star Rating built with?
It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON that uses SharePoint’s built-in star icons. 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 polished list without ongoing development overhead.
What kind of column does it need?
It needs a single Number column that stores a whole value from 0 to 5, such as a rating. The JSON reads the current column rather than a fixed name, so you can reuse it on any rating field, and the column name does not need to match anything.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint column formatting and its built-in icon set, 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 existing columns and views look, 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 it show half stars?
Out of the box it fills whole stars, so a 3.5 shows as three filled stars. Half-star fills are possible with a little more JSON, and Greg can add them if your ratings use halves.
Can Greg build formatting 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.
