Employee Shoutout

The Employee Shoutout turns a plain SharePoint list into a wall of recognition cards, so praise for a teammate reads warmly at a glance instead of sitting in flat rows. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the name column. Each card carries a category emoji, the person's name, a colored category tag, the shoutout in quotes, and who gave it, and any card left without a category falls back to a neutral badge so the wall always looks intentional.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Multiple Lines of Text Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each recognition as a warm card led by a category emoji and the person’s name
• Color-codes the card and its tag by category, so the wall reads by theme at a glance
• Shows the shoutout message in quotes and credits who gave it underneath
• Applied as column-formatting JSON on the name column, so it changes the look without touching the data
• Reads by category value, so you get the right color and emoji just by picking from the choice column
• Any card left without a category falls back to a neutral badge instead of looking broken

Common Use Cases

• A team kudos or recognition wall
• Monthly employee or MVP awards
• Peer-to-peer thank-you notes
• Values-in-action or culture highlights
• Customer compliments passed to staff
• Project wrap-up appreciations

Details

• Design Pattern: People Cards
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate it – pick a category and write a short shoutout for each person.
3. Internal column names (in brackets) must match the JSON exactly.
4. The colors key off the category words Teamwork, Innovation, Customer Focus, and Leadership – use these exact words in your choice column or edit them in the JSON to match yours (any other value gets a neutral badge).

How to Apply JSON code

1. Select the Nominee column header, then Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.
4. Widen the Nominee column and hide the others so each card has room.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "gap": "6px",
    "width": "100%",
    "max-width": "100%",
    "padding": "10px 14px",
    "margin": "4px 0",
    "background-color": "#ffffff",
    "border": "1px solid #e5e7eb",
    "border-left": "=if([$Category] == 'Innovation', '5px solid #8764b8', if([$Category] == 'Customer Focus', '5px solid #038387', if([$Category] == 'Leadership', '5px solid #d65a00', if([$Category] == 'Teamwork', '5px solid #0f6cbd', if([$Category] == 'Above & Beyond', '5px solid #4caf50', '5px solid #9aa0a6')))))",
    "border-radius": "10px",
    "box-shadow": "0 1px 2px rgba(0,0,0,0.08)",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "align-items": "center",
        "justify-content": "space-between",
        "width": "100%",
        "gap": "14px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center",
            "gap": "10px",
            "min-width": "0",
            "flex-grow": "1"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "flex-shrink": "0",
                "width": "34px",
                "height": "34px",
                "border-radius": "50%",
                "display": "flex",
                "align-items": "center",
                "justify-content": "center",
                "font-size": "18px",
                "background-color": "=if([$Category] == 'Innovation', '#efe9f7', if([$Category] == 'Customer Focus', '#e3f2f1', if([$Category] == 'Leadership', '#fbe9df', if([$Category] == 'Teamwork', '#e5f0fa', if([$Category] == 'Above & Beyond', '#e8f5e9', '#f0f0f0')))))"
              },
              "txtContent": "=if([$Category] == 'Innovation', '💡', if([$Category] == 'Customer Focus', '⭐', if([$Category] == 'Leadership', '🧭', if([$Category] == 'Teamwork', '🤝', '🎉'))))"
            },
            {
              "elmType": "div",
              "style": {
                "font-size": "17px",
                "font-weight": "700",
                "color": "#201f1e",
                "white-space": "nowrap",
                "overflow": "hidden",
                "text-overflow": "ellipsis"
              },
              "txtContent": "@currentField"
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "flex-shrink": "0",
            "padding": "4px 13px",
            "border-radius": "14px",
            "font-size": "13px",
            "font-weight": "700",
            "color": "#ffffff",
            "text-align": "center",
            "background-color": "=if([$Category] == 'Innovation', '#8764b8', if([$Category] == 'Customer Focus', '#038387', if([$Category] == 'Leadership', '#d65a00', if([$Category] == 'Teamwork', '#0f6cbd', if([$Category] == 'Above & Beyond', '#4caf50', '#9aa0a6')))))"
          },
          "txtContent": "=if([$Category] == '', 'Shoutout', [$Category])"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "font-size": "15px",
        "color": "#2f2f2f",
        "font-style": "italic",
        "line-height": "19px"
      },
      "txtContent": "=if([$Message] == '', 'Recognized by the team', '“' + [$Message] + '”')"
    },
    {
      "elmType": "div",
      "style": {
        "font-size": "13px",
        "line-height": "17px",
        "color": "#4b5563",
        "font-weight": "500"
      },
      "txtContent": "=if([$From] == '', '', '— from ' + [$From])"
    }
  ]
}

Common Questions About the Employee Shoutout