Simple, turnkey way to give badges to employees in Teams or Sharepoint?

[dawnperry]

It seems like there must be an app that would enable an employer to give badges to their employees that could be seen on teams or sharepoint... icons that go next to an employee name and represents launching a product, or taking a class, or working there for 5 years. I cannot find any easy way to get this done. any ideas?

[#2]

There's nothing in Sharepoint nor Teams for this but you can use the praise function in Teams or Viva Insights to send it to a channel and show of when someone is doing something good.


There's badges in Viva Engage but those aren't custom either

[#3 · Accepted solution]

@dawnperry further to the answer by @NicolasKheirallah, another way to do it is with a List web part on a SharePoint page and the view is formatted in advanced mode with JSON.

So create your list with the Title column, Description (single line of text, From (person), To (person), Icon (single line of text) and Likes (person column with multiple values allowed).

The icons you can use for the Icon column are at https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Create a new view and select Gallery for how to display it:

In that new view format the view and in advanced mode paste in the following JSON:

Spoiler

{
  "$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])"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Note: set that view as the default view.

The result will look like this:

Create a page in SharePoint where you'll display this view of the list and add a list web part. Select your list and the gallery view you created (I called my view Gallery but yours will no doubt be called something else). Click the toggles for hide command bar and see all.

It might happen that the web part doesn't pick up your gallery view but still displays the ordinary list. If this happens go back to your list and for the view selet Tiles and also make sure the view is the default:

 The result in the web part looks like this:

Due to the settings in the JSON your users can give likes or add comments.

I hope that's useful. I can't claim credit for the JSON which was by Tetsuka Kawahara on github at https://github.com/pnp/List-Formatting/tree/master/view-samples/praise-cards and fortunately you don't need to mess with the 352 lines of JSON but just copy & paste.

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP UK (and classic 1967 Morris Traveller driver)