Forum Discussion
Peer recognition program in M365. Has anyone done this without a third-party tool?
HR wants to launch a peer recognition program where employees can give kudos to each other. They want it visible to the team, maybe tied to company values, and ideally something that feeds into perfo...
You can create something like this just with a SharePoint list and a JSON view formatting. In the example below it's displayed in a list web part.
The list is fairly basic:
But the view formatting is pretty long!:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"width": 300,
"height": 450,
"hideSelection": true,
"formatter": {
"elmType": "div",
"style": {
"width": "95%",
"height": "95%",
"border": "1px solid",
"box-shadow": "0 3.2px 7.2px 0",
"border-radius": "6px",
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
},
"attributes": {
"class": "ms-fontColor-neutralTertiaryAlt"
},
"children": [
{
"elmType": "div",
"style": {
"width": "70%",
"display": "flex",
"flex-direction": "row-reverse",
"height": "30px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "50px",
"height": "50px",
"border-radius": "50%",
"border": "2px solid",
"z-index": "2",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"font-size": "28px"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white",
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "45px",
"z-index": "1"
},
"children": [
{
"elmType": "div",
"style": {
"width": "40px",
"height": "20px"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
}
},
{
"elmType": "div",
"style": {
"border-left": "20px solid",
"border-right": "20px solid",
"border-bottom": "10px solid transparent"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
}
}
]
}
]
}
]
},
{
"elmType": "img",
"style": {
"width": "150px",
"height": "150px",
"border-radius": "50%",
"border": "1px solid"
},
"attributes": {
"src": "=getUserImage([$To.email], 'L')",
"class": "ms-fontColor-neutralTertiaryAlt"
},
"defaultHoverField": "[$To]"
},
{
"elmType": "div",
"txtContent": "[$To.title]",
"style": {
"font-size": "15px",
"padding": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"width": "85%",
"height": "27%",
"overflow": "hidden",
"margin-top": "15px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"font-weight": "bold",
"font-size": "23px"
}
},
{
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"margin-top": "3px"
}
}
]
},
{
"elmType": "div",
"txtContent": "= 'From : ' + [$From.title]",
"defaultHoverField": "[$From]",
"style": {
"width": "90%",
"display": "flex",
"flex-direction": "row-reverse",
"height": "25px",
"align-items": "center",
"overflow": "hidden"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"width": "90%",
"display": "flex",
"justify-content": "space-between",
"font-size": "17px",
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "30px",
"height": "30px",
"cursor": "pointer",
"border-radius": "50%"
},
"attributes": {
"iconName": "OpenPane",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"cursor": "pointer",
"padding": "3px 5px 3px 5px",
"border-radius": "5px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Likes": "=if(indexOf([$Likes.email] , me) > -1 , removeFrom([$Likes.email] , me) , appendTo([$Likes.email] , me) )"
}
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"max-height": "300px",
"padding": "5px 20px 5px 20px",
"display": "flex",
"flex-direction": "column"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "10px",
"font-weight": "bold",
"font-size": "20px",
"display": "flex",
"align-items": "center",
"flex-direction": "row"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "HeartFill"
}
},
{
"elmType": "div",
"txtContent": "=length([$Likes])"
}
]
},
{
"elmType": "div",
"children": [
{
"forEach": "personIterator in [$Likes]",
"elmType": "div",
"style": {
"margin-bottom": "5px",
"display": "flex",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"style": {
"width": "32px",
"height": "32px",
"border-radius": "50%",
"margin-right": "5px"
},
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]"
}
},
{
"elmType": "span",
"txtContent": "[$personIterator.title]"
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "=if(indexOf([$Likes.email] , me) > -1 , 'HeartFill' , 'Heart' )"
}
},
{
"elmType": "div",
"txtContent": "=length([$Likes])"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"cursor": "pointer",
"padding": "3px 5px 3px 5px",
"border-radius": "5px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "defaultClick"
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "Comment"
}
},
{
"elmType": "div",
"txtContent": "=if([$_CommentCount] == '' , 0 ,[$_CommentCount])"
}
]
}
]
}
]
}
]
}
}
Because it's based on a list you can pull it into other things like reviews with Power Automate.
Rob
Los Gallardos
Microsoft Power Platform Community Super User.
Principal Consultant, Power Platform, WSP Global (and classic 1967 Morris Traveller driver)