Skip to content

Instantly share code, notes, and snippets.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"min-width": "15vw",
"max-width": "19vw",
"padding-bottom": "20px",
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"width": "=@window.innerWidth*0.9+'px'",
"display": "flex",
"justify-content": "center",
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "=if(@currentField,'flex','none')",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "div",
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"width": "100%",
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"width": "100%",
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 223,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"inlineEditField": "@currentField",
"style": {
"background-color": "=if(@currentField=='Level 1','blue',if(@currentField=='Level 2','green',if(@currentField=='Level 3','gold',if(@currentField=='Level 4','red','gray'))))",
"color": "white",
"font-weight": "bold",
"font-size": "20px",
,
{
"elmType": "div",
"style": {
"position": "absolute",
"margin-top": "-35px",
"right": "0px",
"display": "=if([$InternalNameOfImageColumn],'block','none')"
},
"children": [