Employee Badge
Overview
- Renders each person as an ID-badge-style card using the SharePoint Gallery layout
- A colored header and an initials avatar give each badge a consistent, official look
- The name, job title, and a colored department tag identify the person at a glance
- An employee ID and a barcode strip complete the badge styling
- Applied as gallery view formatting JSON, so the whole list switches to badges without changing the underlying data
- Works on any staff list, and the department colors and fields are easy to adapt
Common Use Cases
- Staff or employee directory
- New-hire welcome wall
- Contractor or visitor badges
- Team roster with IDs
- Conference attendee badges
- Volunteer or member directory
Details
- Design Pattern: People Cards
- Format Scope: View
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Title | Single line of text | [Title] |
| Job Title | Single line of text | [JobTitle] |
| Department | Choice | [Department] |
| Employee Id | Single line of text | [EmployeeId] |
Prerequisites
- Build a list with these columns before you paste the JSON.
- Populate the list with data.
- Internal column names (in brackets) must match the JSON exactly.
How to Apply JSON code
- Create a Gallery view on the list (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
- With the new gallery view open, open the view dropdown again and choose Format current view.
- Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 255,
"width": 210,
"hideSelection": false,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"box-sizing": "border-box",
"height": "100%",
"border": "1px solid #edebe9",
"border-radius": "10px",
"background-color": "#ffffff",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "30px",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"background-color": "=if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', if([$Department] == 'Sales', '#e3008c', '#605e5c')))))",
"color": "#ffffff",
"font-size": "11px",
"font-weight": "700",
"letter-spacing": "2px"
},
"txtContent": "STAFF ID"
},
{
"elmType": "div",
"style": {
"width": "44px",
"height": "44px",
"border-radius": "50%",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"color": "#ffffff",
"font-size": "15px",
"font-weight": "700",
"margin-top": "12px",
"background-color": "=if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', if([$Department] == 'Sales', '#e3008c', '#605e5c')))))"
},
"txtContent": "=substring([$Title], 0, 1) + substring([$Title], indexOf([$Title], ' ') + 1, indexOf([$Title], ' ') + 2)"
},
{
"elmType": "div",
"style": {
"font-size": "16px",
"font-weight": "650",
"color": "#242424",
"margin-top": "12px",
"text-align": "center"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"font-size": "13px",
"font-weight": "500",
"color": "#333333",
"margin-top": "3px",
"text-align": "center"
},
"txtContent": "[$JobTitle]"
},
{
"elmType": "div",
"style": {
"font-size": "12px",
"font-weight": "650",
"margin-top": "12px",
"padding": "4px 14px",
"border-radius": "14px",
"background-color": "=if([$Department] == 'Engineering', '#dcecff', if([$Department] == 'Marketing', '#ece2fb', if([$Department] == 'Operations', '#e0efd4', if([$Department] == 'Finance', '#f9e6d2', if([$Department] == 'Sales', '#fbe2f1', '#f3f2f1')))))",
"color": "=if([$Department] == 'Engineering', '#0c447c', if([$Department] == 'Marketing', '#4c3476', if([$Department] == 'Operations', '#205c1f', if([$Department] == 'Finance', '#8a4a16', if([$Department] == 'Sales', '#9b1d69', '#3b3a39')))))"
},
"txtContent": "[$Department]"
},
{
"elmType": "div",
"style": {
"font-size": "12px",
"font-weight": "500",
"color": "#5f5f5f",
"margin-top": "12px",
"letter-spacing": "0.3px"
},
"txtContent": "=' ID ' + [$EmployeeId]"
},
{
"elmType": "div",
"style": {
"width": "105px",
"height": "20px",
"margin-top": "5px",
"display": "flex",
"justify-content": "center",
"align-items": "stretch",
"gap": "2px"
},
"children": [
{ "elmType": "div", "style": { "width": "2px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "1px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "3px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "1px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "2px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "3px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "1px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "2px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "2px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "1px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "3px", "background-color": "#242424" } },
{ "elmType": "div", "style": { "width": "2px", "background-color": "#242424" } }
]
}
]
}
}Common Questions About the Employee Badge
What is the Employee Badge built with?
It is built with a standard Microsoft List (SharePoint list) and gallery view formatting expressed in 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 polished staff directory without ongoing development overhead.
What columns does it need?
It uses four columns: the built-in Title for the name, a JobTitle, a Department, and an EmployeeId. The badge refers to each by its internal name, so the JSON and the columns must line up exactly – here those names are Title, JobTitle, Department, and EmployeeId.
Is the barcode a real, scannable barcode?
No – it is a decorative strip that gives the card an authentic ID-badge look. If you need a scannable code, that can be generated as an image and shown instead, which Greg can set up using the employee ID.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint view 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 Greg build this for our team?
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.
