SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Emoji Reactions

This sample demonstrates reacting with an emoji. Who reacted and the total counts per reaction are stored with the list item.

Get this format View on GitHub

Shared by André Lage
Updated Dec 6, 2021

Emoji Reactions formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "padding": "10px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "inline-block"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border": "3px solid #ccc",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "attributes": {
              "iconName": "Add",
              "class": "ms-fontSize-24 ms-fontColor-blueDark ms-bgColor-communicationTint40 ms-bgColor-communicationTint20--hover"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": true,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "10px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "🙂",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'🙂'+@me) > -1, replace([$Emotion],'🙂'+@me,''), [$Emotion]+'🙂'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂1🙁0😃0👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'🙂'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "🙁",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'🙁'+@me) > -1, replace([$Emotion],'🙁'+@me,''), [$Emotion]+'🙁'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁1😃0👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'🙁'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "😃",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'😃'+@me) > -1, replace([$Emotion],'😃'+@me,''), [$Emotion]+'😃'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃1👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'😃'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "👏",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'👏'+@me) > -1, replace([$Emotion],'👏'+@me,''), [$Emotion]+'👏'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏1👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'👏'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "👋",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'👋'+@me) > -1, replace([$Emotion],'👋'+@me,''), [$Emotion]+'👋'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋1🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'👋'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "🔔",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'🔔'+@me) > -1, replace([$Emotion],'🔔'+@me,''), [$Emotion]+'🔔'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔1👑0🔎0☕0|',if(indexOf([$Emotion],'🔔'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "👑",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'👑'+@me) > -1, replace([$Emotion],'👑'+@me,''), [$Emotion]+'👑'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑1🔎0☕0|',if(indexOf([$Emotion],'👑'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "🔎",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'🔎'+@me) > -1, replace([$Emotion],'🔎'+@me,''), [$Emotion]+'🔎'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑0🔎1☕0|',if(indexOf([$Emotion],'🔎'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "border-radius": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-bgColor-gray30--hover ms-fontSize-20"
                    },
                    "txtContent": "☕",
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Emotion": "=if(indexOf([$Emotion],'☕'+@me) > -1, replace([$Emotion],'☕'+@me,''), [$Emotion]+'☕'+@me)",
                        "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑0🔎0☕1|',if(indexOf([$Emotion],'☕'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.'))))"
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "inline-block",
          "padding": "5px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,indexOf([$EmotionCount],'🙁'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "🙂"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,indexOf([$EmotionCount],'🙁')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'🙂'+@me) > -1, replace([$Emotion],'🙂'+@me,''), [$Emotion]+'🙂'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'🙂'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,indexOf([$EmotionCount],'😃'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "🙁"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,indexOf([$EmotionCount],'😃')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'🙁'+@me) > -1, replace([$Emotion],'🙁'+@me,''), [$Emotion]+'🙁'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'🙁'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,indexOf([$EmotionCount],'👏'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "😃"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,indexOf([$EmotionCount],'👏')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'😃'+@me) > -1, replace([$Emotion],'😃'+@me,''), [$Emotion]+'😃'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'😃'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,indexOf([$EmotionCount],'👋'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "👏"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,indexOf([$EmotionCount],'👋')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'👏'+@me) > -1, replace([$Emotion],'👏'+@me,''), [$Emotion]+'👏'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'👏'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,indexOf([$EmotionCount],'🔔'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "👋"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,indexOf([$EmotionCount],'🔔')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'👋'+@me) > -1, replace([$Emotion],'👋'+@me,''), [$Emotion]+'👋'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'👋'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,indexOf([$EmotionCount],'👑'))) >0,'inline-block','none')",
              "padding": "0px 0px 0px 5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "🔔"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,indexOf([$EmotionCount],'👑')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'🔔'+@me) > -1, replace([$Emotion],'🔔'+@me,''), [$Emotion]+'🔔'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'🔔'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,indexOf([$EmotionCount],'🔎'))) >0,'inline-block','none')",
              "padding-left": "5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "inline-block",
                  "padding": "0px 0px 0px 5px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "border": "1px solid #ccc",
                      "border-radius": "5px",
                      "display": "inline-block",
                      "padding-left": "5px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-communicationTint20--hover"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "5px",
                          "cursor": "pointer",
                          "display": "inline-block"
                        },
                        "attributes": {
                          "class": "ms-fontSize-20"
                        },
                        "txtContent": "👑"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "5px",
                          "cursor": "pointer",
                          "display": "inline-block"
                        },
                        "attributes": {
                          "class": "ms-fontSize-20"
                        },
                        "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,indexOf([$EmotionCount],'🔎')))"
                      }
                    ]
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'👑'+@me) > -1, replace([$Emotion],'👑'+@me,''), [$Emotion]+'👑'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'👑'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,indexOf([$EmotionCount],'☕'))) >0,'inline-block','none')",
              "padding-left": "5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "display": "inline-block",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "🔎"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,indexOf([$EmotionCount],'☕')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'🔎'+@me) > -1, replace([$Emotion],'🔎'+@me,''), [$Emotion]+'🔎'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'🔎'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))) >0,'inline-block','none')",
              "padding-left": "5px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "border": "1px solid #ccc",
                  "border-radius": "5px",
                  "padding-left": "5px"
                },
                "attributes": {
                  "class": "ms-bgColor-communicationTint20--hover"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "☕"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "5px",
                      "cursor": "pointer",
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20"
                    },
                    "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|')))"
                  }
                ]
              }
            ],
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Emotion": "=if(indexOf([$Emotion],'☕'+@me) > -1, replace([$Emotion],'☕'+@me,''), [$Emotion]+'☕'+@me)",
                "EmotionCount": "=if(indexOf([$Emotion],'☕'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')))"
              }
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionemoji-reactions-count.json

From the contributor

How to use this sample

Summary

This sample demonstrates reacting with an emoji. Who reacted and the total counts per reaction are stored with the list item.

Two versions are provided. The first, emoji-reactions.json, displays the reactions of the current user and allows them to react. The section, emoji-reactions-count.json, displays reactions from all users and the count of each reaction type.

screenshot of the sample

emoji-reactions-count.json

emotions format

  • Below provides how the counting board is organized by users.

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text
Emotion Multiple line of text - Stores reactions for users
EmotionCount Single line of text - Stores count of reactions

Here's how the storage looks behind the scenes:

storage

Sample

Solution Author(s)
emoji-reactions.json André Lage
emoji-reactions-count.json André Lage

Version history

Version Date Comments
1.0 January 12, 2022 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