Medal Rank
Overview
- Shows gold, silver, and bronze medals for ranks one, two, and three
- Keeps a quiet plain number for every other position
- Makes the top of a leaderboard pop instantly
- Reads the rank straight from a number column
- Which ranks earn a medal is easy to change in the JSON
- Applied as column-formatting JSON on a number field, so it changes nothing about the underlying data
Common Use Cases
- Sales or performance leaderboards
- Contest or competition standings
- Top-N reports by score
- Ranking of teams, regions, or reps
- Survey or vote results
- Any ranked list where the top few should stand out
Details
- Design Pattern: Metrics & Progress
- Format Scope: Column
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Region | Single line of text | [Title] |
| Rank | Number | [Rank] |
Prerequisites
- Build a list with these columns before you paste the JSON.
- Then populate the list with a rank number per row.
- Because the JSON is applied at the column level, the Rank column can use any name you want.
- How many top places get a medal is set in the JSON – change it to award more or fewer.
How to Apply JSON code
- On the Rank 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",
"txtContent": "=if(Number(@currentField) == 1, '🥇', if(Number(@currentField) == 2, '🥈', if(Number(@currentField) == 3, '🥉', @currentField)))",
"style": {
"font-size": "=if(Number(@currentField) <= 3, '24px', '14px')",
"font-weight": "700",
"text-align": "center",
"min-width": "28px",
"color": "=if(Number(@currentField) <= 3, '#201f1e', '#8a8886')",
"line-height": "1.2",
"text-shadow": "=if(Number(@currentField) <= 3, '0 0 1px rgba(0,0,0,0.15)', 'none')"
}
}Common Questions About the Medal Rank
What is the Medal Rank 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 rank column that awards medals to the top places without ongoing development overhead.
What columns does it need?
It needs one Number column holding the rank, where the JSON is applied, plus any label column such as the region or name. The medals are chosen from that rank.
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 award more than three medals?
Yes. The rule that turns ranks one, two, and three into medals is set in the JSON. Adjust it to award more places or to change which icons the top ranks use.
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.
