Test

Updated on Nov 27 2022

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "hideSelection": true,
    "hideListHeader": true,
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "float": "left",
            "padding-bottom": "10px",
            "background-color": "aliceblue",
            "min-width": "320px",
            "width": "100%",
            "margin-right": "10px",
            "margin-bottom": "10px",
            "min-height": "75px"
        },
        "attributes": {
            "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
        },
        "children": [
            {
                "elmType": "div",
                "children": [
                    {
                        "elmType": "img",
                        "style": {
                            "display": "block",
                            "width": "45px",
                            "height": "auto",
                            "border-radius": "50%",
                            "padding-left": "5px"
                        },
                        "attributes": {
                            "src": "='/_layouts/15/userphoto.aspx?size=S&username=' + [$Person.email]"
                        }
                    }
                ]
            },
            {
                "elmType": "div",
                "style": {
                    "text-align": "left",
                    "padding": "5px",
                    "width": "75%",
                    "padding-left": "10px"
                },
                "children": [
                    {
                        "elmType": "div",
                        "style": {
                            "font-weight": "500",
                            "font-size": "1.5rem"
                        },
                        "txtContent": "[$Person.title]"
                    },
                    {
                        "elmType": "div",
                        "style": {
                            "font-weight": "500",
                            "font-size": "1.1em",
                            "overflow": "hidden",
                            "max-width": "280px",
                            "white-space": "nowrap"
                        },
                        "txtContent": "[$JobTitle]"
                    },
                    {
                        "elmType": "div",
                        "txtContent": "[$PhoneNumber]"
                    }
                ],
                "defaultHoverField": "[$Person]"
            }            
        ]
    }
}

FAQ

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "hideListHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "attributes": {
        "class": "sp-row-card"
      },
      "style": {
        "color": "black",
        "background-color": "#FAF9F9",
        "flex-grow": "1",
        "display": "flex",
        "flex-direction": "row",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "flex-wrap": "nowrap",
        "overflow": "auto",
        "margin": "1px 4px 4px 1px"
      },
      "children": [
        {
          "elmType": "img",
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "bold",
                "font-size": "15px"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center"
              }
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt"
    },
    "style": {
      "justify-content": "start",
      "color": "ms-fontColor-Primary",
      "display": "flex",
      "padding": "1px 8px 5px 20px",
      "border-radius": "6px",
      "max-width": "905px",
      "margin": "1px 4px 4px 60px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "font-weight": "500",
          "font-size": "13px"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "margin-top": "8px",
              "padding-left": "1px",
              "color": "crimson"
            },
            "attributes": {
              "class": "ms-fontSize-m",
              "iconName": "Lightbulb"
            }
          },
          {
            "elmType": "span",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "Answer",
            "style": {
              "font-weight": "500",
              "color": "darkgreen",
              "padding-left": "4px"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Answer]",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "center",
              "max-width": "900px",
              "min-width": "205px",
              "margin-top": "8px",
              "margin-bottom": "8px"
            }
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Show more",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": "=if([$ShowMore] == 'Yes', 'block', 'none')",
              "margin-bottom": "8px",
              "color": "white",
              "background-color": "#0077DB"
            }
          }
        ]
      }
    ]
  }
}

Quick Links in Tiles View

Below are the fields required

  • Title
  • Icon – Single line of Text
  • URL – hyperlink
  • IsActive – Yes/No
  • IconImage – Image field

Create a new view and use the below code to format the view.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
    "hideColumnHeader": "true",
    "hideSelection": true,    
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "text-decoration": "none",
            "float": "left",
            "min-width": "90px",
            "max-width": "90px",
            "padding-right": "10px"
        },
        "children": [
            {
                "elmType": "a",
                "attributes": {
                    "href": "[$URL]",
                    "target": "=if([$NewTab] == true, '_blank', '')"
                },
                "style": {
                    "width": "100%",
                    "text-decoration": "none"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
                        },
                        "style": {
                            "display": "flex",
                            "flex-wrap": "wrap",
                            "width": "100%",
                            "min-height": "85px",
                            "margin-right": "10px",
                            "margin-top": "10px",
                            "box-shadow": "2px 2px 4px darkgrey"
                        },
                        "children": [
                            {
                                "elmType": "div",
                                "style": {
                                    "text-align": "center",
                                    "margin": "auto"
                                },
                                "children": [
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "class": "sp-row-title"
                                        },
                                        "style": {
                                            "padding":"5px",
                                            "font-size": "12px",
                                            "font-weight": "700"
                                        },
                                        "txtContent": "[$Title]"
                                    },
                                    {
                                        "elmType": "img",
                                        "attributes": {
                                            "src": "[$IconImage.serverRelativeUrl]"
                                        },
                                        "style": {
                                            "width": "25px"
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

Quick Links – Icon and Text

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
    "hideColumnHeader": "true",
    "hideSelection": true,    
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "text-decoration": "none",
            "float": "left",
            "min-width": "90px",
            "max-width": "90px",
            "padding-right": "10px"
        },
        "children": [
            {
                "elmType": "a",
                "attributes": {
                    "href": "[$URL]",
                    "target": "=if([$NewTab] == true, '_blank', '')"
                },
                "style": {
                    "width": "100%",
                    "text-decoration": "none"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
                        },
                        "style": {
                            "display": "flex",
                            "flex-wrap": "wrap",
                            "width": "100%",
                            "min-height": "85px",
                            "margin-right": "10px",
                            "margin-top": "10px",
                            "box-shadow": "2px 2px 4px darkgrey"
                        },
                        "children": [
                            {
                                "elmType": "div",
                                "style": {
                                    "text-align": "center",
                                    "margin": "0 auto"
                                },
                                "children": [
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "iconName": "[$Icon]",
                                            "class": "ms-fontSize-su"
                                        },
                                        "style": {
                                            "font-size": "25px",
                                            "margin-top": "10px"
                                        }
                                    },
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "class": "sp-row-title"
                                        },
                                        "style": {
                                            "padding":"5px",
                                            "font-size": "12px",
                                            "font-weight": "700"
                                        },
                                        "txtContent": "[$Title]"
                                    }                                    
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

Quick Link – Icon and Text side by side

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
    "hideColumnHeader": "true",
    "hideSelection": true,    
    "rowFormatter": {
        "elmType": "div",
        "style": {
            "text-decoration": "none",
            "max-width": "200px",
            "padding-right": "10px"
        },
        "children": [
            {
                "elmType": "a",
                "attributes": {
                    "href": "[$URL]",
                    "target": "=if([$NewTab] == true, '_blank', '')"
                },
                "style": {
                    "width": "100%",
                    "text-decoration": "none"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
                        },
                        "style": {
                            "display": "flex",
                            "flex-wrap": "wrap",
                            "width": "100%",
                            "min-height": "40px",
                            "margin-top": "10px",
                            "border": "1px solid #CCC"
                        },
                        "children": [
                            {
                                "elmType": "div",
                                "style": {
                                    "display": "flex",
                                    "float": "left",
                                    "align-items": "flex-start"
                                },
                                "children": [
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "iconName": "[$Icon]",
                                            "class": "ms-fontSize-su"
                                        },
                                        "style": {
                                            "font-size": "25px",
                                            "display": "flex",
                                            "margin": "auto",
                                            "margin-left": "10px",
                                            "margin-right": "5px"
                                        }
                                    },
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "class": "sp-row-title"
                                        },
                                        "style": {
                                            "padding":"5px",
                                            "font-size": "12px",
                                            "font-weight": "700",
                                            "margin": "auto"
                                        },
                                        "txtContent": "[$Title]"
                                    }                                    
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}