Folder Highlight
Overview
- Distinguishes folders from files in a mixed library
- Folders get a colored folder icon, a soft tint, and a bolder name
- Files keep a clean, simple file icon
- Detects folders automatically, so nothing extra is stored
- Applied as column-formatting JSON on the Name column, so it changes nothing about the items
- Works on any document library
Common Use Cases
- Libraries with nested folders
- Project workspaces
- Department file shares
- Archive structures
- Resource libraries
- Any mixed folder-and-file library
Details
- Design Pattern: File & Library Display
- Format Scope: Column
Required Columns
| Display name | Column type |
|---|---|
| Name | System Column |
| File type | System Column |
Prerequisites
- Open your document library (or create one and upload a few files).
How to Apply JSON code
- On the Name 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": {
"display": "flex",
"align-items": "center",
"box-sizing": "border-box",
"width": "100%",
"max-width": "100%",
"min-height": "38px",
"padding": "=if([$File_x0020_Type] == '', '4px 10px 4px 8px', '0')",
"border-left": "=if([$File_x0020_Type] == '', '3px solid #e4b647', '0')",
"border-radius": "=if([$File_x0020_Type] == '', '4px', '0')",
"background-color": "=if([$File_x0020_Type] == '', '#fff3cf', 'transparent')"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "13.5px",
"line-height": "18px",
"color": "#242424",
"font-weight": "=if([$File_x0020_Type] == '', '600', '400')",
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"txtContent": "[$FileLeafRef]"
}
]
}Common Questions About the Folder Highlight
What is the Folder Highlight built with?
It is built with a standard SharePoint document library and a small piece of column-formatting JSON applied to the Name column. 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 easier-to-navigate libraries without ongoing development overhead.
How does it know what is a folder?
It checks whether an item has a file type. Folders do not have a file extension, so the JSON treats those rows as folders and styles them, while everything with an extension is treated as a file.
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 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 I change the folder color or tint?
Yes. The folder color, tint, and icon are set in the JSON, so you can match them to your brand or make folders stand out more or less. The file styling is just as easy to adjust.
Can Greg build this for our library?
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 library.
