SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Elf Progress Board

Demonstrates multi-level progress bars, randomization, handling image fields, setValue actions, and inlineEditField

Get this format View on GitHub

Shared by Chris Kent
Updated Dec 9, 2021

Progress Board
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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 476,
  "width": 310,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white ms-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "title": "[$Title]",
                      "class": "ms-fontColor-neutralPrimary",
                      "role": "heading",
                      "aria-level": "3"
                    },
                    "style": {
                      "font-weight": "600",
                      "font-size": "18px",
                      "white-space": "nowrap",
                      "text-overflow": "ellipsis",
                      "flex": "1"
                    },
                    "txtContent": "=if ([$Title] == '', '–', [$Title])",
                    "customRowAction": {
                      "action": "defaultClick"
                    }
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "iconName": "ColorSolid",
                      "title": "='Color: ' + [$ToyColor]"
                    },
                    "style": {
                      "color": "[$ToyColor]",
                      "font-size": "18px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "style": {
              "position": "relative"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$ToyImage] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "=[$ToyImage.serverUrl] + [$ToyImage.serverRelativeUrl]",
                          "title": "[$ToyImage.fileName]",
                          "class": "sp-card-imagePreview"
                        }
                      },
                      {
                        "elmType": "svg",
                        "style": {
                          "display": "=if([$ToyImage] == '', '', 'none')"
                        },
                        "attributes": {
                          "preserveAspectRatio": "none",
                          "viewBox": "0 0 210 105",
                          "class": "sp-card-defaultImage ms-bgColor-themeLighter"
                        },
                        "children": [
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImage-path1",
                              "d": "M0 25.7896L126.5 53.8817L96 105H0V25.7896Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImage-path2",
                              "d": "M96 105L158.7 0H204C207.314 0 210 2.68629 210 6V105H96Z"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "svg",
                        "style": {
                          "display": "=if([$ToyImage] == '', '', 'none')"
                        },
                        "attributes": {
                          "class": "sp-card-defaultImageOverlay",
                          "viewBox": "0 0 40 40"
                        },
                        "children": [
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path1",
                              "d": "M 4 4 H 37 V 37 H 4 L 4 4"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path2",
                              "d": "M24.17 21.151L21.66 24.741L17.54 19.191C17.3322 18.914 17.0062 18.751 16.66 18.751C16.3137 18.751 15.9877 18.914 15.78 19.191L9.20997 28.051C8.97126 28.3786 8.93818 28.813 9.12453 29.173C9.31088 29.533 9.68465 29.7567 10.09 29.751H29.91C30.3085 29.7562 30.6769 29.5396 30.866 29.1887C31.0551 28.8378 31.0335 28.411 30.81 28.081L26 21.151C25.7991 20.8407 25.4546 20.6533 25.085 20.6533C24.7153 20.6533 24.3709 20.8407 24.17 21.151Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path3",
                              "d": "M28 15.751C29.3807 15.751 30.5 14.6317 30.5 13.251C30.5 11.8703 29.3807 10.751 28 10.751C26.6193 10.751 25.5 11.8703 25.5 13.251C25.5 14.6317 26.6193 15.751 28 15.751Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path4",
                              "d": "M4.5 37.251H35.5C36.3284 37.251 37 36.5794 37 35.751V4.75098C37 3.92255 36.3284 3.25098 35.5 3.25098H4.5C3.67157 3.25098 3 3.92255 3 4.75098V35.751C3 36.5794 3.67157 37.251 4.5 37.251ZM4 4.75098C4 4.47483 4.22386 4.25098 4.5 4.25098H35.5C35.7761 4.25098 36 4.47483 36 4.75098V35.751C36 36.0271 35.7761 36.251 35.5 36.251H4.5C4.22386 36.251 4 36.0271 4 35.751V4.75098Z"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "position": "absolute",
                  "left": "-8px",
                  "bottom": "-6px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "forEach": "personIterator in [$ElfInCharge]",
                        "elmType": "a",
                        "attributes": {
                          "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                        },
                        "style": {
                          "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                        },
                        "children": [
                          {
                            "elmType": "img",
                            "defaultHoverField": "[$personIterator]",
                            "attributes": {
                              "src": "=getUserImage([$personIterator.email], 'S')",
                              "title": "[$personIterator.title]",
                              "class": "sp-card-userThumbnail"
                            },
                            "style": {
                              "display": "=if(length([$ElfInCharge]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                            }
                          },
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                            },
                            "style": {
                              "display": "=if(length([$ElfInCharge]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                            },
                            "customCardProps": {
                              "formatter": {
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-personCallout"
                                },
                                "children": [
                                  {
                                    "forEach": "personIterator in [$ElfInCharge]",
                                    "elmType": "div",
                                    "attributes": {
                                      "class": "sp-card-userContainer sp-card-userCustomCard"
                                    },
                                    "style": {
                                      "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                    },
                                    "children": [
                                      {
                                        "elmType": "img",
                                        "defaultHoverField": "[$personIterator]",
                                        "attributes": {
                                          "src": "=getUserImage([$personIterator.email], 'S')",
                                          "title": "[$personIterator.title]",
                                          "class": "sp-card-userThumbnail"
                                        }
                                      }
                                    ]
                                  }
                                ]
                              },
                              "openOnEvent": "hover"
                            },
                            "children": [
                              {
                                "elmType": "span",
                                "txtContent": "='+' + toString(length([$ElfInCharge]) - (4))"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "margin-top": "5px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-borderColor-neutralLighter"
                        },
                        "style": {
                          "width": "0",
                          "height": "2px",
                          "border-top": "12px solid transparent",
                          "border-bottom": "10px solid transparent",
                          "border-right-width": "10px",
                          "border-right-style": "solid"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLighter ms-fontColor-neutralPrimary"
                        },
                        "style": {
                          "border-top-right-radius": "6px",
                          "border-bottom-right-radius": "6px",
                          "height": "20px",
                          "padding": "2px 8px 2px 4px"
                        },
                        "txtContent": "=if((Number(@now)+@rowIndex) % 10 == 1, 'Golly willikers, let\\'s build!',if((Number(@now)+@rowIndex) % 10 == 2,'All hail Santa!',if((Number(@now)+@rowIndex) % 10 == 3,'Gettin Jiggle with it!',if((Number(@now)+@rowIndex) % 10 == 4,'Jingle Jangle!',if((Number(@now)+@rowIndex) % 10 == 5,'Happy Holidays!',if((Number(@now)+@rowIndex) % 10 == 6,'Snap Crackle Pop!',if((Number(@now)+@rowIndex) % 10 == 7,'Living that #ToyBuildingLyfe',if((Number(@now)+@rowIndex) % 10 == 8,'Rosy up them cheeks!',if((Number(@now)+@rowIndex) % 9 == 4,'Hammer Time!', 'Build my pretties, build!')))))))))"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "text-align": "center",
              "font-size": "16px"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "title": "[$Description]",
                  "class": "ms-fontColor-neutralPrimary"
                },
                "txtContent": "=if ([$Description] == '', '–', '\"' + [$Description] + '\"')"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "='Progress ' + ceiling((([$Built]+[$Wrapped])/([$Quantity]*2))*1000)/10 + '%'",
                    "style": {
                      "font-size": "15px",
                      "font-weight": "600",
                      "padding": "3px 0"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-direction": "column",
                          "flex": "1",
                          "min-width": "236px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-borderColor-neutralPrimary ms-bgColor-neutralLighter"
                            },
                            "style": {
                              "width": "100%",
                              "height": "32px",
                              "overflow": "hidden",
                              "border-radius": "16px",
                              "border-width": "3px",
                              "border-style": "solid",
                              "position": "relative"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "width": "=ceiling(([$Built]/[$Quantity])*100) + '%'",
                                  "overflow": "hidden",
                                  "border-right": "2px solid #0d6610"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "attributes": {
                                      "src": "https://northpoleindustries.sharepoint.com/Shared%20Documents/BuildProgress.png"
                                    },
                                    "style": {
                                      "width": "300px"
                                    }
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "width": "=ceiling(([$Wrapped]/[$Quantity])*100) + '%'",
                                  "overflow": "hidden",
                                  "position": "absolute",
                                  "top": "0",
                                  "left": "0",
                                  "border-right": "2px solid #ae1a18"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "attributes": {
                                      "src": "https://northpoleindustries.sharepoint.com/Shared%20Documents/WrappingProgress.png"
                                    },
                                    "style": {
                                      "width": "300px"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "width": "=ceiling(([$Built]/[$Quantity])*100) + '%'",
                              "height": "25px",
                              "position": "relative",
                              "border-left": "3px solid transparent",
                              "border-right": "2px solid #0d6610",
                              "margin-top": "-22px"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "position": "absolute",
                                  "right": "-12px",
                                  "top": "25px"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "font-size": "13px",
                                      "width": "22px",
                                      "height": "22px",
                                      "color": "white",
                                      "border-radius": "50%",
                                      "display": "flex",
                                      "justify-content": "center",
                                      "background-color": "#0d6610"
                                    },
                                    "customCardProps": {
                                      "openOnEvent": "hover",
                                      "isBeakVisible": true,
                                      "directionalHint": "bottomCenter",
                                      "formatter": {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-neutralLightest ms-fontColor-neutralPrimary"
                                        },
                                        "style": {
                                          "display": "flex",
                                          "flex-direction": "column",
                                          "align-items": "center",
                                          "padding": "6px",
                                          "min-width": "60px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "txtContent": "[$Built.displayValue]",
                                            "style": {
                                              "font-size": "16px",
                                              "font-weight": "600"
                                            }
                                          },
                                          {
                                            "elmType": "div",
                                            "txtContent": "Built",
                                            "style": {
                                              "font-size": "12px"
                                            }
                                          }
                                        ]
                                      }
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "margin-left": "1px",
                                          "margin-top": "4px"
                                        },
                                        "attributes": {
                                          "iconName": "Repair"
                                        }
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "width": "=ceiling(([$Wrapped]/[$Quantity])*100) + '%'",
                              "height": "50px",
                              "position": "relative",
                              "border-left": "3px solid transparent",
                              "border-right": "2px solid #ae1a18",
                              "margin-top": "-25px"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "position": "absolute",
                                  "right": "-12px",
                                  "top": "50px"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "font-size": "17px",
                                      "width": "22px",
                                      "height": "22px",
                                      "color": "white",
                                      "border-radius": "50%",
                                      "display": "flex",
                                      "justify-content": "center",
                                      "background-color": "#ae1a18"
                                    },
                                    "customCardProps": {
                                      "openOnEvent": "hover",
                                      "isBeakVisible": true,
                                      "directionalHint": "bottomCenter",
                                      "formatter": {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-neutralLightest ms-fontColor-neutralPrimary"
                                        },
                                        "style": {
                                          "display": "flex",
                                          "flex-direction": "column",
                                          "align-items": "center",
                                          "padding": "6px",
                                          "min-width": "60px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "txtContent": "[$Wrapped.displayValue]",
                                            "style": {
                                              "font-size": "16px",
                                              "font-weight": "600"
                                            }
                                          },
                                          {
                                            "elmType": "div",
                                            "txtContent": "Wrapped",
                                            "style": {
                                              "font-size": "12px"
                                            }
                                          }
                                        ]
                                      }
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "margin-left": "1px"
                                        },
                                        "attributes": {
                                          "iconName": "Giftbox"
                                        }
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-direction": "column",
                          "align-items": "center",
                          "min-width": "42px",
                          "padding-left": "8px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "txtContent": "[$Quantity.displayValue]",
                            "inlineEditField": "[$Quantity]",
                            "style": {
                              "font-size": "16px",
                              "font-weight": "600"
                            }
                          },
                          {
                            "elmType": "div",
                            "txtContent": "Total",
                            "style": {
                              "font-size": "12px"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "padding-top": "24px",
              "display": "flex",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-bgColor-neutralLighter ms-borderColor-neutralLight ms-fontColor-neutralLight"
                },
                "style": {
                  "border-radius": "6px",
                  "box-shadow": "0 -30px 50px inset, 0 0 15px #222 inset",
                  "border-width": "3px",
                  "border-style": "solid",
                  "padding": "6px",
                  "width": "80%"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "justify-content": "space-around"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-direction": "column",
                          "flex": "1",
                          "align-items": "center"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-fontColor-neutralPrimary"
                            },
                            "style": {
                              "display": "flex"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "txtContent": "Built",
                                "style": {
                                  "padding-bottom": "2px",
                                  "padding-right": "4px"
                                }
                              },
                              {
                                "elmType": "div",
                                "txtContent": "[$Built.displayValue]",
                                "inlineEditField": "[$Built]"
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-fontColor-themePrimary"
                            },
                            "style": {
                              "display": "flex",
                              "justify-content": "space-around",
                              "width": "80px",
                              "font-size": "20px"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "Blocked12",
                                  "title": "Decrease Built Count",
                                  "class": "ms-fontColor-red--hover"
                                },
                                "style": {
                                  "display": "=if([$Built] > [$Wrapped] && [$Built] > 0, '', 'none')",
                                  "font-weight": "600"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Built": "=[$Built]-1"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "Blocked12",
                                  "class": "ms-fontColor-neutralTertiary"
                                },
                                "style": {
                                  "display": "=if([$Built] > [$Wrapped] && [$Built] > 0, 'none', '')"
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "AddTo",
                                  "title": "Increase Build Count",
                                  "class": "ms-fontColor-greenDark--hover"
                                },
                                "style": {
                                  "display": "=if([$Built] < [$Quantity], '', 'none')",
                                  "font-weight": "600"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Built": "=[$Built]+1"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "AddTo",
                                  "class": "ms-fontColor-neutralTertiary"
                                },
                                "style": {
                                  "display": "=if([$Built] < [$Quantity], 'none', '')"
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-direction": "column",
                          "flex": "1",
                          "align-items": "center"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-fontColor-neutralPrimary"
                            },
                            "style": {
                              "display": "flex"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "txtContent": "Wrapped",
                                "style": {
                                  "padding-bottom": "2px",
                                  "padding-right": "4px"
                                }
                              },
                              {
                                "elmType": "div",
                                "txtContent": "[$Wrapped.displayValue]",
                                "inlineEditField": "[$Wrapped]"
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "attributes": {
                              "class": "ms-fontColor-themePrimary"
                            },
                            "style": {
                              "display": "flex",
                              "justify-content": "space-around",
                              "width": "80px",
                              "font-size": "20px"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "Blocked12",
                                  "title": "Decrease Wrapped Count",
                                  "class": "ms-fontColor-red--hover"
                                },
                                "style": {
                                  "display": "=if([$Wrapped] > 0, '', 'none')",
                                  "font-weight": "600"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Wrapped": "=[$Wrapped]-1"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "Blocked12",
                                  "class": "ms-fontColor-neutralTertiary"
                                },
                                "style": {
                                  "display": "=if([$Wrapped] > 0, 'none', '')"
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "AddTo",
                                  "title": "Increase Wrapped Count",
                                  "class": "ms-fontColor-greenDark--hover"
                                },
                                "style": {
                                  "display": "=if([$Wrapped] < [$Built] && [$Wrapped] < [$Quantity], '', 'none')",
                                  "font-weight": "600"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Wrapped": "=[$Wrapped]+1"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "iconName": "AddTo",
                                  "class": "ms-fontColor-neutralTertiary"
                                },
                                "style": {
                                  "display": "=if([$Wrapped] < [$Built] && [$Wrapped] < [$Quantity], 'none', '')"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionelf-progress-board.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /formatter/children/0/children/1/children/0/children/0/children/1/children/0/attributes must NOT have additional properties

From the contributor

How to use this sample

Summary

This sample demonstrates:

  • Handling Image fields, including providing default display for missing values
  • Randomization (random elf quote)
  • Multi-level progress bar using images
  • inlineEditField
  • setValue

screenshot of the sample

View requirements

Type Internal Name Required
Single line of text Title Yes
Person ElfInCharge Yes
Multi-line Text Description
Number Quantity
Number Built
Number Wrapped
Managed Metadata ToyColor
Image ToyImage

Sample

Solution Author(s)
elf-progress-board.json Chris Kent

Version history

Version Date Comments
1.0 December 9, 2021 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.

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