SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Feedback Sentiment Board

This sample uses SharePoint List Formatting to visualize feedback sentiment with keyword-based detection in a color-coded and emoji-enhanced card view.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Oct 25, 2025

Feedback Sentiment Board formatting preview
Sample preview · View original image

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,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "border-radius": "12px",
      "padding": "20px",
      "margin-bottom": "16px",
      "border-left": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'fantastic')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'wonderful')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'outstanding')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'perfect')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'impressed')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'exceptional')>-1,'5px solid #28a745',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'worst')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'hate')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'awful')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'horrible')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'frustrated')>-1,'5px solid #dc3545',if(indexOf(toLowerCase([$Feedback]),'disappointing')>-1,'5px solid #dc3545','5px solid #ffc107')))))))))))))))))))",
      "box-shadow": "0 3px 10px rgba(0,0,0,0.12)",
      "background": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,if(indexOf(toLowerCase([$Feedback]),'great')>-1,if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,if(indexOf(toLowerCase([$Feedback]),'love')>-1,if(indexOf(toLowerCase([$Feedback]),'fantastic')>-1,if(indexOf(toLowerCase([$Feedback]),'wonderful')>-1,if(indexOf(toLowerCase([$Feedback]),'outstanding')>-1,if(indexOf(toLowerCase([$Feedback]),'perfect')>-1,if(indexOf(toLowerCase([$Feedback]),'impressed')>-1,if(indexOf(toLowerCase([$Feedback]),'exceptional')>-1,if(indexOf(toLowerCase([$Feedback]),'poor')>-1,if(indexOf(toLowerCase([$Feedback]),'bad')>-1,if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,if(indexOf(toLowerCase([$Feedback]),'worst')>-1,if(indexOf(toLowerCase([$Feedback]),'hate')>-1,if(indexOf(toLowerCase([$Feedback]),'awful')>-1,if(indexOf(toLowerCase([$Feedback]),'horrible')>-1,if(indexOf(toLowerCase([$Feedback]),'frustrated')>-1,if(indexOf(toLowerCase([$Feedback]),'disappointing')>-1))))))))))))))))))",
      "border": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'1px solid #c3e6cb',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'1px solid #c3e6cb',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'1px solid #c3e6cb',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'1px solid #c3e6cb',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'1px solid #f5c6cb',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'1px solid #f5c6cb',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'1px solid #f5c6cb','1px solid #ffeaa7')))))))"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "flex-start",
          "justify-content": "space-between",
          "margin-bottom": "14px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "flex": "1"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "50px",
                  "height": "50px",
                  "border-radius": "50%",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "margin-right": "14px",
                  "font-size": "28px",
                  "background": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'rgba(40, 167, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'rgba(40, 167, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'rgba(40, 167, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'rgba(40, 167, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'rgba(220, 53, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'rgba(220, 53, 69, 0.15)',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'rgba(220, 53, 69, 0.15)','rgba(255, 193, 7, 0.15)')))))))",
                  "box-shadow": "0 2px 8px rgba(0,0,0,0.1)"
                },
                "txtContent": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'fantastic')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'wonderful')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'outstanding')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'perfect')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'impressed')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'exceptional')>-1,'😊',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'worst')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'hate')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'awful')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'horrible')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'frustrated')>-1,'😞',if(indexOf(toLowerCase([$Feedback]),'disappointing')>-1,'😞','😐')))))))))))))))))))"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "font-weight": "700",
                      "font-size": "18px",
                      "color": "#1a1a1a",
                      "margin-bottom": "4px"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'fantastic')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'wonderful')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'outstanding')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'perfect')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'impressed')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'exceptional')>-1,'✓ Positive Feedback',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'worst')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'hate')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'awful')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'horrible')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'frustrated')>-1,'✗ Negative Feedback',if(indexOf(toLowerCase([$Feedback]),'disappointing')>-1,'✗ Negative Feedback','— Neutral Feedback')))))))))))))))))))",
                    "style": {
                      "font-size": "12px",
                      "font-weight": "600",
                      "color": "=if(indexOf(toLowerCase([$Feedback]),'excellent')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'great')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'amazing')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'love')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'fantastic')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'wonderful')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'outstanding')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'perfect')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'impressed')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'exceptional')>-1,'#155724',if(indexOf(toLowerCase([$Feedback]),'poor')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'bad')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'terrible')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'worst')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'hate')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'awful')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'horrible')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'frustrated')>-1,'#721c24',if(indexOf(toLowerCase([$Feedback]),'disappointing')>-1,'#721c24','#856404')))))))))))))))))))",
                      "text-transform": "uppercase",
                      "letter-spacing": "0.5px"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "background": "rgba(255,255,255,0.6)",
          "padding": "14px",
          "border-radius": "8px",
          "margin-bottom": "14px",
          "border": "1px solid rgba(0,0,0,0.05)"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Feedback]",
            "style": {
              "color": "#2c2c2c",
              "font-size": "15px",
              "line-height": "1.7",
              "font-weight": "400"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "space-between",
          "align-items": "center",
          "padding-top": "12px",
          "border-top": "2px solid rgba(0,0,0,0.08)"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "gap": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "32px",
                  "height": "32px",
                  "border-radius": "50%",
                  "background-color": "red",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "color": "white",
                  "font-weight": "700",
                  "font-size": "13px"
                },
                "txtContent": "=substring([$Author0.title], 0, 1)"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Author0.title]",
                    "style": {
                      "font-size": "13px",
                      "font-weight": "600",
                      "color": "#333"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "='Submitted on ' + toLocaleDateString([$Created])",
                    "style": {
                      "font-size": "11px",
                      "color": "#888"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionfeedback-sentiment-board.json

From the contributor

How to use this sample

This sample uses SharePoint List Formatting to visualize feedback sentiment (Positive, Neutral, Negative) with keyword-based detection in a color-coded and emoji-enhanced card view.
Each feedback item is automatically analyzed for sentiment keywords and displayed as a beautiful card showing the sentiment icon, feedback text, author details, and submission date.

screenshot of the sample

Summary

  • Automatic sentiment detection based on keywords in feedback text
  • Color-coded cards with gradient backgrounds (Green for positive, Red for negative, Yellow for neutral)
  • Emoji indicators (😊 😞 😐) displayed in circular badges
  • Status showing POSITIVE/NEGATIVE/NEUTRAL
  • Author avatars with initials in gradient circles
  • Modern card layout with shadows and rounded corners
  • Perfect for HR feedback forms, customer surveys, and employee pulse checks

View Requirements

Create a list with the following columns:

Internal Name Type Description
Title Single line of text Feedback title or category
Feedback Multiple lines of text The actual feedback content
Author Person or Group Person who submitted the feedback
Created Date and Time Submission date (auto-generated)

Note: If your Author column has a different internal name, update [$Author0] in the JSON to match your column name (e.g., [$Author]).

Sentiment Keywords

Positive Keywords (😊 Green):

excellent, great, amazing, love, fantastic, wonderful, outstanding, perfect, impressed, exceptional

Negative Keywords (😞 Red):

poor, bad, terrible, worst, hate, awful, horrible, frustrated, disappointing

Neutral (😐 Yellow):

Any feedback without the above keywords

Sample Data

Title Feedback Author Created
Employee Onboarding The onboarding process was excellent! Everything was well organized and the team was welcoming. Sai Bandaru 2025-10-24T06:17:08Z
Need faster approvals The document approval process is slow sometimes. Budvik B 2025-10-25T08:30:00Z
Poor cafeteria service Food quality has bad in recent days. Sai Bandaru 2025-10-25T14:45:00Z

Sample

Solution Author(s)
feedback-sentiment-board.json Sai Bandaru

Version history

Version Date Comments
1.0 October 25, 2025 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

  • Keyword detection is case-insensitive - works with any capitalization
  • You can easily add more keywords by extending the indexOf() conditions in the JSON
  • The sentiment is determined by the first matching keyword found in the feedback text