View formattingSharePoint Online

Testimonials

This is a template for testimonials (Business Statements), it has nice features such as directional messages, styles, utilizes the current theme colors, image persona hover card, overflow logic and even has some SVG Magic! 🙌

Get this format View on GitHub

Shared by Andres Ibarra
Updated Dec 29, 2020

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "=if(@rowIndex % 2 == 0,'row','row-reverse')",
      "align-content": "start",
      "flex-wrap": "wrap",
      "padding": "5px",
      "width": "100%"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "img",
        "style": {
          "border-radius": "50px",
          "width": "150px",
          "height": "150px",
          "border-width": "thick",
          "border-style": "solid"
        },
        "attributes": {
          "src": "=getUserImage([$BusinessLead.email],'large')",
          "class": "ms-borderColor-themePrimary"
        },
        "defaultHoverField": "[$BusinessLead]"
      },
      {
        "elmType": "span",
        "style": {
          "display": "flex",
          "align-content": "start",
          "align-self": "stretch",
          "border-width": "thick",
          "border-style": "solid",
          "border-radius": "10px",
          "font-family": "fangsong",
          "font-size": "large",
          "height": "100px",
          "margin-left": "=if(@rowIndex % 2 == 0,'-8px','none')",
          "margin-right": "=if(@rowIndex % 2 == 0,'none','-8px')",
          "margin-top": "25px",
          "max-width": "400px",
          "width": "auto",
          "padding": "3px",
          "border-left": "=if(@rowIndex % 2 == 0,'none','')",
          "border-right": "=if(@rowIndex % 2 == 0,'','none')"
        },
        "attributes": {
          "class": "ms-borderColor-themePrimary ms-fontColor-neutralPrimary"
        },
        "children": [
          {
            "elmType": "svg",
            "style": {
              "width": "50px",
              "height": "50px",
              "padding-left": "=if(@rowIndex % 2 == 0,'10px','2px')",
              "fill": "currentColor"
            },
            "children": [
              {
                "elmType": "path",
                "style": {
                  "width": "100%",
                  "height": "50px"
                },
                "attributes": {
                  "d": "M5.278 6.711c-.841 1.39-1.278 2.942-1.278 4.289v2h4v6h-6v-5.391c0-2.936 1.176-5.333 3.278-6.898zm13.993.011c-.836 1.386-1.271 2.934-1.271 4.278v2h4v6h-6v-5.391c0-2.93 1.184-5.322 3.271-6.887zm3.729-3.722c-5.252 1.039-8.983 4.905-8.983 10.609v7.391h9.983v-10h-4c0-2.211 1.562-4.932 3.995-5.849l-.995-2.151zm-14 0c-5.252 1.039-9 4.905-9 10.609v7.391h9.983v-10h-3.983c0-2.211 1.563-4.932 3.996-5.849l-.996-2.151z"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "font-style": "italic",
              "text-align": "center",
              "padding": "10px",
              "max-width": "340px",
              "width": "100%",
              "margin-right": "=if(@rowIndex %2 == 0, '0', '6px')",
              "overflow-y": "auto"
            },
            "txtContent": "[$Statement]"
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "=if(@rowIndex % 2 == 0,'row','row-reverse')",
      "align-content": "start",
      "flex-wrap": "wrap",
      "padding": "5px",
      "width": "100%"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "img",
        "style": {
          "border-radius": "50px",
          "width": "150px",
          "height": "150px",
          "border-width": "thick",
          "border-style": "solid"
        },
        "attributes": {
          "src": "=getUserImage([$BusinessLead.email],'large')",
          "class": "ms-borderColor-themePrimary"
        },
        "defaultHoverField": "[$BusinessLead]"
      },
      {
        "elmType": "span",
        "style": {
          "display": "flex",
          "align-content": "start",
          "align-self": "stretch",
          "border-width": "thick",
          "border-style": "solid",
          "border-radius": "10px",
          "font-family": "fangsong",
          "font-size": "large",
          "height": "100px",
          "margin-left": "=if(@rowIndex % 2 == 0,'-8px','none')",
          "margin-right": "=if(@rowIndex % 2 == 0,'none','-8px')",
          "margin-top": "25px",
          "max-width": "400px",
          "width": "auto",
          "padding": "3px",
          "border-left": "=if(@rowIndex % 2 == 0,'none','')",
          "border-right": "=if(@rowIndex % 2 == 0,'','none')"
        },
        "attributes": {
          "class": "ms-borderColor-themePrimary ms-fontColor-neutralPrimary"
        },
        "children": [
          {
            "elmType": "svg",
            "style": {
              "width": "50px",
              "height": "50px",
              "padding-left": "=if(@rowIndex % 2 == 0,'10px','2px')",
              "fill": "currentColor"
            },
            "children": [
              {
                "elmType": "path",
                "style": {
                  "width": "100%",
                  "height": "50px"
                },
                "attributes": {
                  "d": "M5.278 6.711c-.841 1.39-1.278 2.942-1.278 4.289v2h4v6h-6v-5.391c0-2.936 1.176-5.333 3.278-6.898zm13.993.011c-.836 1.386-1.271 2.934-1.271 4.278v2h4v6h-6v-5.391c0-2.93 1.184-5.322 3.271-6.887zm3.729-3.722c-5.252 1.039-8.983 4.905-8.983 10.609v7.391h9.983v-10h-4c0-2.211 1.562-4.932 3.995-5.849l-.995-2.151zm-14 0c-5.252 1.039-9 4.905-9 10.609v7.391h9.983v-10h-3.983c0-2.211 1.563-4.932 3.996-5.849l-.996-2.151z"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "font-style": "italic",
              "text-align": "center",
              "padding": "10px",
              "max-width": "340px",
              "width": "100%",
              "margin-right": "=if(@rowIndex %2 == 0, '0', '6px')",
              "overflow-y": "auto"
            },
            "txtContent": "[$Statement]"
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

screenshot of the sample

View requirements

This format expects the following columns to be part of the view:

Type	Internal Name	Required
Person	BusinessLead	Yes
Multi-line Text	Statement	Yes

Sample

Solution	Author(s)
testimonials.json	Andres Ibarra

Version history

Version	Date	Comments
1.0	December 29, 2020	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

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Key Dates Timeline Checklist

Image Grid

Travel Tweets Board