SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Employee Recognition Card

This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated Apr 21, 2025

Employee Recognition Card formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "font-family": "Segoe UI, sans-serif",
      "width": "100%",
      "padding": "20px",
      "max-width": "360px",
      "border-radius": "20px",
      "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)",
      "overflow": "hidden",
      "margin": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "13px",
          "font-weight": "600",
          "color": "#555",
          "margin-bottom": "8px",
          "width": "100%"
        },
        "txtContent": "Commended by"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "12px",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "42px",
              "height": "42px",
              "border-radius": "50%",
              "object-fit": "cover",
              "padding": "20px"
            },
            "attributes": {
              "src": "=getUserImage([$From.email],'L')"
            }
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "600",
                  "font-size": "15px",
                  "color": "#111"
                },
                "txtContent": "[$From.title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "color": "#888"
                },
                "txtContent": "[$From.role]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "12px",
          "background-color": "#f2fdf5",
          "width": "100%",
          "margin-top": "12px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "80px",
              "height": "80px",
              "border-radius": "50%",
              "object-fit": "cover",
              "padding": "20px"
            },
            "attributes": {
              "src": "=getUserImage([$To.email],'L')"
            }
          },
          {
            "elmType": "div",
            "style": {
              "width": "26px",
              "height": "26px",
              "background-color": "#38d39f",
              "border-radius": "50%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "padding": "20px",
              "margin-left": "-30px"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size": "20px",
                  "color": "#fff"
                },
                "attributes": {
                  "iconName": "Trophy2"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flexGrow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "600",
                  "font-size": "15px",
                  "color": "#111",
                  "padding-left": "8px"
                },
                "txtContent": "[$To.title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "font-weight": "600",
                  "color": "#1aaf5d",
                  "padding-left": "8px"
                },
                "txtContent": "[$AwardType]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "14px",
          "color": "#444",
          "text-align": "center",
          "font-weight": "400",
          "font-style": "italic",
          "padding": "12px 16px",
          "background-color": "#ffffff"
        },
        "txtContent": "[$Message]"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "center",
          "gap": "16px",
          "padding": "12px",
          "background-color": "#ffffff",
          "border-bottom-left-radius": "20px",
          "border-bottom-right-radius": "20px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Medal": "=if([$Reactions_Medal]=='',1,Number([$Reactions_Medal])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "🥇",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Medal]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Heart": "=if([$Reactions_Heart]=='',1,Number([$Reactions_Heart])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "💖",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Heart]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Clap": "=if([$Reactions_Clap]=='',1,Number([$Reactions_Clap])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "👏",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Clap]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionemployee-recognition-card.json

From the contributor

How to use this sample

Summary

This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.

screenshot of the sample

View requirements

Column Name Type
Title Single line of text
From Person or Group
To Person or Group
Message Multiple lines of text
AwardType Choice
Reactions_Medal Number
Reactions_Heart Number
Reactions_Clap Number
DateRecognized Date and Time

A PowerShell Script (Create List.ps1) has been provided in the assets folder to provision the list for you.

Note: This script uses PnP PowerShell and requires an environment ready for PnP PowerShell.

Sample

Solution Author(s)
employee-recognition-card.json Sudeep Ghatak

Version history

Version Date Comments
1.0 Apr 21, 2024 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

None

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format