samples.json

[
  {
    "name": "pnp-list-formatting-timeline-board-format",
    "reponame": "timeline-board-format",
    "source": "pnp",
    "title": "Timeline in Board View",
    "shortDescription": "This sample demonstrates displaying timelines in Board View.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/timeline-board-format",
    "longDescription": [
      "This sample demonstrates displaying timelines in Board View."
    ],
    "creationDateTime": "2022-03-05T00:00:00.000Z",
    "updateDateTime": "2022-03-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline-board-format/assets/screenshot.png?raw=true",
        "alt": "Timeline in Board View"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-alternating-rowclass",
    "reponame": "alternating-rowclass",
    "source": "pnp",
    "title": "Alternating Rows",
    "shortDescription": "Highlights every other row using theme colors.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/alternating-rowclass",
    "longDescription": [
      "Highlights every other row using theme colors."
    ],
    "creationDateTime": "2019-02-19T00:00:00.000Z",
    "updateDateTime": "2019-02-19T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "Modulus %"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@rowIndex"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/alternating-rowclass/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/alternating-rowclass/assets/screenshotCombined.png?raw=true",
        "alt": "screenshotCombined"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/alternating-rowclass/assets/screenshotFiltered.png?raw=true",
        "alt": "screenshotFiltered"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/alternating-rowclass/assets/screenshotSorted.png?raw=true",
        "alt": "screenshotSorted"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-bar-graph-format",
    "reponame": "bar-graph-format",
    "source": "pnp",
    "title": "Bar Graph format",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/bar-graph-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-09-02T00:00:00.000Z",
    "updateDateTime": "2019-09-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/bar-graph-format/assets/bargraph.gif?raw=true",
        "alt": "bargraph"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/bar-graph-format/assets/bargraphnormal.png?raw=true",
        "alt": "bargraphnormal"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-birthday-format",
    "reponame": "birthday-format",
    "source": "pnp",
    "title": "Birthday Row Format",
    "shortDescription": "This is a sample derived from the [contact card row format](../contact-card-format). It shows how to format a list to show upcoming employee birthdays. It features the following:",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/birthday-format",
    "longDescription": [
      "This is a sample derived from the [contact card row format](../contact-card-format). It shows how to format a list to show upcoming employee birthdays. It features the following:"
    ],
    "creationDateTime": "2019-02-20T00:00:00.000Z",
    "updateDateTime": "2019-02-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "aprildunnam",
        "pictureUrl": "https://github.com/aprildunnam.png",
        "name": "April Dunham"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-budget-tracker",
    "reponame": "budget-tracker",
    "source": "pnp",
    "title": "Budget Tracker Sample",
    "shortDescription": "The budget tracker sample demonstrates how to use view formatting to format lists and display views of the lists inside connected web parts. This provides the ability to view the budget items associated with individual projects on a single page. ",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/budget-tracker",
    "longDescription": [
      "The budget tracker sample demonstrates how to use view formatting to format lists and display views of the lists inside connected web parts. This provides the ability to view the budget items associated with individual projects on a single page. "
    ],
    "creationDateTime": "2020-01-29T00:00:00.000Z",
    "updateDateTime": "2020-01-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/budget-tracker/assets/credential-popup.png?raw=true",
        "alt": "credential-popup"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/budget-tracker/assets/Finish.png?raw=true",
        "alt": "Finish"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/budget-tracker/assets/page-review.png?raw=true",
        "alt": "page-review"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/budget-tracker/assets/security-warning.png?raw=true",
        "alt": "security-warning"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "TBag",
        "pictureUrl": "https://github.com/TBag.png",
        "name": "Todd Baginski"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-bulletin-board-format",
    "reponame": "bulletin-board-format",
    "source": "pnp",
    "title": "Bulletin Board",
    "shortDescription": "Provides an example of creating a simple bulletin board listing. The \u0060rowFormatter\u0060 property is used to fully customize the display of rows to create a nice view of list items while easily allowing users to click on the item for additional details (see animation below). The large size and use of icons makes this much more attractive than a simple table view and keeps the functionality simple for users.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/bulletin-board-format",
    "longDescription": [
      "Provides an example of creating a simple bulletin board listing. The \u0060rowFormatter\u0060 property is used to fully customize the display of rows to create a nice view of list items while easily allowing users to click on the item for additional details (see animation below). The large size and use of icons makes this much more attractive than a simple table view and keeps the functionality simple for users."
    ],
    "creationDateTime": "2018-08-22T00:00:00.000Z",
    "updateDateTime": "2020-05-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "toLocaleDateString"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/bulletin-board-format/assets/BulletinBoardDetails.gif?raw=true",
        "alt": "BulletinBoardDetails"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/bulletin-board-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/bulletin-board-format/assets/screenshotWithButtons.png?raw=true",
        "alt": "screenshotWithButtons"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-butterfly-chart-format",
    "reponame": "butterfly-chart-format",
    "source": "pnp",
    "title": "Butterfly Chart Format",
    "shortDescription": "This sample formats a SharePoint list view into a butterfly chart.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/butterfly-chart-format",
    "longDescription": [
      "This sample formats a SharePoint list view into a butterfly chart."
    ],
    "creationDateTime": "2021-02-05T00:00:00.000Z",
    "updateDateTime": "2021-02-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-choice-conditional-format",
    "reponame": "choice-conditional-format",
    "source": "pnp",
    "title": "Conditional formatting based on a Choice field",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/choice-conditional-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-01-18T00:00:00.000Z",
    "updateDateTime": "2019-01-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/choice-conditional-format/assets/sample01.png?raw=true",
        "alt": "sample01"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "skaggej",
        "pictureUrl": "https://github.com/skaggej.png",
        "name": "Eric Skaggs"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-chronological-format",
    "reponame": "chronological-format",
    "source": "pnp",
    "title": "Chronological Format",
    "shortDescription": "This sample formats your view to look like a chronological timeline.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/chronological-format",
    "longDescription": [
      "This sample formats your view to look like a chronological timeline."
    ],
    "creationDateTime": "2021-02-23T00:00:00.000Z",
    "updateDateTime": "2021-02-23T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/chronological-format/assets/chronological-format.png?raw=true",
        "alt": "chronological-format"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fcatinot",
        "pictureUrl": "https://github.com/fcatinot.png",
        "name": "Franck Catinot"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-column-graph-format",
    "reponame": "column-graph-format",
    "source": "pnp",
    "title": "Column Graph format",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/column-graph-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-08-15T00:00:00.000Z",
    "updateDateTime": "2019-08-15T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@rowIndex"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/column-graph-format/assets/columngraph.png?raw=true",
        "alt": "columngraph"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/column-graph-format/assets/columngraph_with_title.png?raw=true",
        "alt": "columngraph_with_title"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-contact-card-format",
    "reponame": "contact-card-format",
    "source": "pnp",
    "title": "Contact Card Row Format",
    "shortDescription": "This is a sample of a complex format that customizes the entire display of a row. The goal is to illustrate several key principals including:",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/contact-card-format",
    "longDescription": [
      "This is a sample of a complex format that customizes the entire display of a row. The goal is to illustrate several key principals including:"
    ],
    "creationDateTime": "2018-08-22T00:00:00.000Z",
    "updateDateTime": "2018-08-22T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/contact-card-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/contact-card-format/assets/screenshotResponsive.png?raw=true",
        "alt": "screenshotResponsive"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-contenttype-format",
    "reponame": "contenttype-format",
    "source": "pnp",
    "title": "ContentType Format",
    "shortDescription": "Provides an example of customizing your format based on the item\u0027s content type. When an item\u0027s ContentType is Apple and the apple type is \u0022Green\u0022 then green is used in the format. It it\u0027s Apple with a different type, red is used. Otherwise, orange is used.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/contenttype-format",
    "longDescription": [
      "Provides an example of customizing your format based on the item\u0027s content type. When an item\u0027s ContentType is Apple and the apple type is \u0022Green\u0022 then green is used in the format. It it\u0027s Apple with a different type, red is used. Otherwise, orange is used."
    ],
    "creationDateTime": "2018-12-19T00:00:00.000Z",
    "updateDateTime": "2019-01-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "ContentType"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Tiles"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/contenttype-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-current-year-rowclass",
    "reponame": "current-year-rowclass",
    "source": "pnp",
    "title": "Current Year Row Class",
    "shortDescription": "Demonstrates applying a class to rows where a value equals the current year. Can easily be updated to compare other portions of the date such as the month, hour, minute etc. by using the other date-part operators.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/current-year-rowclass",
    "longDescription": [
      "Demonstrates applying a class to rows where a value equals the current year. Can easily be updated to compare other portions of the date such as the month, hour, minute etc. by using the other date-part operators."
    ],
    "creationDateTime": "2019-10-02T00:00:00.000Z",
    "updateDateTime": "2019-10-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-custom-header-format",
    "reponame": "custom-header-format",
    "source": "pnp",
    "title": "Custom Header",
    "shortDescription": "Sometimes it is necessary to remove the standard headers. In those cases, you may still want to show a custom header. This sample demonstrates creating a custom header and only showing it on the first row. The key to this technique is setting the \u0060display\u0060 style attribute to \u0060none\u0060 (hidden) whenever the \u0060@rowIndex\u0060 is not 0 (first row).",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-header-format",
    "longDescription": [
      "Sometimes it is necessary to remove the standard headers. In those cases, you may still want to show a custom header. This sample demonstrates creating a custom header and only showing it on the first row. The key to this technique is setting the \u0060display\u0060 style attribute to \u0060none\u0060 (hidden) whenever the \u0060@rowIndex\u0060 is not 0 (first row)."
    ],
    "creationDateTime": "2020-02-20T00:00:00.000Z",
    "updateDateTime": "2020-02-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-custom-hover-cards",
    "reponame": "custom-hover-cards",
    "source": "pnp",
    "title": "Custom hover card on List view",
    "shortDescription": "The following image shows a list with a custom hover added to a List view:",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-hover-cards",
    "longDescription": [
      "The following image shows a list with a custom hover added to a List view:"
    ],
    "creationDateTime": "2020-04-08T00:00:00.000Z",
    "updateDateTime": "2020-04-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-hover-cards/assets/Status_hover.png?raw=true",
        "alt": "Status_hover"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NiketJain",
        "pictureUrl": "https://github.com/NiketJain.png",
        "name": "Niket Jain"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-conditional-format",
    "reponame": "date-conditional-format",
    "source": "pnp",
    "title": "Conditional formatting based on date",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/date-conditional-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-08-10T00:00:00.000Z",
    "updateDateTime": "2018-08-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@now"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Severity"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/date-conditional-format/assets/listformatting-additionalrowclass.png?raw=true",
        "alt": "listformatting-additionalrowclass"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ldemaris",
        "pictureUrl": "https://github.com/ldemaris.png",
        "name": "Lincoln DeMaris"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-default-hover-cards",
    "reponame": "default-hover-cards",
    "source": "pnp",
    "title": "Default hover card on doclib",
    "shortDescription": "The following image shows a list with a defalut hover added to a formatted view in a doclib",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/default-hover-cards",
    "longDescription": [
      "The following image shows a list with a defalut hover added to a formatted view in a doclib"
    ],
    "creationDateTime": "2020-04-08T00:00:00.000Z",
    "updateDateTime": "2020-04-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/default-hover-cards/assets/File_hover.png?raw=true",
        "alt": "File_hover"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NiketJain",
        "pictureUrl": "https://github.com/NiketJain.png",
        "name": "Niket Jain"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-disable-selection",
    "reponame": "disable-selection",
    "source": "pnp",
    "title": "Disable Selection",
    "shortDescription": "This is a very basic sample that disables list item selection within your view.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/disable-selection",
    "longDescription": [
      "This is a very basic sample that disables list item selection within your view."
    ],
    "creationDateTime": "2021-06-04T00:00:00.000Z",
    "updateDateTime": "2021-06-04T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-document-library",
    "reponame": "document-library",
    "source": "pnp",
    "title": "Document Library Sample",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/document-library",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-10-09T00:00:00.000Z",
    "updateDateTime": "2018-10-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "toLocaleString"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-document-library-thumbnails",
    "reponame": "document-library-thumbnails",
    "source": "pnp",
    "title": "Document Library Items in Tiles Format",
    "shortDescription": "This sample uses rowFormatter element to overrides the default formatting on the All Documents view.  The view uses thumbnail property to display the items in tiles view with custom size.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/document-library-thumbnails",
    "longDescription": [
      "This sample uses rowFormatter element to overrides the default formatting on the All Documents view.  The view uses thumbnail property to display the items in tiles view with custom size."
    ],
    "creationDateTime": "2019-02-02T00:00:00.000Z",
    "updateDateTime": "2019-02-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "ContentType"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Document Library"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/document-library-thumbnails/assets/document-library-thumbnails.png?raw=true",
        "alt": "document-library-thumbnails"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Ravikadri",
        "pictureUrl": "https://github.com/Ravikadri.png",
        "name": "Ravi Chandra"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-emoji-link-tile-format",
    "reponame": "emoji-link-tile-format",
    "source": "pnp",
    "title": "Link collection using Emoji",
    "shortDescription": "This sample demonstrates a link collection using Emoji and is a customization of the \u0060Gallery\u0060 layout. Additionally, this sample combines group customization with a tile format.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/emoji-link-tile-format",
    "longDescription": [
      "This sample demonstrates a link collection using Emoji and is a customization of the \u0060Gallery\u0060 layout. Additionally, this sample combines group customization with a tile format."
    ],
    "creationDateTime": "2021-04-05T00:00:00.000Z",
    "updateDateTime": "2021-04-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-employee-onboarding-steps",
    "reponame": "employee-onboarding-steps",
    "source": "pnp",
    "title": "Employee Onboarding: Steps",
    "shortDescription": "This sample is intended to be used in combination with the Employee Onboarding list template. The format restores the intended alternating rows but also adds a Tiles view that provides a more step based approach.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/employee-onboarding-steps",
    "longDescription": [
      "This sample is intended to be used in combination with the Employee Onboarding list template. The format restores the intended alternating rows but also adds a Tiles view that provides a more step based approach."
    ],
    "creationDateTime": "2020-10-15T00:00:00.000Z",
    "updateDateTime": "2020-10-15T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-events-format",
    "reponame": "events-format",
    "source": "pnp",
    "title": "Events Format",
    "shortDescription": "This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart. The format is implemented using the Tiles view and there is a format included that only includes this portion to make customization easier ([events-format-tiles-only](./events-format-tiles-only.json)). The primary sample demonstrates using a single format to provide both a list and tile view as well as demonstrating implementing a custom hover card with default person hover cards as well.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/events-format",
    "longDescription": [
      "This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart. The format is implemented using the Tiles view and there is a format included that only includes this portion to make customization easier ([events-format-tiles-only](./events-format-tiles-only.json)). The primary sample demonstrates using a single format to provide both a list and tile view as well as demonstrating implementing a custom hover card with default person hover cards as well."
    ],
    "creationDateTime": "2020-06-25T00:00:00.000Z",
    "updateDateTime": "2020-06-25T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-faq-format",
    "reponame": "faq-format",
    "source": "pnp",
    "title": "Faq-Format",
    "shortDescription": "This is sample creates an FAQ formatted list. Optionally, you can include the Keyword and KeywordLink columns for the [faq-keyword-links-format.json](./faq-keyword-links-format.json) sample.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-format",
    "longDescription": [
      "This is sample creates an FAQ formatted list. Optionally, you can include the Keyword and KeywordLink columns for the [faq-keyword-links-format.json](./faq-keyword-links-format.json) sample."
    ],
    "creationDateTime": "2020-03-01T00:00:00.000Z",
    "updateDateTime": "2020-03-01T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-numeric-average-comparison",
    "reponame": "generic-numeric-average-comparison",
    "source": "pnp",
    "title": "Numeric Average Comparison",
    "shortDescription": "Provides an example of comparing numeric values across time periods. In this example, we are using grades for students across 4 quarters, though the principle can be applied to any repetitive numeric values.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/generic-numeric-average-comparison",
    "longDescription": [
      "Provides an example of comparing numeric values across time periods. In this example, we are using grades for students across 4 quarters, though the principle can be applied to any repetitive numeric values."
    ],
    "creationDateTime": "2018-11-07T00:00:00.000Z",
    "updateDateTime": "2018-11-07T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "toString"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-numeric-average-comparison/assets/generic-numeric-average-comparison-list-sample.jpg?raw=true",
        "alt": "generic-numeric-average-comparison-list-sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-numeric-average-comparison/assets/generic-numeric-average-comparison-sample.jpg?raw=true",
        "alt": "generic-numeric-average-comparison-sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "pictureUrl": "https://github.com/PopWarner.png",
        "name": "David Warner II"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-risk-score-format",
    "reponame": "generic-risk-score-format",
    "source": "pnp",
    "title": "Project Indicator - Risk Score Indicator",
    "shortDescription": "A number column is evaluated against tiers of values to provide colors corresponding to score ranges. ",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/generic-risk-score-format",
    "longDescription": [
      "A number column is evaluated against tiers of values to provide colors corresponding to score ranges. "
    ],
    "creationDateTime": "2018-09-09T00:00:00.000Z",
    "updateDateTime": "2018-09-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-risk-score-format/assets/risk-score.png?raw=true",
        "alt": "risk-score"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sohailmerchant",
        "pictureUrl": "https://github.com/sohailmerchant.png",
        "name": "S Merchant"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-ryg-status-format",
    "reponame": "generic-ryg-status-format",
    "source": "pnp",
    "title": "Project Indicator - RYG Status Format",
    "shortDescription": "Text or choice column where the value is used to determine the color. This allows for an easy visualization of status. To use a lookup column instead, replace all occurences of [$internalfieldname] with  [$internalfieldname.lookupValue].",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/generic-ryg-status-format",
    "longDescription": [
      "Text or choice column where the value is used to determine the color. This allows for an easy visualization of status. To use a lookup column instead, replace all occurences of [$internalfieldname] with  [$internalfieldname.lookupValue]."
    ],
    "creationDateTime": "2018-09-09T00:00:00.000Z",
    "updateDateTime": "2018-09-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-ryg-status-format/assets/ryg-status.png?raw=true",
        "alt": "ryg-status"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sohailmerchant",
        "pictureUrl": "https://github.com/sohailmerchant.png",
        "name": "S Merchant"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-tile-format",
    "reponame": "generic-tile-format",
    "source": "pnp",
    "title": "Items in Tile Layout",
    "shortDescription": "This sample uses tileProps element to create tile layout on the view.  This layout allow users to see the list as the promoted links app (including the power the security trimming on the items).  This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/generic-tile-format",
    "longDescription": [
      "This sample uses tileProps element to create tile layout on the view.  This layout allow users to see the list as the promoted links app (including the power the security trimming on the items).  This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field."
    ],
    "creationDateTime": "2019-09-05T00:00:00.000Z",
    "updateDateTime": "2019-09-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-tile-format/assets/responsive-tile-view.png?raw=true",
        "alt": "responsive-tile-view"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/generic-tile-format/assets/tile-view.png?raw=true",
        "alt": "tile-view"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sohailmerchant",
        "pictureUrl": "https://github.com/sohailmerchant.png",
        "name": "S Merchant"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-video-button",
    "reponame": "generic-video-button",
    "source": "pnp",
    "title": "generic-video-button",
    "shortDescription": "generic-video-button",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/generic-video-button",
    "longDescription": [
      "generic-video-button"
    ],
    "creationDateTime": "2020-03-31T00:00:00.000Z",
    "updateDateTime": "2020-03-31T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-get-video-file-embed-code",
    "reponame": "get-video-file-embed-code",
    "source": "pnp",
    "title": "View to get the embed code for a video file",
    "shortDescription": "If you upload video files to a SharePoint document library, there currently isn\u0027t a way for an end user to easily get the iFrame embed code for the video file other than using the [Microsoft Graph Preview item API](https://docs.microsoft.com/en-us/graph/api/driveitem-preview). This document library view formatting example composes the iFrame embed code automatically for any video files in the library so users could easily copy and paste it.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/get-video-file-embed-code",
    "longDescription": [
      "If you upload video files to a SharePoint document library, there currently isn\u0027t a way for an end user to easily get the iFrame embed code for the video file other than using the [Microsoft Graph Preview item API](https://docs.microsoft.com/en-us/graph/api/driveitem-preview). This document library view formatting example composes the iFrame embed code automatically for any video files in the library so users could easily copy and paste it."
    ],
    "creationDateTime": "2021-03-22T00:00:00.000Z",
    "updateDateTime": "2021-03-22T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "MarcMroz",
        "pictureUrl": "https://github.com/MarcMroz.png",
        "name": "Marc Mroz"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-group-header-user-picture",
    "reponame": "group-header-user-picture",
    "source": "pnp",
    "title": "Display user\u0027s picture in group header",
    "shortDescription": "This is a sample of customizing the group header when grouping by user column. Display the user\u0027s picture as well as the user\u0027s name in the group header.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-user-picture",
    "longDescription": [
      "This is a sample of customizing the group header when grouping by user column. Display the user\u0027s picture as well as the user\u0027s name in the group header."
    ],
    "creationDateTime": "2021-04-03T00:00:00.000Z",
    "updateDateTime": "2021-04-03T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-horse-crests",
    "reponame": "horse-crests",
    "source": "pnp",
    "title": "Horse Crests",
    "shortDescription": "",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/horse-crests",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2020-11-12T00:00:00.000Z",
    "updateDateTime": "2020-11-12T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-in-memoriam-tileProps-format",
    "reponame": "in-memoriam-tileProps-format",
    "source": "pnp",
    "title": "in-memoriam-tileProps-format",
    "shortDescription": "in-memoriam-tileProps-format",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/in-memoriam-tileProps-format",
    "longDescription": [
      "in-memoriam-tileProps-format"
    ],
    "creationDateTime": "2020-03-31T00:00:00.000Z",
    "updateDateTime": "2020-03-31T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-issue-tracker-planner-cards",
    "reponame": "issue-tracker-planner-cards",
    "source": "pnp",
    "title": "Issue Tracker: Planner Cards",
    "shortDescription": "This sample is intended to be used in combination with the Issue Tracker list template. The format keeps the row highlighting for blocked issues but also adds a Tiles view that provides a Microsoft Planner look and feel.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/issue-tracker-planner-cards",
    "longDescription": [
      "This sample is intended to be used in combination with the Issue Tracker list template. The format keeps the row highlighting for blocked issues but also adds a Tiles view that provides a Microsoft Planner look and feel."
    ],
    "creationDateTime": "2020-10-15T00:00:00.000Z",
    "updateDateTime": "2020-10-15T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-london-tube-status",
    "reponame": "london-tube-status",
    "source": "pnp",
    "title": "London Underground Line Status",
    "shortDescription": "Display on the homepage of your SharePoint intranet a continually updated feed of London Underground line statuses using the publicly available Transport for London (TFL) API. ",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/london-tube-status",
    "longDescription": [
      "Display on the homepage of your SharePoint intranet a continually updated feed of London Underground line statuses using the publicly available Transport for London (TFL) API. "
    ],
    "creationDateTime": "2020-10-24T00:00:00.000Z",
    "updateDateTime": "2021-01-31T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/london-tube-status/assets/screenshot-animated.gif?raw=true",
        "alt": "screenshot-animated"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/london-tube-status/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "LeonArmston",
        "pictureUrl": "https://github.com/LeonArmston.png",
        "name": "Leon Armston"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-message-chat-format",
    "reponame": "message-chat-format",
    "source": "pnp",
    "title": "Message Chat Format",
    "shortDescription": "This sample formats your SharePoint list view to look like a message chat. If \u0060Author\u0060 equals \u0060@me\u0060, the message will be displayed on the right.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/message-chat-format",
    "longDescription": [
      "This sample formats your SharePoint list view to look like a message chat. If \u0060Author\u0060 equals \u0060@me\u0060, the message will be displayed on the right."
    ],
    "creationDateTime": "2020-11-19T00:00:00.000Z",
    "updateDateTime": "2020-11-19T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-line-view",
    "reponame": "multi-line-view",
    "source": "pnp",
    "title": "Multi-line view rendering",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/multi-line-view",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-08-10T00:00:00.000Z",
    "updateDateTime": "2018-08-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@me"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/multi-line-view/assets/listformatting-rowformatter.png?raw=true",
        "alt": "listformatting-rowformatter"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ldemaris",
        "pictureUrl": "https://github.com/ldemaris.png",
        "name": "Lincoln DeMaris"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-person-currentuser-rowclass",
    "reponame": "multi-person-currentuser-rowclass",
    "source": "pnp",
    "title": "Current User\u0027s Rows (Using a Multi-Person Column)",
    "shortDescription": "Highlights the entire row for any list items where one of the assigned to users is the current user (the user viewing the list view, not the author of the format). You can easily adjust this to use a different person column by changing the \u0060[$AssignedTo]\u0060 portion of the expression.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/multi-person-currentuser-rowclass",
    "longDescription": [
      "Highlights the entire row for any list items where one of the assigned to users is the current user (the user viewing the list view, not the author of the format). You can easily adjust this to use a different person column by changing the \u0060[$AssignedTo]\u0060 portion of the expression."
    ],
    "creationDateTime": "2019-01-29T00:00:00.000Z",
    "updateDateTime": "2019-01-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Person"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "indexOf"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@me"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/multi-person-currentuser-rowclass/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-out-of-office-format",
    "reponame": "out-of-office-format",
    "source": "pnp",
    "title": "Out of office row format",
    "shortDescription": "This is a sample derived from the [birthday row format](../birthday-format). It shows how to format a list to show upcoming employee time away from office. It features the following:",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/out-of-office-format",
    "longDescription": [
      "This is a sample derived from the [birthday row format](../birthday-format). It shows how to format a list to show upcoming employee time away from office. It features the following:"
    ],
    "creationDateTime": "2021-05-14T00:00:00.000Z",
    "updateDateTime": "2021-05-14T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "tomresing",
        "pictureUrl": "https://github.com/tomresing.png",
        "name": "Tom Resing"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-person-currentuser-rowclass",
    "reponame": "person-currentuser-rowclass",
    "source": "pnp",
    "title": "Current User\u0027s Rows",
    "shortDescription": "Highlights the entire row for any list items assigned to the current user (the user viewing the list view, not the author of the format). You can easily adjust this to use a different column like Author or Editor by changing the \u0060[$AssignedTo]\u0060 portion of the expression.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/person-currentuser-rowclass",
    "longDescription": [
      "Highlights the entire row for any list items assigned to the current user (the user viewing the list view, not the author of the format). You can easily adjust this to use a different column like Author or Editor by changing the \u0060[$AssignedTo]\u0060 portion of the expression."
    ],
    "creationDateTime": "2018-08-21T00:00:00.000Z",
    "updateDateTime": "2018-08-21T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Person"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@me"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "People"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/person-currentuser-rowclass/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/person-currentuser-rowclass/assets/screenshotCombined.png?raw=true",
        "alt": "screenshotCombined"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-planner-inspired-task-card",
    "reponame": "planner-inspired-task-card",
    "source": "pnp",
    "title": "Planner Inspired Task Cards",
    "shortDescription": "Formats Task List Items in a Planner Inspired Card View. Uses OfficeUIFabric Icons to designate \u0022In Progress\u0022, \u0022Completed\u0022 and \u0022Delayed\u0022 Statuses. Automatically strikes out text for \u0022Completed\u0022 items.  ",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/planner-inspired-task-card",
    "longDescription": [
      "Formats Task List Items in a Planner Inspired Card View. Uses OfficeUIFabric Icons to designate \u0022In Progress\u0022, \u0022Completed\u0022 and \u0022Delayed\u0022 Statuses. Automatically strikes out text for \u0022Completed\u0022 items.  "
    ],
    "creationDateTime": "2019-07-26T00:00:00.000Z",
    "updateDateTime": "2019-07-26T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@now"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/planner-inspired-task-card/assets/screenshot.gif?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/planner-inspired-task-card/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aprildunnam",
        "pictureUrl": "https://github.com/aprildunnam.png",
        "name": "April Dunham"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-product-catalog",
    "reponame": "product-catalog",
    "source": "pnp",
    "title": "Product Catalog Sample",
    "shortDescription": "The product catalog sample demonstrates how to use view formatting to format lists and display views of the lists inside web parts. It also demonstrates how to create links to download documents from the SharePoint Document libraries.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/product-catalog",
    "longDescription": [
      "The product catalog sample demonstrates how to use view formatting to format lists and display views of the lists inside web parts. It also demonstrates how to create links to download documents from the SharePoint Document libraries."
    ],
    "creationDateTime": "2020-01-29T00:00:00.000Z",
    "updateDateTime": "2020-01-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/assets/credential-popup.png?raw=true",
        "alt": "credential-popup"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/assets/Finish.png?raw=true",
        "alt": "Finish"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/assets/page-review.png?raw=true",
        "alt": "page-review"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/assets/security-warning.png?raw=true",
        "alt": "security-warning"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "TBag",
        "pictureUrl": "https://github.com/TBag.png",
        "name": "Todd Baginski"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-profile-card",
    "reponame": "profile-card",
    "source": "pnp",
    "title": "User Profile Card",
    "shortDescription": "This is simple user profile card built to provide a tile view with contact buttons. A default image is shown if a picture is not provided.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/profile-card",
    "longDescription": [
      "This is simple user profile card built to provide a tile view with contact buttons. A default image is shown if a picture is not provided."
    ],
    "creationDateTime": "2019-03-13T00:00:00.000Z",
    "updateDateTime": "2019-03-13T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/profile-card/assets/profile-card.png?raw=true",
        "alt": "profile-card"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-project-gantt-chart",
    "reponame": "project-gantt-chart",
    "source": "pnp",
    "title": "Project Gantt Chart View",
    "shortDescription": "This project Gantt Chart sample demonstrates how to show a list of high level tasks in a Gantt chart. It is mainly useful for top-level views.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/project-gantt-chart",
    "longDescription": [
      "This project Gantt Chart sample demonstrates how to show a list of high level tasks in a Gantt chart. It is mainly useful for top-level views."
    ],
    "creationDateTime": "2020-11-01T00:00:00.000Z",
    "updateDateTime": "2021-02-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "gdk-max",
        "pictureUrl": "https://github.com/gdk-max.png",
        "name": "Geert de Kooter"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-project-health-dashboard",
    "reponame": "project-health-dashboard",
    "source": "pnp",
    "title": "Project Health Dashboard",
    "shortDescription": "This is a template for Project health statuses; it has nice features such as Risk scoring, Severity of the project, Schedule timing, Hover effects that provide the latest project updates, Theme Colors, Project Team members, and the cost of the project.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/project-health-dashboard",
    "longDescription": [
      "This is a template for Project health statuses; it has nice features such as Risk scoring, Severity of the project, Schedule timing, Hover effects that provide the latest project updates, Theme Colors, Project Team members, and the cost of the project."
    ],
    "creationDateTime": "2020-12-29T00:00:00.000Z",
    "updateDateTime": "2020-12-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "Riftsan",
        "pictureUrl": "https://github.com/Riftsan.png",
        "name": "Andres Ibarra"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-resource-catalog",
    "reponame": "resource-catalog",
    "source": "pnp",
    "title": "Resource Catalog Sample",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/resource-catalog",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-10-09T00:00:00.000Z",
    "updateDateTime": "2018-10-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "toLocaleDateString"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-retail-account",
    "reponame": "retail-account",
    "source": "pnp",
    "title": "Retail Account Sample",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/retail-account",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-10-09T00:00:00.000Z",
    "updateDateTime": "2018-10-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Currency"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "Number"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "defaultClick"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-rota-css-table",
    "reponame": "rota-css-table",
    "source": "pnp",
    "title": "Staff Rota Shifts View Format",
    "shortDescription": "This is a sample that uses \u0060rowFormatter\u0060 to customise the entire display of a row. The aim is to demonstrate the following concepts:",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/rota-css-table",
    "longDescription": [
      "This is a sample that uses \u0060rowFormatter\u0060 to customise the entire display of a row. The aim is to demonstrate the following concepts:"
    ],
    "creationDateTime": "2019-03-07T00:00:00.000Z",
    "updateDateTime": "2019-03-07T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "join"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/rota-css-table/assets/screenshot.jpeg?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "arielkropp",
        "pictureUrl": "https://github.com/arielkropp.png",
        "name": "Ariel Kropp"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-small-card-format",
    "reponame": "small-card-format",
    "source": "pnp",
    "title": "Small Card",
    "shortDescription": "",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/small-card-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-11-01T00:00:00.000Z",
    "updateDateTime": "2019-11-01T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "DRamalho92",
        "pictureUrl": "https://github.com/DRamalho92.png",
        "name": "David Ramalho"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-testimonials",
    "reponame": "testimonials",
    "source": "pnp",
    "title": "Testimonials",
    "shortDescription": "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! \uD83D\uDE4C",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/testimonials",
    "longDescription": [
      "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! \uD83D\uDE4C"
    ],
    "creationDateTime": "2020-12-29T00:00:00.000Z",
    "updateDateTime": "2020-12-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/testimonials/assets/screenshot.gif?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Riftsan",
        "pictureUrl": "https://github.com/Riftsan.png",
        "name": "Andres Ibarra"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-conditional-format",
    "reponame": "text-conditional-format",
    "source": "pnp",
    "title": "Conditional formatting based on choice field",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-conditional-format",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-08-10T00:00:00.000Z",
    "updateDateTime": "2018-08-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-conditional-format/assets/textformatting-status.png?raw=true",
        "alt": "textformatting-status"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ldemaris",
        "pictureUrl": "https://github.com/ldemaris.png",
        "name": "Lincoln DeMaris"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-tile-layout-example-with-formatting",
    "reponame": "tile-layout-example-with-formatting",
    "source": "pnp",
    "title": "Items in Tile Layout with images and Formatting for Doclib",
    "shortDescription": "This sample uses tileProps element to format the tile layout  for document libraries.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/tile-layout-example-with-formatting",
    "longDescription": [
      "This sample uses tileProps element to format the tile layout  for document libraries."
    ],
    "creationDateTime": "2019-10-15T00:00:00.000Z",
    "updateDateTime": "2019-10-15T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/tile-layout-example-with-formatting/assets/Tile-with-formatting.png?raw=true",
        "alt": "Tile-with-formatting"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NiketJain",
        "pictureUrl": "https://github.com/NiketJain.png",
        "name": "Niket Jain"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-tile-layout-example-with-image",
    "reponame": "tile-layout-example-with-image",
    "source": "pnp",
    "title": "Items in Tile Layout with images",
    "shortDescription": "This sample uses tileProps element to format the tile layout of the view.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/tile-layout-example-with-image",
    "longDescription": [
      "This sample uses tileProps element to format the tile layout of the view."
    ],
    "creationDateTime": "2019-09-09T00:00:00.000Z",
    "updateDateTime": "2019-09-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/tile-layout-example-with-image/assets/tile-layout.png?raw=true",
        "alt": "tile-layout"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rk-menon",
        "pictureUrl": "https://github.com/rk-menon.png",
        "name": "Rk Menon"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-timeline-format",
    "reponame": "timeline-format",
    "source": "pnp",
    "title": "Timeline Format",
    "shortDescription": "This sample formats your SharePoint list view to look like a timeline.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/timeline-format",
    "longDescription": [
      "This sample formats your SharePoint list view to look like a timeline."
    ],
    "creationDateTime": "2020-10-17T00:00:00.000Z",
    "updateDateTime": "2020-11-17T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline-format/assets/horizontal-timeline-format.gif?raw=true",
        "alt": "horizontal-timeline-format"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline-format/assets/vertical-timeline-format.gif?raw=true",
        "alt": "vertical-timeline-format"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-twitter-format",
    "reponame": "twitter-format",
    "source": "pnp",
    "title": "Twitter Format",
    "shortDescription": "This sample formats your SharePoint list view to look like Twitter. If you are using the Microsoft Flow Templates to track tweets in a SharePoint list, this is a great way to format your list so that it looks more like Twitter. For more info on Flow Templates that take Tweets and add them to a SharePoint list check out this template: https://us.flow.microsoft.com/en-us/galleries/public/templates/e78571e5c70e4806a18eeacba5a897c8/save-tweets-that-include-a-specific-hashtag-to-a-sharepoint-list/",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/twitter-format",
    "longDescription": [
      "This sample formats your SharePoint list view to look like Twitter. If you are using the Microsoft Flow Templates to track tweets in a SharePoint list, this is a great way to format your list so that it looks more like Twitter. For more info on Flow Templates that take Tweets and add them to a SharePoint list check out this template: https://us.flow.microsoft.com/en-us/galleries/public/templates/e78571e5c70e4806a18eeacba5a897c8/save-tweets-that-include-a-specific-hashtag-to-a-sharepoint-list/"
    ],
    "creationDateTime": "2019-08-02T00:00:00.000Z",
    "updateDateTime": "2019-08-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "View"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/twitter-format/assets/SPTwitter.gif?raw=true",
        "alt": "SPTwitter"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/twitter-format/assets/twitterFormat.png?raw=true",
        "alt": "twitterFormat"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aprildunnam",
        "pictureUrl": "https://github.com/aprildunnam.png",
        "name": "April Dunham"
      }
    ],
    "references": [
      {
        "name": "Use view formatting to customize SharePoint",
        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-color-based-smiley-face",
    "reponame": "color-based-smiley-face",
    "source": "pnp",
    "title": "Smiley faces for good quiz results",
    "shortDescription": "This sample is to display smiley faces based on color value, As for sample, it is based on color choice column value of",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/color-based-smiley-face",
    "longDescription": [
      "This sample is to display smiley faces based on color value, As for sample, it is based on color choice column value of"
    ],
    "creationDateTime": "2019-06-16T00:00:00.000Z",
    "updateDateTime": "2019-06-16T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/color-based-smiley-face/assets/display.png?raw=true",
        "alt": "display"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-comment-count",
    "reponame": "comment-count",
    "source": "pnp",
    "title": "comment-count",
    "shortDescription": "comment-count",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/comment-count",
    "longDescription": [
      "comment-count"
    ],
    "creationDateTime": "2021-03-19T00:00:00.000Z",
    "updateDateTime": "2021-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-currency-symbol-concatenation",
    "reponame": "currency-symbol-concatenation",
    "source": "pnp",
    "title": "Concatenate Currency Symbol to Numeric Columns",
    "shortDescription": "Currency column is currently not supported, hence this sample will allow the users to concatenate a currency symbol(\u00A3, $ ... etc.) to the existing data.  This sample will compare two numeric columns and add a currrency symbol. In this example, two columns (Budget Approved and Expenditure To Date) from a  Project Register has been used.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/currency-symbol-concatenation",
    "longDescription": [
      "Currency column is currently not supported, hence this sample will allow the users to concatenate a currency symbol(\u00A3, $ ... etc.) to the existing data.  This sample will compare two numeric columns and add a currrency symbol. In this example, two columns (Budget Approved and Expenditure To Date) from a  Project Register has been used."
    ],
    "creationDateTime": "2018-01-15T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/currency-symbol-concatenation/assets/budgetcolumnformating.png?raw=true",
        "alt": "budgetcolumnformating"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sohailmerchant",
        "pictureUrl": "https://github.com/sohailmerchant.png",
        "name": "S Merchant"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-custom-hover-cards",
    "reponame": "custom-hover-cards",
    "source": "pnp",
    "title": "Custom hover card on Lists",
    "shortDescription": "The following image shows a list with a custom hover added to a List:",
    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-hover-cards",
    "longDescription": [
      "The following image shows a list with a custom hover added to a List:"
    ],
    "creationDateTime": "2020-04-08T00:00:00.000Z",
    "updateDateTime": "2020-04-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-hover-cards/assets/Status_hover.png?raw=true",
        "alt": "Status_hover"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NiketJain",
        "pictureUrl": "https://github.com/NiketJain.png",
        "name": "Niket Jain"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-check-blank-format",
    "reponame": "date-check-blank-format",
    "source": "pnp",
    "title": "Formatting a column when a date column is blank",
    "shortDescription": "This example populates the text content and applies different classes to the Status field depending on the value inside an item\u0027s DueDate field. This example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the \u0060[$FieldName]\u0060 syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - \u0060@now\u0060, which resolves to the current date/time, evaluated when the user loads the list view.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/date-check-blank-format",
    "longDescription": [
      "This example populates the text content and applies different classes to the Status field depending on the value inside an item\u0027s DueDate field. This example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the \u0060[$FieldName]\u0060 syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - \u0060@now\u0060, which resolves to the current date/time, evaluated when the user loads the list view."
    ],
    "creationDateTime": "2020-07-18T00:00:00.000Z",
    "updateDateTime": "2020-07-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/date-check-blank-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ganesh-sanap",
        "pictureUrl": "https://github.com/ganesh-sanap.png",
        "name": "Ganesh Sanap"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-difference",
    "reponame": "date-difference",
    "source": "pnp",
    "title": "Date Difference",
    "shortDescription": "This sample demonstrates calculating the difference between 2 dates. In this sample the age in years is calculated based on the date of birth and the date of death. This format could easily be adjusted to calculate a different unit of time (months, days, hours, minutes, etc.) by adjusting the multiplier.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-difference",
    "longDescription": [
      "This sample demonstrates calculating the difference between 2 dates. In this sample the age in years is calculated based on the date of birth and the date of death. This format could easily be adjusted to calculate a different unit of time (months, days, hours, minutes, etc.) by adjusting the multiplier."
    ],
    "creationDateTime": "2019-10-02T00:00:00.000Z",
    "updateDateTime": "2019-10-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-difference/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-page-a-day-calendar",
    "reponame": "date-page-a-day-calendar",
    "source": "pnp",
    "title": "Page-a-day Calendar",
    "shortDescription": "This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (\u0060getDate\u0060, \u0060getMonth\u0060, and \u0060getYear\u0060).",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-page-a-day-calendar",
    "longDescription": [
      "This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (\u0060getDate\u0060, \u0060getMonth\u0060, and \u0060getYear\u0060)."
    ],
    "creationDateTime": "2020-10-17T00:00:00.000Z",
    "updateDateTime": "2020-10-17T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-range-format",
    "reponame": "date-range-format",
    "source": "pnp",
    "title": "Formatting an item when a date column is before or after today\u0027s date",
    "shortDescription": "This example colors the current field red when the value inside an item\u0027s DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - \u0060@now\u0060, which resolves to the current date/time, evaluated when the user loads the list view.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/date-range-format",
    "longDescription": [
      "This example colors the current field red when the value inside an item\u0027s DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - \u0060@now\u0060, which resolves to the current date/time, evaluated when the user loads the list view."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-17T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@now"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/date-range-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-date-range-rag",
    "reponame": "date-range-rag",
    "source": "pnp",
    "title": "Creating Red-Amber-Green (RAG) bars based on date ranges",
    "shortDescription": "This example creates colored data bars on the current field based on \u0060DueDate\u0060 and \u0060StartDate\u0060 fields compared to the current date/time.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/date-range-rag",
    "longDescription": [
      "This example creates colored data bars on the current field based on \u0060DueDate\u0060 and \u0060StartDate\u0060 fields compared to the current date/time."
    ],
    "creationDateTime": "2018-06-13T00:00:00.000Z",
    "updateDateTime": "2019-08-12T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Date/Time"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "Number"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@now"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Severity"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/date-range-rag/assets/screenshot-daysleft.png?raw=true",
        "alt": "screenshot-daysleft"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/date-range-rag/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ChrispyBites",
        "pictureUrl": "https://github.com/ChrispyBites.png",
        "name": "Christopher Parker"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-default-hover-cards",
    "reponame": "default-hover-cards",
    "source": "pnp",
    "title": "Default hover card on Lists",
    "shortDescription": "The following image shows a list with a default hover added to a formatted column in a list",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/default-hover-cards",
    "longDescription": [
      "The following image shows a list with a default hover added to a formatted column in a list"
    ],
    "creationDateTime": "2020-04-08T00:00:00.000Z",
    "updateDateTime": "2020-04-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/default-hover-cards/assets/People_hover.png?raw=true",
        "alt": "People_hover"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NiketJain",
        "pictureUrl": "https://github.com/NiketJain.png",
        "name": "Niket Jain"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-file-thumbnail",
    "reponame": "file-thumbnail",
    "source": "pnp",
    "title": "File Thumbnails",
    "shortDescription": "This sample utilizes the \u0060@thumbnail\u0060 placeholder token to create an inline preview for document libraries. Folders and filetypes where previews are not available will not display at all.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/file-thumbnail",
    "longDescription": [
      "This sample utilizes the \u0060@thumbnail\u0060 placeholder token to create an inline preview for document libraries. Folders and filetypes where previews are not available will not display at all."
    ],
    "creationDateTime": "2019-05-27T00:00:00.000Z",
    "updateDateTime": "2019-05-27T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@thumbnail"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Document Library"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/file-thumbnail/assets/screenshot.gif?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-centered-content",
    "reponame": "generic-centered-content",
    "source": "pnp",
    "title": "Centered Content",
    "shortDescription": "This is a basic sample that demonstrates making your content be both vertically and horizontally centered (in the middle) within the cell.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-centered-content",
    "longDescription": [
      "This is a basic sample that demonstrates making your content be both vertically and horizontally centered (in the middle) within the cell."
    ],
    "creationDateTime": "2018-08-24T00:00:00.000Z",
    "updateDateTime": "2018-08-24T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-centered-content/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-column-chart",
    "reponame": "generic-column-chart",
    "source": "pnp",
    "title": "Inline Column Chart",
    "shortDescription": "This sample demonstrates displaying a column chart using SVG. It uses the \u0060currentColor\u0060 for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site\u0027s theme.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-column-chart",
    "longDescription": [
      "This sample demonstrates displaying a column chart using SVG. It uses the \u0060currentColor\u0060 for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site\u0027s theme."
    ],
    "creationDateTime": "2020-10-10T00:00:00.000Z",
    "updateDateTime": "2020-10-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-column-chart/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-comment-count",
    "reponame": "generic-comment-count",
    "source": "pnp",
    "title": "Display Comment Count",
    "shortDescription": "This sample shows the comment count for a list item.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-comment-count",
    "longDescription": [
      "This sample shows the comment count for a list item."
    ],
    "creationDateTime": "2020-12-03T00:00:00.000Z",
    "updateDateTime": "2020-12-03T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-comment-count/assets/generic-comment-count.gif?raw=true",
        "alt": "generic-comment-count"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-comment-count/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-file-preview",
    "reponame": "generic-file-preview",
    "source": "pnp",
    "title": "File Preview",
    "shortDescription": "This sample opens Microsoft Office documents in full screen within a new tab. This is the same view as used in the fileviewer webpart (no toolbars).",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-file-preview",
    "longDescription": [
      "This sample opens Microsoft Office documents in full screen within a new tab. This is the same view as used in the fileviewer webpart (no toolbars)."
    ],
    "creationDateTime": "2020-08-08T00:00:00.000Z",
    "updateDateTime": "2020-08-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-file-preview/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-file-preview/assets/screenshotFilePreview.png?raw=true",
        "alt": "screenshotFilePreview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "gdk-max",
        "pictureUrl": "https://github.com/gdk-max.png",
        "name": "Geert de Kooter"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-flow-status",
    "reponame": "generic-flow-status",
    "source": "pnp",
    "title": "generic-flow-status",
    "shortDescription": "generic-flow-status",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-flow-status",
    "longDescription": [
      "generic-flow-status"
    ],
    "creationDateTime": "2021-12-10T00:00:00.000Z",
    "updateDateTime": "2021-12-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-hyperlink-thumbnail",
    "reponame": "generic-hyperlink-thumbnail",
    "source": "pnp",
    "title": "Turn FileRef field into thumbnail image or clickable hyperlink",
    "shortDescription": "This example uses a column to generate a hyperlink to the Item Thumbnail for a document library.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-hyperlink-thumbnail",
    "longDescription": [
      "This example uses a column to generate a hyperlink to the Item Thumbnail for a document library."
    ],
    "creationDateTime": "2018-07-17T00:00:00.000Z",
    "updateDateTime": "2019-04-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Document Library"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-hyperlink-thumbnail/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-hyperlink-thumbnail/assets/screenshot2.png?raw=true",
        "alt": "screenshot2"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "josy1024",
        "pictureUrl": "https://github.com/josy1024.png",
        "name": "Josef Lahmer"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-hyperlink-values",
    "reponame": "generic-hyperlink-values",
    "source": "pnp",
    "title": "Turn field values into hyperlinks",
    "shortDescription": "This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. The example uses a \u0060\u002B\u0060 operator that appends the current field value to the static hyperlink \u003Ca\u003Ehttp://finance.yahoo.com/quote/\u003C/a\u003E. You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-hyperlink-values",
    "longDescription": [
      "This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. The example uses a \u0060\u002B\u0060 operator that appends the current field value to the static hyperlink \u003Ca\u003Ehttp://finance.yahoo.com/quote/\u003C/a\u003E. You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-hyperlink-values/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-icon-overlay",
    "reponame": "generic-icon-overlay",
    "source": "pnp",
    "title": "Icon Overlays",
    "shortDescription": "You can UI Fabric Icons within your column and view formats. This sample demonstrates combining multiple icons by overlaying to create colorful icons that can indicate more information than a single icon can.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-icon-overlay",
    "longDescription": [
      "You can UI Fabric Icons within your column and view formats. This sample demonstrates combining multiple icons by overlaying to create colorful icons that can indicate more information than a single icon can."
    ],
    "creationDateTime": "2020-01-09T00:00:00.000Z",
    "updateDateTime": "2020-01-09T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/assets/screenshotOverlay.png?raw=true",
        "alt": "screenshotOverlay"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/assets/screenshotOverlayMultiple.png?raw=true",
        "alt": "screenshotOverlayMultiple"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/assets/screenshotSimple.png?raw=true",
        "alt": "screenshotSimple"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-issuestatus-pill",
    "reponame": "generic-issuestatus-pill",
    "source": "pnp",
    "title": "Issue Status Pill ",
    "shortDescription": "This format demonstrates how you can reproduce the status choices as pills found in the Microsoft Lists Issue Tracker template..",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-issuestatus-pill",
    "longDescription": [
      "This format demonstrates how you can reproduce the status choices as pills found in the Microsoft Lists Issue Tracker template.."
    ],
    "creationDateTime": "2020-07-30T00:00:00.000Z",
    "updateDateTime": "2020-07-30T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-issuestatus-pill/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-launch-powerapp",
    "reponame": "generic-launch-powerapp",
    "source": "pnp",
    "title": "Launch Power App Button",
    "shortDescription": "Providing a direct link to an item within Power Apps is easy to do using this sample. To use it follow the instructions below to get the link to your Power App (and replace that portion of the format).",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-launch-powerapp",
    "longDescription": [
      "Providing a direct link to an item within Power Apps is easy to do using this sample. To use it follow the instructions below to get the link to your Power App (and replace that portion of the format)."
    ],
    "creationDateTime": "2021-05-27T00:00:00.000Z",
    "updateDateTime": "2021-05-27T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-launch-powerapp/assets/CopyPALink.png?raw=true",
        "alt": "CopyPALink"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-launch-powerapp/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-mailto-button",
    "reponame": "generic-mailto-button",
    "source": "pnp",
    "title": "Mail To Button",
    "shortDescription": "This sample demonstrates making a mailto link (opens email with prepopulated values) button that references a different field.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-mailto-button",
    "longDescription": [
      "This sample demonstrates making a mailto link (opens email with prepopulated values) button that references a different field."
    ],
    "creationDateTime": "2021-05-27T00:00:00.000Z",
    "updateDateTime": "2021-05-27T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-mailto-button/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-project-management",
    "reponame": "generic-project-management",
    "source": "pnp",
    "title": "Project Indicator Formats",
    "shortDescription": "Project Indicator Formats",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-project-management",
    "longDescription": [
      "Project Indicator Formats"
    ],
    "creationDateTime": "2017-11-10T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/assets/screenshot2.png?raw=true",
        "alt": "screenshot2"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/assets/screenshot3.png?raw=true",
        "alt": "screenshot3"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/assets/screenshot4.png?raw=true",
        "alt": "screenshot4"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-right-align",
    "reponame": "generic-right-align",
    "source": "pnp",
    "title": "Centered Content",
    "shortDescription": "This sample shows how to right-align your content, while preserving the number or date format set using the SharePoint / Lists UI.  Numbers and dates should typically be presented as right-aligned, for improved readability.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-right-align",
    "longDescription": [
      "This sample shows how to right-align your content, while preserving the number or date format set using the SharePoint / Lists UI.  Numbers and dates should typically be presented as right-aligned, for improved readability."
    ],
    "creationDateTime": "2021-02-13T00:00:00.000Z",
    "updateDateTime": "2021-02-13T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-right-align/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Mike-Honey",
        "pictureUrl": "https://github.com/Mike-Honey.png",
        "name": "Mike Honey"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-rowactions",
    "reponame": "generic-rowactions",
    "source": "pnp",
    "title": "Row Actions",
    "shortDescription": "You can use column and view formatting to create buttons that perform pre-defined actions when clicked. This sample provides a quick format that demonstrates the use of each of the possible actions.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-rowactions",
    "longDescription": [
      "You can use column and view formatting to create buttons that perform pre-defined actions when clicked. This sample provides a quick format that demonstrates the use of each of the possible actions."
    ],
    "creationDateTime": "2019-04-18T00:00:00.000Z",
    "updateDateTime": "2019-04-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-rowIndex-drawing",
    "reponame": "generic-rowIndex-drawing",
    "source": "pnp",
    "title": "Row Index Drawing",
    "shortDescription": "This is a silly format that draws a picture in your view using the \u0060@rowIndex\u0060 token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-rowIndex-drawing",
    "longDescription": [
      "This is a silly format that draws a picture in your view using the \u0060@rowIndex\u0060 token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up."
    ],
    "creationDateTime": "2020-02-20T00:00:00.000Z",
    "updateDateTime": "2020-02-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowIndex-drawing/assets/screenshot.gif?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-scheduling-link",
    "reponame": "generic-scheduling-link",
    "source": "pnp",
    "title": "Linking to the scheduling dialog in Microsoft Teams and Microsoft Outlook",
    "shortDescription": "This sample demonstrates creating deep links to the scheduling dialog in Microsoft Teams and Microsoft Outlook.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-scheduling-link",
    "longDescription": [
      "This sample demonstrates creating deep links to the scheduling dialog in Microsoft Teams and Microsoft Outlook."
    ],
    "creationDateTime": "2021-01-28T00:00:00.000Z",
    "updateDateTime": "2021-01-28T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-scheduling-link/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-scheduling-link/assets/screen_capture.gif?raw=true",
        "alt": "screen_capture"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-socialpic",
    "reponame": "generic-socialpic",
    "source": "pnp",
    "title": "Display social media profile pics using social media handles",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-socialpic",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-07-21T00:00:00.000Z",
    "updateDateTime": "2020-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-socialpic/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "pictureUrl": "https://github.com/PopWarner.png",
        "name": "David Warner II"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-start-flow",
    "reponame": "generic-start-flow",
    "source": "pnp",
    "title": "Create a button to launch a Flow for the selected item",
    "shortDescription": "You can use column formatting to create buttons that, when clicked, run Flows on the corresponding list item. The Flow Launch Panel will be displayed after clicking the button allowing the user to specify any required data and then run the flow.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-start-flow",
    "longDescription": [
      "You can use column formatting to create buttons that, when clicked, run Flows on the corresponding list item. The Flow Launch Panel will be displayed after clicking the button allowing the user to specify any required data and then run the flow."
    ],
    "creationDateTime": "2017-11-25T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "executeFlow"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-start-flow/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "yborghmans",
        "pictureUrl": "https://github.com/yborghmans.png",
        "name": "Yannick Borghmans"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-start-flow-conditionally",
    "reponame": "generic-start-flow-conditionally",
    "source": "pnp",
    "title": "Create a button to conditionally launch a Flow for the selected item",
    "shortDescription": "You can use column formatting to create buttons that, when clicked, run Flows on the corresponding list item. The Flow Launch Panel will be displayed after clicking the button allowing the user to specify any required data and then run the flow. This is demonstrated in the [Generic-Start-Flow](../generic-start-flow) sample.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-start-flow-conditionally",
    "longDescription": [
      "You can use column formatting to create buttons that, when clicked, run Flows on the corresponding list item. The Flow Launch Panel will be displayed after clicking the button allowing the user to specify any required data and then run the flow. This is demonstrated in the [Generic-Start-Flow](../generic-start-flow) sample."
    ],
    "creationDateTime": "2019-03-15T00:00:00.000Z",
    "updateDateTime": "2019-03-15T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-ROW-ACTION",
        "value": "executeFlow"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-start-flow-conditionally/assets/FlowID.png?raw=true",
        "alt": "FlowID"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-start-flow-conditionally/assets/Screenshot.gif?raw=true",
        "alt": "Screenshot"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-start-flow-conditionally/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-staticmap",
    "reponame": "generic-staticmap",
    "source": "pnp",
    "title": "Displays a customizable Google map image for a given location",
    "shortDescription": "This template takes advantage of Google Maps\u0027 [staticmap API](https://developers.google.com/maps/documentation/static-maps/) which generates an image using a parameterized URL. The template only uses the most basic features ([location](https://developers.google.com/maps/documentation/static-maps/intro#Locations) \u0026 [image size](https://developers.google.com/maps/documentation/static-maps/intro#Imagesizes), but the API offers deep customization including:",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-staticmap",
    "longDescription": [
      "This template takes advantage of Google Maps\u0027 [staticmap API](https://developers.google.com/maps/documentation/static-maps/) which generates an image using a parameterized URL. The template only uses the most basic features ([location](https://developers.google.com/maps/documentation/static-maps/intro#Locations) \u0026 [image size](https://developers.google.com/maps/documentation/static-maps/intro#Imagesizes), but the API offers deep customization including:"
    ],
    "creationDateTime": "2018-03-21T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-staticmap/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-substring-status",
    "reponame": "generic-substring-status",
    "source": "pnp",
    "title": "Substring Status",
    "shortDescription": "This format demonstrates using a combination of the \u0060substring\u0060 and \u0060indexOf\u0060 operations to \u0022split\u0022 a value and make style decisions based on portions of the value. In this case the status values are separated with a colon (\u0060:\u0060). The first part is a general category such as Not Started, In Progress, or Resolved. The second part is the detailed reason for the status. Since these values are within the same column it becomes necessary to break the value apart.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-substring-status",
    "longDescription": [
      "This format demonstrates using a combination of the \u0060substring\u0060 and \u0060indexOf\u0060 operations to \u0022split\u0022 a value and make style decisions based on portions of the value. In this case the status values are separated with a colon (\u0060:\u0060). The first part is a general category such as Not Started, In Progress, or Resolved. The second part is the detailed reason for the status. Since these values are within the same column it becomes necessary to break the value apart."
    ],
    "creationDateTime": "2020-02-06T00:00:00.000Z",
    "updateDateTime": "2020-02-06T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-substring-status/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-svgicon-format",
    "reponame": "generic-svgicon-format",
    "source": "pnp",
    "title": "SVG icons",
    "shortDescription": "The [UI Fabric icons](https://developer.microsoft.com/en-us/fabric#/styles/icons) are easy to use in column formatting by simply specifying the name in the \u0060iconName\u0060 attribute. However, the available selection of icons may not always meet your needs.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-svgicon-format",
    "longDescription": [
      "The [UI Fabric icons](https://developer.microsoft.com/en-us/fabric#/styles/icons) are easy to use in column formatting by simply specifying the name in the \u0060iconName\u0060 attribute. However, the available selection of icons may not always meet your needs."
    ],
    "creationDateTime": "2018-03-26T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-svgicon-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-time-schedule",
    "reponame": "generic-time-schedule",
    "source": "pnp",
    "title": "Time Schedule",
    "shortDescription": "This sample demonstrates a time schedule with a filled background from \u0060Start\u0060 time to \u0060End\u0060 time.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-time-schedule",
    "longDescription": [
      "This sample demonstrates a time schedule with a filled background from \u0060Start\u0060 time to \u0060End\u0060 time."
    ],
    "creationDateTime": "2020-11-03T00:00:00.000Z",
    "updateDateTime": "2020-11-03T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-time-schedule/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-timeline",
    "reponame": "generic-timeline",
    "source": "pnp",
    "title": "Timeline Format",
    "shortDescription": "This sample demonstrates displaying a timeline in a column. If the column value is empty, no circle will be displayed. The content of the column will be shown in a popup when you click on the dot.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-timeline",
    "longDescription": [
      "This sample demonstrates displaying a timeline in a column. If the column value is empty, no circle will be displayed. The content of the column will be shown in a popup when you click on the dot."
    ],
    "creationDateTime": "2021-05-14T00:00:00.000Z",
    "updateDateTime": "2021-05-14T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-timeline/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-twitterpic",
    "reponame": "generic-twitterpic",
    "source": "pnp",
    "title": "Display Twitter profile pics using Twitter handles",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-twitterpic",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2018-03-21T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/generic-twitterpic/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-yearly-gantt-chart",
    "reponame": "generic-yearly-gantt-chart",
    "source": "pnp",
    "title": "Yearly Gantt Chart",
    "shortDescription": "This sample demonstrates the display of a yearly Gantt chart.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-yearly-gantt-chart",
    "longDescription": [
      "This sample demonstrates the display of a yearly Gantt chart."
    ],
    "creationDateTime": "2021-04-12T00:00:00.000Z",
    "updateDateTime": "2021-04-12T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-yearly-gantt-chart/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-generic-youtube-thumbnail",
    "reponame": "generic-youtube-thumbnail",
    "source": "pnp",
    "title": "YouTube Thumbnail",
    "shortDescription": "This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-youtube-thumbnail",
    "longDescription": [
      "This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover."
    ],
    "creationDateTime": "2021-02-10T00:00:00.000Z",
    "updateDateTime": "2021-02-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-youtube-thumbnail/assets/animation.gif?raw=true",
        "alt": "animation"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaoferreira",
        "pictureUrl": "https://github.com/joaoferreira.png",
        "name": "Jo\u00E3o Ferreira"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-image-lightbox",
    "reponame": "image-lightbox",
    "source": "pnp",
    "title": "Image Lightbox",
    "shortDescription": "This sample demonstrates showing the full size image in a lightbox (hover card) rather than opening this image in a new window.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/image-lightbox",
    "longDescription": [
      "This sample demonstrates showing the full size image in a lightbox (hover card) rather than opening this image in a new window."
    ],
    "creationDateTime": "2020-02-10T00:00:00.000Z",
    "updateDateTime": "2020-02-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/image-lightbox/assets/imagesPreview.gif?raw=true",
        "alt": "imagesPreview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaoferreira",
        "pictureUrl": "https://github.com/joaoferreira.png",
        "name": "Jo\u00E3o Ferreira"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-location-address",
    "reponame": "location-address",
    "source": "pnp",
    "title": "Display Location Address Details",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/location-address",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-08-21T00:00:00.000Z",
    "updateDateTime": "2019-08-21T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Location"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/location-address/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-managed-metadata-tag-icon",
    "reponame": "managed-metadata-tag-icon",
    "source": "pnp",
    "title": "Managed Metadata Tag Icon",
    "shortDescription": "This sample displays a tag icon to the left of the value in the managed metadata column.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/managed-metadata-tag-icon",
    "longDescription": [
      "This sample displays a tag icon to the left of the value in the managed metadata column."
    ],
    "creationDateTime": "2021-03-29T00:00:00.000Z",
    "updateDateTime": "2021-03-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-tag-icon/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-choice-foreach",
    "reponame": "multi-choice-foreach",
    "source": "pnp",
    "title": "Multi-Choice forEach",
    "shortDescription": "This sample demonstrates usage of the \u0060forEach\u0060 property to create template elements applied to each choice in a multi-select choice field.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-choice-foreach",
    "longDescription": [
      "This sample demonstrates usage of the \u0060forEach\u0060 property to create template elements applied to each choice in a multi-select choice field."
    ],
    "creationDateTime": "2019-04-04T00:00:00.000Z",
    "updateDateTime": "2019-04-04T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Choice"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "forEach"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/multi-choice-foreach/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-choice-icons",
    "reponame": "multi-choice-icons",
    "source": "pnp",
    "title": "Multi-Choice Icons",
    "shortDescription": "This sample demonstrates using the \u0060indexOf\u0060 and \u0060join\u0060 functions (O365 only) to test if a multi-select choice field has a selected choice. Providing icons of the known choices and applying themed colors based on if the given choice is selected or not creates an intuitive, easy to understand visualization that doesn\u0027t suffer from varying item order or text formatting issues.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-choice-icons",
    "longDescription": [
      "This sample demonstrates using the \u0060indexOf\u0060 and \u0060join\u0060 functions (O365 only) to test if a multi-select choice field has a selected choice. Providing icons of the known choices and applying themed colors based on if the given choice is selected or not creates an intuitive, easy to understand visualization that doesn\u0027t suffer from varying item order or text formatting issues."
    ],
    "creationDateTime": "2019-02-05T00:00:00.000Z",
    "updateDateTime": "2019-02-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Choice"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "indexOf"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/multi-choice-icons/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-choice-workcategory-pill",
    "reponame": "multi-choice-workcategory-pill",
    "source": "pnp",
    "title": "Work Progress Category Pill ",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-choice-workcategory-pill",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2020-08-08T00:00:00.000Z",
    "updateDateTime": "2020-08-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Choice"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/multi-choice-workcategory-pill/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ganesh-sanap",
        "pictureUrl": "https://github.com/ganesh-sanap.png",
        "name": "Ganesh Sanap"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-lookup-projected-field",
    "reponame": "multi-lookup-projected-field",
    "source": "pnp",
    "title": "Multi-lookup fields and projected fields",
    "shortDescription": "Lookup columns that support multiple values can be formatted using the advanced \u0060forEach\u0060 property. Unfortunately, the way values are returned for any projected fields (additional columns associated to your lookup column) can present unique challenges. This sample provides two formats illustrating the difference in how these columns are formatted.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-lookup-projected-field",
    "longDescription": [
      "Lookup columns that support multiple values can be formatted using the advanced \u0060forEach\u0060 property. Unfortunately, the way values are returned for any projected fields (additional columns associated to your lookup column) can present unique challenges. This sample provides two formats illustrating the difference in how these columns are formatted."
    ],
    "creationDateTime": "2021-04-22T00:00:00.000Z",
    "updateDateTime": "2021-04-22T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-lookup-projected-field/assets/ListSettings-Multi-Lookup.png?raw=true",
        "alt": "ListSettings-Multi-Lookup"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-lookup-projected-field/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-person-currentuser",
    "reponame": "multi-person-currentuser",
    "source": "pnp",
    "title": "Highlight the current user",
    "shortDescription": "This sample uses the \u0060@me\u0060 keyword to check if the person field contains the current user and shows that entry using a different color and weight. This is a dynamic check that will always highlight the user using the list (not the creater of the format). This template could easily be extended to apply different/additional styles or icons as desired by simply copying the same expression logic for other fields.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-person-currentuser",
    "longDescription": [
      "This sample uses the \u0060@me\u0060 keyword to check if the person field contains the current user and shows that entry using a different color and weight. This is a dynamic check that will always highlight the user using the list (not the creater of the format). This template could easily be extended to apply different/additional styles or icons as desired by simply copying the same expression logic for other fields."
    ],
    "creationDateTime": "2019-02-05T00:00:00.000Z",
    "updateDateTime": "2019-02-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Person"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "indexOf"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@me"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "People"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/multi-person-currentuser/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-person-facepile",
    "reponame": "multi-person-facepile",
    "source": "pnp",
    "title": "Multi-Person Facepile",
    "shortDescription": "This sample provides rounded images for each person in a multi-select person field.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-person-facepile",
    "longDescription": [
      "This sample provides rounded images for each person in a multi-select person field."
    ],
    "creationDateTime": "2019-04-04T00:00:00.000Z",
    "updateDateTime": "2020-01-22T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Multi-Person"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "forEach"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "People"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/multi-person-facepile/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-multi-person-teams-chat-link",
    "reponame": "multi-person-teams-chat-link",
    "source": "pnp",
    "title": "Multi-Person Teams Chat Link",
    "shortDescription": "This sample demonstrates creating a deep link to a Microsoft Teams chat. This format works both within Microsoft Teams and within SharePoint Online.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-teams-chat-link",
    "longDescription": [
      "This sample demonstrates creating a deep link to a Microsoft Teams chat. This format works both within Microsoft Teams and within SharePoint Online."
    ],
    "creationDateTime": "2020-01-23T00:00:00.000Z",
    "updateDateTime": "2020-01-23T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-teams-chat-link/assets/screenshotList.png?raw=true",
        "alt": "screenshotList"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-teams-chat-link/assets/screenshotTeams.png?raw=true",
        "alt": "screenshotTeams"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-abs-tolerance-comparison",
    "reponame": "number-abs-tolerance-comparison",
    "source": "pnp",
    "title": "Determine Tolerance Comparison using abs()",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-abs-tolerance-comparison",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-03-08T00:00:00.000Z",
    "updateDateTime": "2019-03-08T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "abs"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-abs-tolerance-comparison/assets/screenshot.jpg?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "pictureUrl": "https://github.com/PopWarner.png",
        "name": "David Warner II"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-battery",
    "reponame": "number-battery",
    "source": "pnp",
    "title": "Number Battery",
    "shortDescription": "This sample changes the appearance of the values in number columns (percent)  to look like a battery.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-battery",
    "longDescription": [
      "This sample changes the appearance of the values in number columns (percent)  to look like a battery."
    ],
    "creationDateTime": "2021-05-02T00:00:00.000Z",
    "updateDateTime": "2021-05-02T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-battery/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-conditional-format",
    "reponame": "number-conditional-format",
    "source": "pnp",
    "title": "Conditional formatting based on a number range",
    "shortDescription": "This example uses the conditional operator \u0060?\u0060 to apply a class (\u0060sp-field-severity--warning\u0060) to the parent \u0060\u003Cdiv /\u003E\u0060 element when the  value in the current field is less than or equal to 70.  This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it\u0027s greater than 70.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-conditional-format",
    "longDescription": [
      "This example uses the conditional operator \u0060?\u0060 to apply a class (\u0060sp-field-severity--warning\u0060) to the parent \u0060\u003Cdiv /\u003E\u0060 element when the  value in the current field is less than or equal to 70.  This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it\u0027s greater than 70."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-conditional-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-data-bar",
    "reponame": "number-data-bar",
    "source": "pnp",
    "title": "Format a number column as a data bar",
    "shortDescription": "These formats apply \u0060background-color\u0060 and \u0060border-top\u0060 styles to create a data bar visualization of \u0060@currentField\u0060, which is a number field. These styles are applied using the special column formatting class \u0060sp-field-dataBars\u0060. The bars are sized differently for different values based on the way the \u0060width\u0060 attribute of the main \u0060div\u0060 is set.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-data-bar",
    "longDescription": [
      "These formats apply \u0060background-color\u0060 and \u0060border-top\u0060 styles to create a data bar visualization of \u0060@currentField\u0060, which is a number field. These styles are applied using the special column formatting class \u0060sp-field-dataBars\u0060. The bars are sized differently for different values based on the way the \u0060width\u0060 attribute of the main \u0060div\u0060 is set."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2019-05-17T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-data-bar/assets/screenshot-percent.png?raw=true",
        "alt": "screenshot-percent"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-data-bar/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-gauge",
    "reponame": "number-gauge",
    "source": "pnp",
    "title": "Number Gauge",
    "shortDescription": "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-gauge",
    "longDescription": [
      "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive."
    ],
    "creationDateTime": "2019-07-10T00:00:00.000Z",
    "updateDateTime": "2019-07-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gauge/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gauge/assets/screenshotReversed.png?raw=true",
        "alt": "screenshotReversed"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-icon-progressbar",
    "reponame": "number-icon-progressbar",
    "source": "pnp",
    "title": "Icon Progress Bar",
    "shortDescription": "This sample demonstrates creating a progress bar using icons. The number column represents the stage in a process and the format provides a visual indicator of where an item is in relation to the process by showing the previous steps as completed, highlighting the current step, and indicating which steps remain.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-icon-progressbar",
    "longDescription": [
      "This sample demonstrates creating a progress bar using icons. The number column represents the stage in a process and the format provides a visual indicator of where an item is in relation to the process by showing the previous steps as completed, highlighting the current step, and indicating which steps remain."
    ],
    "creationDateTime": "2019-03-01T00:00:00.000Z",
    "updateDateTime": "2019-03-01T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-icon-progressbar/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Julien Seguin",
        "pictureUrl": "https://github.com/Julien Seguin.png",
        "name": "Julien Seguin"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-piechart",
    "reponame": "number-piechart",
    "source": "pnp",
    "title": "Formatting percentage number (%) to pie chart.",
    "shortDescription": "This example renders whole pie in neutralLight with radius 50 and the number% (column value) as a slice of the pie in blue using \u0060\u003Csvg\u003E\u0060 with \u0060\u003Cpath\u003E\u0060 tags. The number% displayed at the bottom of the pie in neutralPrimary.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-piechart",
    "longDescription": [
      "This example renders whole pie in neutralLight with radius 50 and the number% (column value) as a slice of the pie in blue using \u0060\u003Csvg\u003E\u0060 with \u0060\u003Cpath\u003E\u0060 tags. The number% displayed at the bottom of the pie in neutralPrimary."
    ],
    "creationDateTime": "2017-12-13T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "cos"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Cards"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-piechart/assets/number-piechart.PNG?raw=true",
        "alt": "number-piechart"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaronmi",
        "pictureUrl": "https://github.com/aaronmi.png",
        "name": "Aaron Miao"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-quiz-smiley-face",
    "reponame": "number-quiz-smiley-face",
    "source": "pnp",
    "title": "Smiley faces for good quiz results",
    "shortDescription": "This allows teachers to show smiley faces next to quiz results similar to how they do it on paper. The number (based on a 0-100 score) will indicate if its a smiley or frown, which come from the Offie UI Fabric Icon set. If the number is above 90 the student gets a super smiley (\u0060Emoji\u0060), above 75 regular smile (\u0060Emoji2\u0060), above 60 neutral smiley (\u0060EmojiNeutral\u0060), below 60 a frown (\u0060EmojiDisappointed\u0060), and anything else gets an \u0060Unknown\u0060.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-quiz-smiley-face",
    "longDescription": [
      "This allows teachers to show smiley faces next to quiz results similar to how they do it on paper. The number (based on a 0-100 score) will indicate if its a smiley or frown, which come from the Offie UI Fabric Icon set. If the number is above 90 the student gets a super smiley (\u0060Emoji\u0060), above 75 regular smile (\u0060Emoji2\u0060), above 60 neutral smiley (\u0060EmojiNeutral\u0060), below 60 a frown (\u0060EmojiDisappointed\u0060), and anything else gets an \u0060Unknown\u0060."
    ],
    "creationDateTime": "2017-12-01T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-quiz-smiley-face/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Maher256",
        "pictureUrl": "https://github.com/Maher256.png",
        "name": "Matt Maher"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-trending-icon",
    "reponame": "number-trending-icon",
    "source": "pnp",
    "title": "Show trending up/trending down icons ",
    "shortDescription": "These formats rely on two number fields, \u0060Before\u0060 and \u0060After\u0060, for which the values can be compared. They show the appropriate trending icon next to the value of the \u0060After\u0060 field, depending on that field\u0027s value compared to the value in \u0060Before\u0060. The \u0060sp-field-trending--up\u0060 class is used when \u0060After\u0060\u0027s value is higher; the \u0060sp-field-trending--down\u0060 class is used when \u0060After\u0060\u0027s value is lower. No icon is shown when they are equal (padding is added to keep consistent alignment).",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-trending-icon",
    "longDescription": [
      "These formats rely on two number fields, \u0060Before\u0060 and \u0060After\u0060, for which the values can be compared. They show the appropriate trending icon next to the value of the \u0060After\u0060 field, depending on that field\u0027s value compared to the value in \u0060Before\u0060. The \u0060sp-field-trending--up\u0060 class is used when \u0060After\u0060\u0027s value is higher; the \u0060sp-field-trending--down\u0060 class is used when \u0060After\u0060\u0027s value is lower. No icon is shown when they are equal (padding is added to keep consistent alignment)."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-trending-icon/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-trending-icon/assets/screenshotWithDifference.png?raw=true",
        "alt": "screenshotWithDifference"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-number-using-modulo-publish",
    "reponame": "number-using-modulo-publish",
    "source": "pnp",
    "title": "Publishing Status",
    "shortDescription": "Sample contains an example of using the modulo math expression for highlighting \u0027published\u0027, \u0027published with draft\u0027 and \u0027draft with no published versions\u0027 of pages",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-using-modulo-publish",
    "longDescription": [
      "Sample contains an example of using the modulo math expression for highlighting \u0027published\u0027, \u0027published with draft\u0027 and \u0027draft with no published versions\u0027 of pages"
    ],
    "creationDateTime": "2019-05-20T00:00:00.000Z",
    "updateDateTime": "2019-05-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Number"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "Modulus %"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-using-modulo-publish/assets/example-after.jpg?raw=true",
        "alt": "example-after"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/number-using-modulo-publish/assets/example-before.jpg?raw=true",
        "alt": "example-before"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "pkbullock",
        "pictureUrl": "https://github.com/pkbullock.png",
        "name": "Paul Bullock"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-person-currentuser",
    "reponame": "person-currentuser",
    "source": "pnp",
    "title": "Highlight the current user",
    "shortDescription": "This sample uses the \u0060@me\u0060 keyword to check if the person field is the current user and shows that person using a different color and weight. This is a dynamic check that will always highlight the user using the list (not the creater of the format). This template could easily be extended to apply different/additional styles or icons as desired by simply copying the same expression logic for other fields.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/person-currentuser",
    "longDescription": [
      "This sample uses the \u0060@me\u0060 keyword to check if the person field is the current user and shows that person using a different color and weight. This is a dynamic check that will always highlight the user using the list (not the creater of the format). This template could easily be extended to apply different/additional styles or icons as desired by simply copying the same expression logic for other fields."
    ],
    "creationDateTime": "2018-03-20T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Person"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@me"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "People"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/person-currentuser/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-person-mailto",
    "reponame": "person-mailto",
    "source": "pnp",
    "title": "Person Mail To Link",
    "shortDescription": "You can use column formatting to render quick action links next to fields. This sample, intended for a person field, renders two elements inside the parent \u0060\u003Cdiv /\u003E\u0060 element:",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/person-mailto",
    "longDescription": [
      "You can use column formatting to render quick action links next to fields. This sample, intended for a person field, renders two elements inside the parent \u0060\u003Cdiv /\u003E\u0060 element:"
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Person"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/person-mailto/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-person-roundimage-format",
    "reponame": "person-roundimage-format",
    "source": "pnp",
    "title": "Display a person\u0027s profile picture in a circle",
    "shortDescription": "This sample applies styles to a parent \u0060div\u0060 element and a child \u0060img\u0060 element to show a person\u0027s profile picture in a circle.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/person-roundimage-format",
    "longDescription": [
      "This sample applies styles to a parent \u0060div\u0060 element and a child \u0060img\u0060 element to show a person\u0027s profile picture in a circle."
    ],
    "creationDateTime": "2018-03-21T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Person"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "People"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/person-roundimage-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-picture-roundimage-format",
    "reponame": "picture-roundimage-format",
    "source": "pnp",
    "title": "Display a picture column as a circle",
    "shortDescription": "This sample applies styles to a parent \u0060div\u0060 element and a child \u0060img\u0060 element to show a picture column in a circle.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/picture-roundimage-format",
    "longDescription": [
      "This sample applies styles to a parent \u0060div\u0060 element and a child \u0060img\u0060 element to show a picture column in a circle."
    ],
    "creationDateTime": "2018-03-21T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Picture"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/picture-roundimage-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-bing-map",
    "reponame": "text-bing-map",
    "source": "pnp",
    "title": "Displays a customizable Bing Map image for a given location in a Multi-Line of Text Field",
    "shortDescription": "This template uses Bing Maps\u0027 [staticmap API](https://docs.microsoft.com/en-us/bingmaps) which generates an image using a parameterized URL. The template only uses the most basic features of map location and image size. To see all of the available option see the static map documentation: ([static map](https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map)",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-bing-map",
    "longDescription": [
      "This template uses Bing Maps\u0027 [staticmap API](https://docs.microsoft.com/en-us/bingmaps) which generates an image using a parameterized URL. The template only uses the most basic features of map location and image size. To see all of the available option see the static map documentation: ([static map](https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map)"
    ],
    "creationDateTime": "2019-02-04T00:00:00.000Z",
    "updateDateTime": "2019-02-04T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-bing-map/assets/text-bing-map-Screenshot.png?raw=true",
        "alt": "text-bing-map-Screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aprildunnam",
        "pictureUrl": "https://github.com/aprildunnam.png",
        "name": "April Dunham"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-conditional-format",
    "reponame": "text-conditional-format",
    "source": "pnp",
    "title": "Conditional formatting based on the value in a text or choice field",
    "shortDescription": "You can apply conditional formatting to text or choice fields that might contain a fixed set of values. The following example applies different classes depending on whether the value of the field is Done, In Review, Blocked, or another value. This example applies a CSS class (\u0060sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--blocked\u0060) to the  \u0060\u003Cdiv /\u003E\u0060 based on the field\u0027s value. This is what determines the element\u0027s background color. A class of \u0060ms-fontColor-neutralSecondary\u0060 is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a \u0060\u003Cspan /\u003E\u0060 element with an \u0060iconName\u0060 attribute. This attribute applies another CSS class to that \u0060\u003Cspan /\u003E\u0060 that shows an [Office UI Fabric](https://dev.office.com/fabric#/) icon inside that element. Finally, another \u0060\u003Cspan /\u003E\u0060 element is outputted that contains the value inside the field.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-conditional-format",
    "longDescription": [
      "You can apply conditional formatting to text or choice fields that might contain a fixed set of values. The following example applies different classes depending on whether the value of the field is Done, In Review, Blocked, or another value. This example applies a CSS class (\u0060sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--blocked\u0060) to the  \u0060\u003Cdiv /\u003E\u0060 based on the field\u0027s value. This is what determines the element\u0027s background color. A class of \u0060ms-fontColor-neutralSecondary\u0060 is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a \u0060\u003Cspan /\u003E\u0060 element with an \u0060iconName\u0060 attribute. This attribute applies another CSS class to that \u0060\u003Cspan /\u003E\u0060 that shows an [Office UI Fabric](https://dev.office.com/fabric#/) icon inside that element. Finally, another \u0060\u003Cspan /\u003E\u0060 element is outputted that contains the value inside the field."
    ],
    "creationDateTime": "2017-11-02T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-conditional-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ldemaris",
        "pictureUrl": "https://github.com/ldemaris.png",
        "name": "Lincoln DeMaris"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-contains",
    "reponame": "text-contains",
    "source": "pnp",
    "title": "Text Contains",
    "shortDescription": "This sample demonstrates using the \u0060indexOf\u0060 function (O365 only) to test if text contains a given value. The sample also uses the \u0060toLowerCase\u0060 function to ensure the contains condition is case-insensitive. In this sample, if the text of the current field contains the word _\u0022dead\u0022_ a class is applied to turn the text red.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-contains",
    "longDescription": [
      "This sample demonstrates using the \u0060indexOf\u0060 function (O365 only) to test if text contains a given value. The sample also uses the \u0060toLowerCase\u0060 function to ensure the contains condition is case-insensitive. In this sample, if the text of the current field contains the word _\u0022dead\u0022_ a class is applied to turn the text red."
    ],
    "creationDateTime": "2019-02-05T00:00:00.000Z",
    "updateDateTime": "2019-02-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "indexOf"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Text Conditional"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-contains/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-isbn-image",
    "reponame": "text-isbn-image",
    "source": "pnp",
    "title": "Formatting an ISBN (text column) to book cover image. Images are retrieved by calling Open Library Covers API.",
    "shortDescription": "This example retrieves book cover images based on their ISBN numbers by utilizing the [Open Library Covers API](https://openlibrary.org/dev/docs/api/covers). The API works by building a cover image URL with the ISBN.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-isbn-image",
    "longDescription": [
      "This example retrieves book cover images based on their ISBN numbers by utilizing the [Open Library Covers API](https://openlibrary.org/dev/docs/api/covers). The API works by building a cover image URL with the ISBN."
    ],
    "creationDateTime": "2017-11-27T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-isbn-image/assets/text-isbn-image.png?raw=true",
        "alt": "text-isbn-image"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaronmi",
        "pictureUrl": "https://github.com/aaronmi.png",
        "name": "Aaron Miao"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-local-image",
    "reponame": "text-local-image",
    "source": "pnp",
    "title": "Demonstrates how to reference a local image",
    "shortDescription": "This sample provides multiple formats to illustrate the options available to reference local image files. The primary purpose is to demonstrate the usage of \u0060@currentWeb\u0060 (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-local-image",
    "longDescription": [
      "This sample provides multiple formats to illustrate the options available to reference local image files. The primary purpose is to demonstrate the usage of \u0060@currentWeb\u0060 (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view."
    ],
    "creationDateTime": "2018-01-10T00:00:00.000Z",
    "updateDateTime": "2018-01-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-local-image/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-local-link",
    "reponame": "text-local-link",
    "source": "pnp",
    "title": "Demonstrates how to link to a local resource",
    "shortDescription": "This sample provides multiple formats to illustrate the options available to link to local resources. The primary purpose is to demonstrate the usage of \u0060@currentWeb\u0060 (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view. This format links to other lists, but this could just as easily be specific pages/files/etc. on a site.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-local-link",
    "longDescription": [
      "This sample provides multiple formats to illustrate the options available to link to local resources. The primary purpose is to demonstrate the usage of \u0060@currentWeb\u0060 (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view. This format links to other lists, but this could just as easily be specific pages/files/etc. on a site."
    ],
    "creationDateTime": "2018-01-10T00:00:00.000Z",
    "updateDateTime": "2018-01-10T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-PLACEHOLDER-TOKEN",
        "value": "@currentWeb"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Dynamic Links"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-local-link/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-ryg-status-indicator",
    "reponame": "text-ryg-status-indicator",
    "source": "pnp",
    "title": "Traffic Light (Red-Yellow-Green) Status Indicator",
    "shortDescription": "This sample displays a traffic light style (Red-Yellow-Green) status indicator based on the value of a choice/text column (to use a lookup column, switch all occurrences of \u0060@currentField\u0060 to \u0060@currentField.lookupValue\u0060).",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-ryg-status-indicator",
    "longDescription": [
      "This sample displays a traffic light style (Red-Yellow-Green) status indicator based on the value of a choice/text column (to use a lookup column, switch all occurrences of \u0060@currentField\u0060 to \u0060@currentField.lookupValue\u0060)."
    ],
    "creationDateTime": "2017-11-27T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-ryg-status-indicator/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Travis-Constellation",
        "pictureUrl": "https://github.com/Travis-Constellation.png",
        "name": "Travis Lingenfelder"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-startswith-callingcodes",
    "reponame": "text-startswith-callingcodes",
    "source": "pnp",
    "title": "Text StartsWith Calling Codes",
    "shortDescription": "This sample demonstrates using the \u0060indexOf\u0060 function (O365 only) to test if text starts with a given value. Using the international calling code at the start of a phone number, the correct country\u0027s flag is shown next to the phone number. The same nested conditionals are also used for the tooltip.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-startswith-callingcodes",
    "longDescription": [
      "This sample demonstrates using the \u0060indexOf\u0060 function (O365 only) to test if text starts with a given value. Using the international calling code at the start of a phone number, the correct country\u0027s flag is shown next to the phone number. The same nested conditionals are also used for the tooltip."
    ],
    "creationDateTime": "2019-02-05T00:00:00.000Z",
    "updateDateTime": "2019-02-05T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-OPERATOR",
        "value": "indexOf"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Text Conditional"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-startswith-callingcodes/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-strikethrough",
    "reponame": "text-strikethrough",
    "source": "pnp",
    "title": "Strikethrough on Completion",
    "shortDescription": "Classic task lists add a strikethrough style to the task name when the task is marked as completed. This sample shows how to achieve this in a modern list view.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-strikethrough",
    "longDescription": [
      "Classic task lists add a strikethrough style to the task name when the task is marked as completed. This sample shows how to achieve this in a modern list view."
    ],
    "creationDateTime": "2018-08-18T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Status / Progress"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-strikethrough/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-text-wrap-format",
    "reponame": "text-wrap-format",
    "source": "pnp",
    "title": "Formatting column with long text to multiple-line with word wrap.",
    "shortDescription": "With modern document libraries and lists, lengthy multi-line fields no longer show text in full (a fade is provided). This isn\u0027t always desired, so this sample demonstrates rending long text to mutilple lines with word wrap, similar to classic mode.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/text-wrap-format",
    "longDescription": [
      "With modern document libraries and lists, lengthy multi-line fields no longer show text in full (a fade is provided). This isn\u0027t always desired, so this sample demonstrates rending long text to mutilple lines with word wrap, similar to classic mode."
    ],
    "creationDateTime": "2017-12-13T00:00:00.000Z",
    "updateDateTime": "2020-05-27T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "General"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/text-wrap-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaronmi",
        "pictureUrl": "https://github.com/aaronmi.png",
        "name": "Aaron Miao"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-yesno-checkbox",
    "reponame": "yesno-checkbox",
    "source": "pnp",
    "title": "Yes/No Checkbox",
    "shortDescription": "This sample uses [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/yesno-checkbox",
    "longDescription": [
      "This sample uses [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors."
    ],
    "creationDateTime": "2018-08-18T00:00:00.000Z",
    "updateDateTime": "2018-08-18T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Yes/No"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/yesno-checkbox/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-yesno-checkmark",
    "reponame": "yesno-checkmark",
    "source": "pnp",
    "title": "Yes/No Column Check Mark",
    "shortDescription": "This example displays a check mark when the value of a Yes/No column is equal to Yes. This field uses the \u0060iconName\u0060 attribute to display the \u0060CheckMark\u0060 [Office UI Fabric predefined icon](https://developer.microsoft.com/en-us/fabric#/styles/icons).",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/yesno-checkmark",
    "longDescription": [
      "This example displays a check mark when the value of a Yes/No column is equal to Yes. This field uses the \u0060iconName\u0060 attribute to display the \u0060CheckMark\u0060 [Office UI Fabric predefined icon](https://developer.microsoft.com/en-us/fabric#/styles/icons)."
    ],
    "creationDateTime": "2017-11-27T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Yes/No"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/yesno-checkmark/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Travis-Constellation",
        "pictureUrl": "https://github.com/Travis-Constellation.png",
        "name": "Travis Lingenfelder"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-yesno-checkmark-format",
    "reponame": "yesno-checkmark-format",
    "source": "pnp",
    "title": "Formatting Yes/No field to check mark based on the value in the field",
    "shortDescription": "You can apply conditional formatting to Yes/No fields. This sample applies different classes depending on whether the value of the field is Yes (true), No (false), or Blank. This example applies one of the column formatting [predefined classes](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#predefined-classes) (\u0060sp-field-severity--good\u0060,\u0060sp-field-severity--low\u0060, or \u0060sp-field-severity--blocked\u0060) to the root \u0060\u003Cdiv /\u003E\u0060 based on the field\u0027s value. This is what determines the element\u0027s background color. A class of \u0060ms-fontColor-neutralSecondary\u0060 is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a \u0060\u003Cspan /\u003E\u0060 element with an \u0060iconName\u0060 attribute that shows an [Office UI Fabric](https://developer.microsoft.com/en-us/fabric#/styles/icons) icon inside that element.",
    "url": "https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/yesno-checkmark-format",
    "longDescription": [
      "You can apply conditional formatting to Yes/No fields. This sample applies different classes depending on whether the value of the field is Yes (true), No (false), or Blank. This example applies one of the column formatting [predefined classes](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#predefined-classes) (\u0060sp-field-severity--good\u0060,\u0060sp-field-severity--low\u0060, or \u0060sp-field-severity--blocked\u0060) to the root \u0060\u003Cdiv /\u003E\u0060 based on the field\u0027s value. This is what determines the element\u0027s background color. A class of \u0060ms-fontColor-neutralSecondary\u0060 is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a \u0060\u003Cspan /\u003E\u0060 element with an \u0060iconName\u0060 attribute that shows an [Office UI Fabric](https://developer.microsoft.com/en-us/fabric#/styles/icons) icon inside that element."
    ],
    "creationDateTime": "2017-11-22T00:00:00.000Z",
    "updateDateTime": "2018-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "LIST-COLUMN-TYPE",
        "value": "Yes/No"
      },
      {
        "key": "LIST-CATEGORY",
        "value": "Icons"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint 2019, SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-list-formatting/blob/master/column-samples/yesno-checkmark-format/assets/yesno-checkmark-format.PNG?raw=true",
        "alt": "yesno-checkmark-format"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaronmi",
        "pictureUrl": "https://github.com/aaronmi.png",
        "name": "Aaron Miao"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-yesno-toggle-format",
    "reponame": "yesno-toggle-format",
    "source": "pnp",
    "title": "Yes/No Column Toggle",
    "shortDescription": "This sample demonstrates changing the value of the Yes/No column to a toggle. Three different versions of the sample are provided (Toggle, Icon, \u0026 Emoji). These toggles are NOT interactive.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-toggle-format",
    "longDescription": [
      "This sample demonstrates changing the value of the Yes/No column to a toggle. Three different versions of the sample are provided (Toggle, Icon, \u0026 Emoji). These toggles are NOT interactive."
    ],
    "creationDateTime": "2021-04-29T00:00:00.000Z",
    "updateDateTime": "2021-04-29T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Column"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-toggle-format/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Use column formatting to customize SharePoint",
        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-blank-header",
    "reponame": "blank-header",
    "source": "pnp",
    "title": "blank-header",
    "shortDescription": "blank-header",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/blank-header",
    "longDescription": [
      "blank-header"
    ],
    "creationDateTime": "2021-01-21T00:00:00.000Z",
    "updateDateTime": "2021-01-21T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-dashed-line-header",
    "reponame": "dashed-line-header",
    "source": "pnp",
    "title": "Dashed Line Header",
    "shortDescription": "This sample displays the \u0060Title\u0060 and \u0060Description\u0060 values in the heading and decorates them with dashed lines. If the \u0060Description\u0060 value is empty, it will be hidden.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/dashed-line-header",
    "longDescription": [
      "This sample displays the \u0060Title\u0060 and \u0060Description\u0060 values in the heading and decorates them with dashed lines. If the \u0060Description\u0060 value is empty, it will be hidden."
    ],
    "creationDateTime": "2021-02-07T00:00:00.000Z",
    "updateDateTime": "2021-02-07T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/assets/screenshot_text-center.png?raw=true",
        "alt": "screenshot_text-center"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/assets/screenshot_text-left.png?raw=true",
        "alt": "screenshot_text-left"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/assets/screenshot_text-right.png?raw=true",
        "alt": "screenshot_text-right"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-event-itinerary-header",
    "reponame": "event-itinerary-header",
    "source": "pnp",
    "title": "Event Itinerary Header",
    "shortDescription": "This sample shows a customized header for the item form used in the \u0022Event itinerary\u0022 list template.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/event-itinerary-header",
    "longDescription": [
      "This sample shows a customized header for the item form used in the \u0022Event itinerary\u0022 list template."
    ],
    "creationDateTime": "2021-01-31T00:00:00.000Z",
    "updateDateTime": "2021-01-31T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/event-itinerary-header/assets/listtemplates.png?raw=true",
        "alt": "listtemplates"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/event-itinerary-header/assets/screenshot.png?raw=true",
        "alt": "screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-status-header-footer",
    "reponame": "status-header-footer",
    "source": "pnp",
    "title": "status-header-footer",
    "shortDescription": "status-header-footer",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/status-header-footer",
    "longDescription": [
      "status-header-footer"
    ],
    "creationDateTime": "2021-01-31T00:00:00.000Z",
    "updateDateTime": "2021-08-20T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-workflow-progress-header",
    "reponame": "workflow-progress-header",
    "source": "pnp",
    "title": "Workflow Progress Header",
    "shortDescription": "This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/workflow-progress-header",
    "longDescription": [
      "This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit."
    ],
    "creationDateTime": "2021-02-01T00:00:00.000Z",
    "updateDateTime": "2021-02-01T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/workflow-progress-header/assets/screen_capture.gif?raw=true",
        "alt": "screen_capture"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tecchan1107",
        "pictureUrl": "https://github.com/tecchan1107.png",
        "name": "Tetsuya Kawahara"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  },
  {
    "name": "pnp-list-formatting-wrapped-body",
    "reponame": "wrapped-body",
    "source": "pnp",
    "title": "wrapped-body",
    "shortDescription": "wrapped-body",
    "url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/wrapped-body",
    "longDescription": [
      "wrapped-body"
    ],
    "creationDateTime": "2021-01-21T00:00:00.000Z",
    "updateDateTime": "2021-01-21T00:00:00.000Z",
    "products": [
      "SharePoint",
      "Microsoft Lists"
    ],
    "metadata": [
      {
        "key": "LIST-SAMPLE-TYPE",
        "value": "Form"
      },
      {
        "key": "SHAREPOINT-COMPATIBILITY",
        "value": "SharePoint Online"
      }
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Configure the list form",
        "description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
      },
      {
        "name": "Show or hide columns in a list or library form",
        "description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn\u0027t affect the column or the data in the column, as it would if you delete it.",
        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
      }
    ]
  }
]