{ "version": 1, "samples": [ { "id": "column-samples/generic-status-badges", "family": "column", "slug": "generic-status-badges", "title": "Status Column Badges", "description": "This sample uses SharePoint column formatting to display status values as simple, color-coded badges. It provides a quick visual indicator that makes list items easier to scan.", "longDescription": [ "This sample uses SharePoint column formatting to display status values as simple, color-coded badges. It provides a quick visual indicator that makes list items easier to scan." ], "created": "2026-09-22T00:00:00.000Z", "updated": "2026-09-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "LeulMesfin", "pictureUrl": "https://github.com/LeulMesfin.png", "name": "Leul Mesfin", "key": "leulmesfin" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-status-badges", "route": "samples/column/generic-status-badges/", "preview": "generated/previews/column-generic-status-badges.webp", "previewAlt": "Status Column Badges formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-status-badges/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-status-badges.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-status-badges/generic-status-badges.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-status-badges/generic-status-badges.json", "sha256": "710968c638d23b2fbef540fa72d603e691b667e3e4fdc52e4cf9ea1291a0cb8e" } ] }, { "id": "view-samples/responsive-people-profile-cards", "family": "view", "slug": "responsive-people-profile-cards", "title": "Responsive People Profile Cards", "description": "Modern responsive profile cards displaying Microsoft 365 profile pictures, names, roles, email addresses, and departments.", "longDescription": [ "This sample transforms a SharePoint Gallery view into modern people profile cards. It includes Microsoft 365 profile pictures, native person hover cards, optional field handling, and role-to-title fallback logic." ], "created": "2026-09-10T00:00:00.000Z", "updated": "2026-09-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "fillHorizontally", "hideSelection", "defaultHoverField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "LeulMesfin", "pictureUrl": "https://github.com/LeulMesfin.png", "name": "Leul Mesfin", "key": "leulmesfin" } ], "references": [ { "name": "Use view formatting to customize SharePoint", "description": "Learn how to use JSON view formatting to customize how SharePoint list items are displayed.", "url": "https://learn.microsoft.com/sharepoint/dev/declarative-customization/view-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/responsive-people-profile-cards", "route": "samples/view/responsive-people-profile-cards/", "preview": "generated/previews/view-responsive-people-profile-cards.webp", "previewAlt": "Responsive People Profile Cards", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/responsive-people-profile-cards/assets/screenshot.png", "alt": "Responsive People Profile Cards" } ], "definitions": [ { "filename": "responsive-people-profile-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/responsive-people-profile-cards/responsive-people-profile-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/responsive-people-profile-cards/responsive-people-profile-cards.json", "sha256": "b9f5908e6fe9c3b2067aed61baabd05819e9c617d08e964c85896a15dafac667" } ] }, { "id": "view-samples/commandbar-hide-all", "family": "view", "slug": "commandbar-hide-all", "title": "Hide All Buttons on Command Bar", "description": "This sample demonstrates hiding all buttons on the command bar.", "longDescription": [ "This sample demonstrates hiding all buttons on the command bar." ], "created": "2024-12-24T00:00:00.000Z", "updated": "2026-07-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "CommandBar Customization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "gitjego", "pictureUrl": "https://github.com/gitjego.png", "name": "gitjego", "key": "gitjego" }, { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/commandbar-hide-all", "route": "samples/view/commandbar-hide-all/", "preview": "generated/previews/view-commandbar-hide-all.webp", "previewAlt": "Hide All Buttons on Command Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/commandbar-hide-all/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/commandbar-hide-all/assets/document-library.png", "alt": "screenshot" } ], "definitions": [ { "filename": "commandbar-hide-all.json", "target": "View formatting", "schemaIssues": [ "/commandBarProps/commands/9/key must be equal to one of the allowed values" ], "download": "generated/definitions/view-samples/commandbar-hide-all/commandbar-hide-all.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/commandbar-hide-all/commandbar-hide-all.json", "sha256": "5fc4c63a00bf334b6b9ffc91ba024b56f35d2f1360ff62d5d2877bb7e8d8020f" } ] }, { "id": "view-samples/key-dates-timeline-checklist", "family": "view", "slug": "key-dates-timeline-checklist", "title": "Key Dates Timeline Checklist", "description": "A modern horizontal timeline view that displays key dates or milestones as monthly columns.", "longDescription": [ "A modern horizontal timeline view that displays key dates or milestones as monthly columns. Each month shows a progress bar and up to 5 checklist items that users can mark as completed directly in the view. " ], "created": "2026-07-28T00:00:00.000Z", "updated": "2026-07-28T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Raghav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/key-dates-timeline-checklist", "route": "samples/view/key-dates-timeline-checklist/", "preview": "generated/previews/view-key-dates-timeline-checklist.webp", "previewAlt": "Key Dates Timeline Checklist formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/key-dates-timeline-checklist/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "key-dates-timeline-checklist.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/key-dates-timeline-checklist/key-dates-timeline-checklist.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/key-dates-timeline-checklist/key-dates-timeline-checklist.json", "sha256": "960a48273271719664a84349467147c9d20a14535fb427c728f5a121d4436c3d" } ] }, { "id": "form-samples/countdown-timer-header", "family": "form", "slug": "countdown-timer-header", "title": "Countdown Timer Header", "description": "A form header formatter that displays days remaining until a due date with color-coded urgency: green (calm, >7 days), amber (warning, 4-7 days), red (urgent, 1-3 days), and crimson (overdue).", "longDescription": [ "A form header formatter that displays days remaining until a due date with color-coded urgency: green (calm, >7 days), amber (warning, 4-7 days), red (urgent, 1-3 days), and crimson (overdue).", "The header shows the item title on the left and a countdown badge on the right with the day count, urgency label (DAYS LEFT / DUE TODAY / OVERDUE), and formatted due date.", "All conditional logic is driven by date arithmetic on the DueDate column using the @now token." ], "created": "2026-07-23T00:00:00.000Z", "updated": "2026-07-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "floor", "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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't 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": "Use formatting to customize SharePoint — Date functions", "description": "Documentation on @now, floor(), and date arithmetic in SharePoint formatting expressions.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/formatting-syntax-reference" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/countdown-timer-header", "route": "samples/form/countdown-timer-header/", "preview": "generated/previews/form-countdown-timer-header.webp", "previewAlt": "Countdown Timer Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/countdown-timer-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "countdown-timer-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/countdown-timer-header/countdown-timer-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/countdown-timer-header/countdown-timer-header.json", "sha256": "8c990e7420ce05dfe22872046676366c8bf8460e6bf9b3445ca7f907a61fae32" } ] }, { "id": "view-samples/sports-card", "family": "view", "slug": "sports-card", "title": "Sports Card", "description": "This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into vertical FIFA / NBA style trading cards. Each card has a header bar with sport name and jersey number, a hero area with country badge and player silhouette, an accent-coloured name band, a star rating, three labelled stat bars and a short description. Colours, icons and stat values are all driven from list columns so each card can be re-skinned per item." ], "created": "2026-07-23T00:00:00.000Z", "updated": "2026-07-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/sports-card", "route": "samples/view/sports-card/", "preview": "generated/previews/view-sports-card.webp", "previewAlt": "Sports Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/sports-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "sports-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/sports-card/sports-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/sports-card/sports-card.json", "sha256": "7f43dcd9f742563d28bdc47a18bbfc947c4e68befe107ab9f594a65b31039441" } ] }, { "id": "view-samples/key-dates-timeline", "family": "view", "slug": "key-dates-timeline", "title": "Key Dates Timeline", "description": "Horizontal timeline view for budget key dates and milestones with hover cards", "longDescription": [ "This sample creates a clean horizontal timeline visualization perfect for budget cycles, project milestones, or any date-based key events." ], "created": "2026-07-20T00:00:00.000Z", "updated": "2026-07-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-border-purpleDark", "ms-bgColor-purpleDark", "sp-card-urlContent" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Raghavan", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/key-dates-timeline", "route": "samples/view/key-dates-timeline/", "preview": "generated/previews/view-key-dates-timeline.webp", "previewAlt": "Key Dates Timeline formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/key-dates-timeline/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "key-dates-timeline.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/key-dates-timeline/key-dates-timeline.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/key-dates-timeline/key-dates-timeline.json", "sha256": "b0c06557cb615ca5c188df86cc0c158988747d743b95522459ef412a8574fe1a" } ] }, { "id": "column-samples/generic-missing-information-callout", "family": "column", "slug": "generic-missing-information-callout", "title": "Missing Information Callout", "description": "The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.", "longDescription": [ "The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value." ], "created": "2026-07-12T00:00:00.000Z", "updated": "2026-07-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "ojopiyo", "pictureUrl": "https://github.com/ojopiyo.png", "name": "Josiah Opiyo", "key": "ojopiyo" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-missing-information-callout", "route": "samples/column/generic-missing-information-callout/", "preview": "generated/previews/column-generic-missing-information-callout.webp", "previewAlt": "Missing Information Callout formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-missing-information-callout/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-missing-information-callout.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-missing-information-callout/generic-missing-information-callout.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-missing-information-callout/generic-missing-information-callout.json", "sha256": "d0f05c32d949d0f0ca2a1de21bc7f0b5322a223aec9f8f86b5f41fc92b7e379f" } ] }, { "id": "view-samples/credit-card", "family": "view", "slug": "credit-card", "title": "Credit / Loyalty Card", "description": "Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into realistic credit / loyalty cards. Each item renders as a plastic card with a brand name, tier pill, EMV chip, contactless symbol, embossed-style card number, cardholder name, expiry date, and a network logo. The card colour automatically adapts to the Tier value (Standard, Gold, Platinum, Black, Premium) by reading a column-driven TierColor value, so each card can be styled independently." ], "created": "2026-06-13T00:00:00.000Z", "updated": "2026-06-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/credit-card", "route": "samples/view/credit-card/", "preview": "generated/previews/view-credit-card.webp", "previewAlt": "Credit / Loyalty Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/credit-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "credit-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/credit-card/credit-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/credit-card/credit-card.json", "sha256": "0f4dad87ca43c2016773f85bee8e0d3d3d1ebc0a0ea72bd9fd786cf67b72fb70" } ] }, { "id": "view-samples/spotify-now-playing", "family": "view", "slug": "spotify-now-playing", "title": "Spotify Now Playing", "description": "Transforms list items into Spotify-style 'now playing' cards with album-art block, status row, track / artist / album, a horizontal progress bar with elapsed and total time, and play / like controls.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into Spotify-style 'now playing' cards. Each item shows an album-art block, a status row with a coloured dot, the track title, artist, and album, a horizontal progress bar with elapsed and total time, and a play / like control row. Colours and icons are column-driven so each item can be styled independently. The play button opens the configured track URL in a new tab, and the heart icon toggles like / unlike directly on the list item via a setValue customRowAction." ], "created": "2026-05-12T00:00:00.000Z", "updated": "2026-05-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/spotify-now-playing", "route": "samples/view/spotify-now-playing/", "preview": "generated/previews/view-spotify-now-playing.webp", "previewAlt": "Spotify Now Playing formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/spotify-now-playing/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "spotify-now-playing.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/2/children/0/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/spotify-now-playing/spotify-now-playing.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/spotify-now-playing/spotify-now-playing.json", "sha256": "bc572be5c9ba0581515c8758eca7f73162e7758a1277a2032c7a8948ef97d98c" } ] }, { "id": "view-samples/movie-ticket-stub", "family": "view", "slug": "movie-ticket-stub", "title": "Movie Ticket Stub", "description": "This SharePoint JSON view formatting sample transforms list items into realistic movie ticket stubs.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into realistic movie ticket stubs." ], "created": "2026-05-11T00:00:00.000Z", "updated": "2026-05-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/movie-ticket-stub", "route": "samples/view/movie-ticket-stub/", "preview": "generated/previews/view-movie-ticket-stub.webp", "previewAlt": "Movie Ticket Stub formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/movie-ticket-stub/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "movie-ticket-stub.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/movie-ticket-stub/movie-ticket-stub.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/movie-ticket-stub/movie-ticket-stub.json", "sha256": "65a498cc77c3d9bfb2ae1c23c4741545d7bc4b7f0f5c1cb9fe1f90657af0e2ca" } ] }, { "id": "view-samples/vinyl-record", "family": "view", "slug": "vinyl-record", "title": "Vinyl Record / Album Sleeve", "description": "This SharePoint JSON view formatting sample transforms list items into vinyl record album cards with a sleeve, a record peeking out, and a metadata column.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into vinyl record album cards.", "Each item renders as an album sleeve with a vinyl record sliding out, plus a metadata column for year, genre, label, track count, rating and duration." ], "created": "2026-05-11T00:00:00.000Z", "updated": "2026-05-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/vinyl-record", "route": "samples/view/vinyl-record/", "preview": "generated/previews/view-vinyl-record.webp", "previewAlt": "Vinyl Record / Album Sleeve formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/vinyl-record/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "vinyl-record.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/vinyl-record/vinyl-record.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/vinyl-record/vinyl-record.json", "sha256": "cdca5f6c2a8ce20732fedab7627d7a52e1ad8a93b02be60a7854e74b1bc3ab36" } ] }, { "id": "column-samples/number-version-approval-button-drafts", "family": "column", "slug": "number-version-approval-button-drafts", "title": "Version Status and Approval Flow Button", "description": "Formats the SharePoint Version column as a combined status badge and approval flow trigger. Major versions (published) display a greyed-out non-clickable card. Minor versions display version status and a Submit for Approval button that triggers a Power Automate flow.", "longDescription": [ "Formats the SharePoint Version column as a combined status badge and approval flow trigger. Major versions (published) display a greyed-out non-clickable card. Minor versions display version status and a Submit for Approval button that triggers a Power Automate flow." ], "created": "2026-04-29T00:00:00.000Z", "updated": "2026-04-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Automate" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "floor", "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "bianca-git", "pictureUrl": "https://github.com/bianca-git.png", "name": "bianca-git", "key": "bianca-git" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-version-approval-button-drafts", "route": "samples/column/number-version-approval-button-drafts/", "preview": "generated/previews/column-number-version-approval-button-drafts.webp", "previewAlt": "Version Status and Approval Flow Button formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-version-approval-button-drafts/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-version-approval-button-drafts.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-version-approval-button-drafts/number-version-approval-button-drafts.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-version-approval-button-drafts/number-version-approval-button-drafts.json", "sha256": "45417c9f85c31c95e2f5133798839d15a406f38f127f77eb3692642d3d5d590c" } ] }, { "id": "column-samples/number-version-publish-status", "family": "column", "slug": "number-version-publish-status", "title": "Publishing Status", "description": "Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages", "longDescription": [ "Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages" ], "created": "2019-05-20T00:00:00.000Z", "updated": "2026-04-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-severity--good", "sp-field-severity--warning", "sp-field-severity--severeWarning" ] }, "authors": [ { "gitHubAccount": "pkbullock", "pictureUrl": "https://github.com/pkbullock.png", "name": "Paul Bullock", "key": "pkbullock" }, { "gitHubAccount": "bianca-git", "pictureUrl": "https://github.com/bianca-git.png", "name": "bianca-git", "key": "bianca-git" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-version-publish-status", "route": "samples/column/number-version-publish-status/", "preview": "generated/previews/column-number-version-publish-status.webp", "previewAlt": "Publishing Status formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-version-publish-status/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-version-publish-status/assets/screenshotBefore.png", "alt": "example-before" } ], "definitions": [ { "filename": "number-version-publish-status.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-version-publish-status/number-version-publish-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-version-publish-status/number-version-publish-status.json", "sha256": "8a9446a2c051d71d3e4271f34441aa52fcc7962b731d77969812b7ac24642a3a" } ] }, { "id": "column-samples/filename-open-document-in-view-mode", "family": "column", "slug": "filename-open-document-in-view-mode", "title": "Open Office Documents in View Mode", "description": "By default, office documents in a SharePoint document library open in Edit mode, switching the default open behaviour from Edit to View prevents common day-to-day issues.", "longDescription": [ "By default, office documents in a SharePoint document library open in Edit mode, switching the default open behaviour from Edit to View prevents common day-to-day issues." ], "created": "2026-04-12T00:00:00.000Z", "updated": "2026-04-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Document Library" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/filename-open-document-in-view-mode", "route": "samples/column/filename-open-document-in-view-mode/", "preview": "generated/previews/column-filename-open-document-in-view-mode.webp", "previewAlt": "Open Office Documents in View Mode formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/filename-open-document-in-view-mode/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "filename-open-document-in-view-mode.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/filename-open-document-in-view-mode/filename-open-document-in-view-mode.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/filename-open-document-in-view-mode/filename-open-document-in-view-mode.json", "sha256": "cd8647a4c549c491eb5d43c9ac3f971a8e164b20b8ef509b325e4d9de2c832b2" } ] }, { "id": "view-samples/flight-boarding-card", "family": "view", "slug": "flight-boarding-card", "title": "Flight Boarding Card", "description": "This SharePoint JSON view formatting sample transforms list items into realistic flight boarding cards.", "longDescription": [ "This SharePoint JSON view formatting sample transforms list items into realistic flight boarding cards." ], "created": "2026-03-14T00:00:00.000Z", "updated": "2026-03-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/flight-boarding-card", "route": "samples/view/flight-boarding-card/", "preview": "generated/previews/view-flight-boarding-card.webp", "previewAlt": "Flight Boarding Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/flight-boarding-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "boarding-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/flight-boarding-card/boarding-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/flight-boarding-card/boarding-card.json", "sha256": "8e2dccac3e97a04a161ee3ac0ee310df1a3261273edefa0c24ab7f3f40b8caf0" } ] }, { "id": "view-samples/bar-chart-diagram", "family": "view", "slug": "bar-chart-diagram", "title": "Bar Chart Diagram", "description": "This SharePoint JSON formatting script customizes the display of a list view row by rendering a horizontal bar chart directly in the list.", "longDescription": [ "This SharePoint JSON formatting script customizes the display of a list view row by rendering a horizontal bar chart directly in the list." ], "created": "2026-02-22T00:00:00.000Z", "updated": "2026-02-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "rowFormatter", "hideColumnHeader", "hideselection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "maschroeder-z", "pictureUrl": "https://github.com/maschroeder-z.png", "name": "Marc Andre Schröder-Zhou", "key": "maschroeder-z" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-chart-diagram", "route": "samples/view/bar-chart-diagram/", "preview": "generated/previews/view-bar-chart-diagram.webp", "previewAlt": "Bar Chart Diagram formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bar-chart-diagram/assets/bar-chart-diagram.png", "alt": "screenshot" } ], "definitions": [ { "filename": "bar-chart-diagram.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/bar-chart-diagram/bar-chart-diagram.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bar-chart-diagram/bar-chart-diagram.json", "sha256": "4d27b35dda453e77ad45c49d162f357404cf1036898a63d9c53567a335750948" } ] }, { "id": "view-samples/course-training-tiles", "family": "view", "slug": "course-training-tiles", "title": "Course Training Tile Cards", "description": "Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.", "longDescription": [ "Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view. Features 280×350px tile cards with course thumbnails, hover popup showing title and description, duration badge that auto-converts to hours/minutes, flag badge for highlighting courses, responsive images with fallback to default, and direct links to course content." ], "created": "2026-02-13T00:00:00.000Z", "updated": "2026-02-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-neutralLight", "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "sp-card-borderHighlight", "sp-card-container", "sp-card-content", "sp-card-defaultClickButton", "sp-card-displayColumnContainer", "sp-card-imageContainer", "sp-card-imagePreview", "sp-card-imagePreviewBackground", "sp-card-label", "sp-card-lastTextColumnContainer", "sp-card-multiline", "sp-card-previewColumnContainer", "sp-card-subContainer", "sp-css-borderColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/course-training-tiles", "route": "samples/view/course-training-tiles/", "preview": "generated/previews/view-course-training-tiles.webp", "previewAlt": "Course training tiles view", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/course-training-tiles/assets/screenshot.png", "alt": "Course training tiles view" } ], "definitions": [ { "filename": "course-training-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/course-training-tiles/course-training-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/course-training-tiles/course-training-tiles.json", "sha256": "df2afaf1534ccc8a607a44f7ca675305f6336fe339ec10049f4af36d4e4ed1fa" } ] }, { "id": "view-samples/picture-link-tiles-collapsible", "family": "view", "slug": "picture-link-tiles-collapsible", "title": "Picture Link Tiles - Collapsible", "description": "Creates a card-style tile view in a SharePoint list with expand and collapse functionality.", "longDescription": [ "Currently, Gallery view allows formatting of group headers, but it does not support built-in or JSON-based expand and collapse behavior like List view. This sample demonstrates how to render list items as cards, where you can choose which field values are displayed within each card and define target links." ], "created": "2026-01-07T00:00:00.000Z", "updated": "2026-01-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData" ], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-fontWeight-bold", "ms-fontColor-neutralPrimary", "ms-fontColor-themeDark", "ms-bgColor-themeLighter", "ms-bgColor-themeLighterAlt" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/picture-link-tiles-collapsible", "route": "samples/view/picture-link-tiles-collapsible/", "preview": "generated/previews/view-picture-link-tiles-collapsible.webp", "previewAlt": "Picture Link Tiles - Collapsible formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-link-tiles-collapsible/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "picture-link-tiles-collapsible.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0 must NOT have additional properties" ], "download": "generated/definitions/view-samples/picture-link-tiles-collapsible/picture-link-tiles-collapsible.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-link-tiles-collapsible/picture-link-tiles-collapsible.json", "sha256": "f65556aeef72e7a853ed07d8543f1ddb93ab4c5d117f0b88f32ad3db9a16b77e" } ] }, { "id": "column-samples/generic-http-flow-response", "family": "column", "slug": "generic-http-flow-response", "title": "Instant Flow Trigger with HTML Response via Embed Action", "description": "Trigger a Power Automate flow instantly with visual feedback using the embed action.", "longDescription": [ "Trigger a Power Automate flow instantly with visual feedback using the embed action." ], "created": "2025-11-23T00:00:00.000Z", "updated": "2025-11-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "embed" ], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "samyost", "pictureUrl": "https://github.com/samyost.png", "name": "Sam Yost", "key": "samyost" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-http-flow-response", "route": "samples/column/generic-http-flow-response/", "preview": "generated/previews/column-generic-http-flow-response.webp", "previewAlt": "Instant Flow Trigger with HTML Response via Embed Action formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-http-flow-response/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-http-flow-response.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-http-flow-response/generic-http-flow-response.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-http-flow-response/generic-http-flow-response.json", "sha256": "a6e1a5df012aa032804b39cded5e07a3c0ec998b494c7c2ee55da41386506fb5" } ] }, { "id": "view-samples/icon-link-tiles", "family": "view", "slug": "icon-link-tiles", "title": "Icon Link Tiles", "description": "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.", "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." ], "created": "2019-09-05T00:00:00.000Z", "updated": "2025-11-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-themeLighterAlt", "ms-fontColor-white--hover", "ms-fontSize-su", "sp-row-title" ] }, "authors": [ { "gitHubAccount": "sohailmerchant", "pictureUrl": "https://github.com/sohailmerchant.png", "name": "S Merchant", "key": "sohailmerchant" }, { "gitHubAccount": "taylora3", "pictureUrl": "https://github.com/taylora3.png", "name": "Andrew Taylor", "key": "taylora3" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/icon-link-tiles", "route": "samples/view/icon-link-tiles/", "preview": "generated/previews/view-icon-link-tiles.webp", "previewAlt": "Icon Link Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/icon-link-tiles/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/icon-link-tiles/assets/screenshotWrapped.png", "alt": "screenshot wrapped" } ], "definitions": [ { "filename": "icon-link-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/icon-link-tiles/icon-link-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/icon-link-tiles/icon-link-tiles.json", "sha256": "a00c77b0d8ed05c0a43960f89b41a1e19501857e70393763591ad8abbf9ae90c" } ] }, { "id": "view-samples/photo-gallery-description-link-like", "family": "view", "slug": "photo-gallery-description-link-like", "title": "Photo Gallery with Description, Link and Likes", "description": "This sample demonstrates formatting a document library gallery view into a photo gallery showing title, description, hyperlink and likes.", "longDescription": [ "This sample demonstrates formatting a document library gallery view into a photo gallery showing title, description, hyperlink and likes." ], "created": "2025-11-04T00:00:00.000Z", "updated": "2025-11-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "sp-card-container", "sp-card-imageContainer" ] }, "authors": [ { "gitHubAccount": "AngelaTS", "pictureUrl": "https://github.com/AngelaTS.png", "name": "AngelaTS", "key": "angelats" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/photo-gallery-description-link-like", "route": "samples/view/photo-gallery-description-link-like/", "preview": "generated/previews/view-photo-gallery-description-link-like.webp", "previewAlt": "Photo Gallery with Description, Link and Likes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/photo-gallery-description-link-like/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "photo-gallery-description-link-like.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/photo-gallery-description-link-like/photo-gallery-description-link-like.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/photo-gallery-description-link-like/photo-gallery-description-link-like.json", "sha256": "8cd78b7e277c5e3047dd1c5ceb62ceaf9ea347eb542ef9a6c029d1324c36698c" } ] }, { "id": "view-samples/sticky-title-feedback-card", "family": "view", "slug": "sticky-title-feedback-card", "title": "Sticky Title Feedback Card", "description": "This sample uses SharePoint List Formatting to display feedback items as card-style layouts with a prominent title header and scrollable feedback content.", "longDescription": [ "This sample uses SharePoint List Formatting to display feedback items as card-style layouts with a prominent title header and scrollable feedback content. Each row is rendered as a visually appealing card with a yellow header for the title and a scrollable area for longer feedback text." ], "created": "2025-10-26T00:00:00.000Z", "updated": "2025-10-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/sticky-title-feedback-card", "route": "samples/view/sticky-title-feedback-card/", "preview": "generated/previews/view-sticky-title-feedback-card.webp", "previewAlt": "Sticky Title Feedback Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/sticky-title-feedback-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "sticky-title-feedback-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/sticky-title-feedback-card/sticky-title-feedback-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/sticky-title-feedback-card/sticky-title-feedback-card.json", "sha256": "ef50e114473e8c9058aa9db5cf0fc18d77f10f2005e5861ef4e3dde4bfb10cdb" } ] }, { "id": "view-samples/feedback-sentiment-board", "family": "view", "slug": "feedback-sentiment-board", "title": "Feedback Sentiment Board", "description": "This sample uses SharePoint List Formatting to visualize feedback sentiment with keyword-based detection in a color-coded and emoji-enhanced card view.", "longDescription": [ "This sample uses SharePoint List Formatting to visualize feedback sentiment (Positive, Neutral, Negative) with keyword-based detection in a color-coded and emoji-enhanced card view. Each feedback item is automatically analyzed for sentiment keywords and displayed as a beautiful card showing the sentiment icon, feedback text, author details, and submission date. Perfect for HR feedback forms, customer surveys, and employee pulse checks." ], "created": "2025-10-25T00:00:00.000Z", "updated": "2025-10-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "toLowerCase", "substring", "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/feedback-sentiment-board", "route": "samples/view/feedback-sentiment-board/", "preview": "generated/previews/view-feedback-sentiment-board.webp", "previewAlt": "Feedback Sentiment Board formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/feedback-sentiment-board/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "feedback-sentiment-board.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/feedback-sentiment-board/feedback-sentiment-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/feedback-sentiment-board/feedback-sentiment-board.json", "sha256": "92d6b49903d9589dd00d277b1947da616d73b238d6e1def53e1ba049a667d7f5" } ] }, { "id": "view-samples/picture-link-tiles-doc-lib", "family": "view", "slug": "picture-link-tiles-doc-lib", "title": "Picture Link Tiles Doc Lib", "description": "Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions.", "longDescription": [ "Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions." ], "created": "2025-09-24T00:00:00.000Z", "updated": "2025-10-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Grouped", "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@thumbnail", "@group.count" ], "FORMATTING-OPERATORS": [ "indexOf", "join", "substring", "toString", "getYear", "getMonth" ], "FORMATTING-ACTIONS": [ "editProps", "delete" ], "FORMATTING-FEATURES": [ "hideSelection", "inlineEditField", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-fontColor-themeDark", "ms-fontColor-neutralPrimary", "ms-fontWeight-bold", "ms-bgColor-themeLighter", "ms-bgColor-themeLighterAlt" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/picture-link-tiles-doc-lib", "route": "samples/view/picture-link-tiles-doc-lib/", "preview": "generated/previews/view-picture-link-tiles-doc-lib.webp", "previewAlt": "Picture Link Tiles Doc Lib formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-link-tiles-doc-lib/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-link-tiles-doc-lib/assets/minimal.png", "alt": "minimal screenshot" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-link-tiles-doc-lib/assets/field-mapping.png", "alt": "field mapping screenshot" } ], "definitions": [ { "filename": "picture-link-tiles-doc-lib-minimal.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-link-tiles-doc-lib/picture-link-tiles-doc-lib-minimal.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-link-tiles-doc-lib/picture-link-tiles-doc-lib-minimal.json", "sha256": "304e3a332d0d3802e3880a030608761e6782bf48acb39b98437c518e8be43312" }, { "filename": "picture-link-tiles-doc-lib.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-link-tiles-doc-lib/picture-link-tiles-doc-lib.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-link-tiles-doc-lib/picture-link-tiles-doc-lib.json", "sha256": "a0e1f0f4cffb00a584e633d76037346052c33f3c43cd5c088e12f0b6f8019839" } ] }, { "id": "view-samples/grouped-accordion-cards", "family": "view", "slug": "grouped-accordion-cards", "title": "Grouped Accordion Cards with Hover Details", "description": "Displays grouped items as modern cards with expandable accordion headers and hoverable detail panels.", "longDescription": [ "This sample uses SharePoint List View Formatting to render grouped items as visually rich cards with header images, colored accents, and hoverable detail panels.", "It leverages SharePoint's built-in group-by behavior and @group tokens to simulate an accordion-style expand and collapse experience.", "Each group header includes an image, group title, and item count, while rows show task details, color indicators, and a dynamic hover card for quick context." ], "created": "2025-10-24T00:00:00.000Z", "updated": "2025-10-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count", "@group.fieldData" ], "FORMATTING-OPERATORS": [ "substring", "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "groupProps", "hideColumnHeader", "hideSelection", "hideFooter", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter--hover", "sp-row-card" ] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Siva Ram Bandaru", "key": "saiiiiiii" } ], "references": [ { "name": "Use view formatting to customize SharePoint", "description": "Learn how to use SharePoint List View Formatting to create modern card views, grouped layouts, and interactive hover experiences using JSON.", "url": "https://learn.microsoft.com/sharepoint/dev/declarative-customization/view-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/grouped-accordion-cards", "route": "samples/view/grouped-accordion-cards/", "preview": "generated/previews/view-grouped-accordion-cards.webp", "previewAlt": "Grouped Accordion Cards screenshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/grouped-accordion-cards/assets/screenshot.png", "alt": "Grouped Accordion Cards screenshot" } ], "definitions": [ { "filename": "grouped-accordion-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/grouped-accordion-cards/grouped-accordion-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/grouped-accordion-cards/grouped-accordion-cards.json", "sha256": "69e2c2a89c4277c7198fd894b92cf008b726c34ec6b98b2fe986ac881f9906e4" } ] }, { "id": "view-samples/modern-event-cards", "family": "view", "slug": "modern-event-cards", "title": "Modern Event Cards", "description": "This sample turns list items into modern event cards with calendar-style date badges. Each card shows the event date with the month and day number in a nice visual format. The cards also display the event title, description, and an optional link button.", "longDescription": [ "This sample turns list items into modern event cards with calendar-style date badges. Each card shows the event date with the month and day number in a nice visual format. The cards also display the event title, description, and an optional link button." ], "created": "2025-10-20T00:00:00.000Z", "updated": "2025-10-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getMonth", "getDate" ], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-themePrimary", "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-bold", "ms-fontWeight-semibold" ] }, "authors": [ { "gitHubAccount": "tvahk", "pictureUrl": "https://github.com/tvahk.png", "name": "Tanel Vahk", "key": "tvahk" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/modern-event-cards", "route": "samples/view/modern-event-cards/", "preview": "generated/previews/view-modern-event-cards.webp", "previewAlt": "Modern Event Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/modern-event-cards/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "modern-event-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/modern-event-cards/modern-event-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/modern-event-cards/modern-event-cards.json", "sha256": "e676ed995a3d9e2270488371b23947777634a99fc96f175b86470e0181fbf022" } ] }, { "id": "column-samples/text-country-flag", "family": "column", "slug": "text-country-flag", "title": "Country Flag", "description": "This sample demonstrates displaying the flag of the country selected in the single selection SharePoint choice column.", "longDescription": [ "This sample demonstrates displaying the flag of the country selected in the single selection SharePoint choice column." ], "created": "2023-08-28T00:00:00.000Z", "updated": "2025-10-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Image", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-country-flag", "route": "samples/column/text-country-flag/", "preview": "generated/previews/column-text-country-flag.webp", "previewAlt": "Country Flag formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-country-flag/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-country-flag.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-country-flag/text-country-flag.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-country-flag/text-country-flag.json", "sha256": "c18e5b627aaa2a4d2255a69c4862102e0a37bd8dd9fdf22aea38629cd7c1fe0a" } ] }, { "id": "column-samples/generic-image-overlay-buttons", "family": "column", "slug": "generic-image-overlay-buttons", "title": "Image with Overlay Buttons", "description": "This column formatting sample displays images with action buttons overlaid at the bottom, with dynamic sizing based on image orientation.", "longDescription": [ "This column formatting sample displays images with action buttons overlaid at the bottom. The formatting dynamically adjusts image dimensions and button positioning based on the image orientation (Landscape, Portrait, or Square), ensuring optimal display across different aspect ratios. Each item shows an image with two customizable action buttons that can link to external URLs." ], "created": "2025-10-16T00:00:00.000Z", "updated": "2025-10-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "references": [ { "name": "Use column formatting to customize SharePoint", "description": "You can use column 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 column and any styles to be applied to those elements.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-image-overlay-buttons", "route": "samples/column/generic-image-overlay-buttons/", "preview": "generated/previews/column-generic-image-overlay-buttons.webp", "previewAlt": "Images displayed with overlay action buttons at the bottom", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-image-overlay-buttons/assets/screenshot.png", "alt": "Images displayed with overlay action buttons at the bottom" } ], "definitions": [ { "filename": "generic-image-overlay-buttons.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-image-overlay-buttons/generic-image-overlay-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-image-overlay-buttons/generic-image-overlay-buttons.json", "sha256": "862c3c1dfb5bc10f118617f6b505dd08ddaffccfc13841af7159fbc9d8269bcb" } ] }, { "id": "view-samples/qr-code-tile", "family": "view", "slug": "qr-code-tile", "title": "QR Code Tile", "description": "This sample uses SharePoint List Formatting to automatically generate QR codes for each list item in a tile view based on the Title field.", "longDescription": [ "This sample uses SharePoint List Formatting to automatically generate QR codes for each list item in a tile view based on the Title field. Each tile displays the item title above a dynamically generated QR code in a clean, centered card layout, making it ideal for visual dashboards, inventory displays, or quick-scan directories." ], "created": "2025-10-13T00:00:00.000Z", "updated": "2025-10-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/qr-code-tile", "route": "samples/view/qr-code-tile/", "preview": "generated/previews/view-qr-code-tile.webp", "previewAlt": "QR Code Tile formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/qr-code-tile/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "qr-code-tile.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/qr-code-tile/qr-code-tile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/qr-code-tile/qr-code-tile.json", "sha256": "4a21ff1cbf9b0c95ed12a58ee36cfdee4e473e3849d18babaaf85a7a115b4497" } ] }, { "id": "column-samples/generic-quick-charts-io", "family": "column", "slug": "generic-quick-charts-io", "title": "Quick Charts", "description": "This sample uses SharePoint column formatting to automatically generate multiple chart types (pie, doughnut, out-labeled pie, and polar area) visualizing task status distribution across To Do, In Progress, and Done states.", "longDescription": [ "This sample uses SharePoint column formatting to automatically generate various chart types including pie charts, doughnut charts, out-labeled pie charts, and polar area charts to visualize task status distribution across To Do, In Progress, and Done states. Each column displays a dynamically generated chart showing the distribution of tasks, making it easy to visualize project or task progress at a glance. Multiple chart style options are provided to suit different visualization preferences." ], "created": "2025-10-13T00:00:00.000Z", "updated": "2025-10-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "QuickChart.io Documentation", "description": "QuickChart is a web service that generates chart images on-the-fly. It's a replacement for the discontinued Google Image Charts API and supports Chart.js configurations.", "url": "https://quickchart.io/documentation/" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-quick-charts-io", "route": "samples/column/generic-quick-charts-io/", "preview": "generated/previews/column-generic-quick-charts-io.webp", "previewAlt": "Doughnut Chart", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quick-charts-io/assets/screenshot.png", "alt": "Doughnut Chart" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quick-charts-io/assets/outlabeledpie.png", "alt": "Outlabeled Pie Chart" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quick-charts-io/assets/polar.png", "alt": "Polar Chart" } ], "definitions": [ { "filename": "generic-quick-charts-io.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quick-charts-io/generic-quick-charts-io.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quick-charts-io/generic-quick-charts-io.json", "sha256": "5f4c5b2899eafd6279d37337d1d72bd176b1cefbb0a34a6d6c83d626149ac757" }, { "filename": "generic-quick-charts-outlabeledPie.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quick-charts-io/generic-quick-charts-outlabeledPie.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quick-charts-io/generic-quick-charts-outlabeledPie.json", "sha256": "f0008f9d01b13414108246e9e6948edd4bcbc68af1625e5613c8b2f054997926" }, { "filename": "generic-quick-charts-polararea.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quick-charts-io/generic-quick-charts-polararea.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quick-charts-io/generic-quick-charts-polararea.json", "sha256": "2091c0545226ee784ac480c61cc69135825b3d01ecff5da1a4df70a54a5bb0a2" } ] }, { "id": "column-samples/generic-quick-charts-bar-chart", "family": "column", "slug": "generic-quick-charts-bar-chart", "title": "Bar Chart Column Formatter", "description": "This sample uses SharePoint column formatting to automatically generate bar charts visualizing task status distribution across To Do, In Progress, and Done states.", "longDescription": [ "This sample uses SharePoint column formatting to automatically generate bar charts visualizing task status distribution across To Do, In Progress, and Done states. Each column displays a dynamically generated bar chart showing the distribution of tasks, making it easy to visualize project or task progress at a glance." ], "created": "2025-10-08T00:00:00.000Z", "updated": "2025-10-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "QuickChart.io Documentation", "description": "QuickChart is a web service that generates chart images on-the-fly. It's a replacement for the discontinued Google Image Charts API and supports Chart.js configurations.", "url": "https://quickchart.io/documentation/" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-quick-charts-bar-chart", "route": "samples/column/generic-quick-charts-bar-chart/", "preview": "generated/previews/column-generic-quick-charts-bar-chart.webp", "previewAlt": "Bar Chart Column Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quick-charts-bar-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-quick-charts-bar-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quick-charts-bar-chart/generic-quick-charts-bar-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quick-charts-bar-chart/generic-quick-charts-bar-chart.json", "sha256": "78a8ec6210bff1f40f2c84539adb1ff1136a6e01630ca49a1a04139231b303fd" } ] }, { "id": "column-samples/generic-quick-charts-pie", "family": "column", "slug": "generic-quick-charts-pie", "title": "Pie Chart Column Formatter", "description": "This sample uses SharePoint column formatting to automatically generate pie charts visualizing task status distribution across To Do, In Progress, and Done states.", "longDescription": [ "This sample uses SharePoint column formatting to automatically generate pie charts visualizing task status distribution across To Do, In Progress, and Done states. Each column displays a dynamically generated pie chart showing the distribution of tasks, making it easy to visualize project or task progress at a glance." ], "created": "2025-10-08T00:00:00.000Z", "updated": "2025-10-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "QuickChart.io Documentation", "description": "QuickChart is a web service that generates chart images on-the-fly. It's a replacement for the discontinued Google Image Charts API and supports Chart.js configurations.", "url": "https://quickchart.io/documentation/" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-quick-charts-pie", "route": "samples/column/generic-quick-charts-pie/", "preview": "generated/previews/column-generic-quick-charts-pie.webp", "previewAlt": "Pie Chart Column Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quick-charts-pie/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-quick-charts-pie.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quick-charts-pie/generic-quick-charts-pie.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quick-charts-pie/generic-quick-charts-pie.json", "sha256": "a2d5514f920d47e5877f81e813f8a8d91775653ea022417c73777ff296f506b6" } ] }, { "id": "column-samples/generic-traffic-light-status", "family": "column", "slug": "generic-traffic-light-status", "title": "Traffic Light Style Column Formatting", "description": "This sample demonstrates how to use SharePoint Column Formatting to display a realistic traffic light visual indicator based on status values.", "longDescription": [ "This sample demonstrates how to create a realistic traffic light visual using SharePoint Column Formatting JSON. It displays a complete traffic light with housing, pole, and base that illuminates Red, Yellow, or Green lights based on the Status choice column value. Features include glowing effects for active lights, 3D styling with shadows, decorative side brackets, and proper visual depth with layered elements." ], "created": "2025-10-07T00:00:00.000Z", "updated": "2025-10-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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. This sample shows a traffic light status indicator implementation using JSON formatting with conditional styling based on choice column values.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-traffic-light-status", "route": "samples/column/generic-traffic-light-status/", "preview": "generated/previews/column-generic-traffic-light-status.webp", "previewAlt": "Traffic Light Status Screenshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-traffic-light-status/assets/screenshot.png", "alt": "Traffic Light Status Screenshot" } ], "definitions": [ { "filename": "generic-traffic-light-status.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-traffic-light-status/generic-traffic-light-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-traffic-light-status/generic-traffic-light-status.json", "sha256": "e1b5e916e4da1f9a0dd743c10cb01c7a7dfa17ad16852eadb7b82631e2790bcb" } ] }, { "id": "column-samples/generic-embed-file-preview", "family": "column", "slug": "generic-embed-file-preview", "title": "File Preview Callout with the embed Action", "description": "This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.", "longDescription": [ "This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page." ], "created": "2025-06-30T00:00:00.000Z", "updated": "2025-10-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb", "@window.innerHeight", "@window.innerWidth" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "embed" ], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-bgColor-themePrimary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-white--hover", "ms-fontSize-s", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-embed-file-preview", "route": "samples/column/generic-embed-file-preview/", "preview": "generated/previews/column-generic-embed-file-preview.webp", "previewAlt": "screenshot of a document library file preview in a callout", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-embed-file-preview/assets/screenshot.png", "alt": "screenshot of a document library file preview in a callout" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-embed-file-preview/assets/screenshot-site-pages.png", "alt": "screenshot of a Site Pages page preview in a callout" } ], "definitions": [ { "filename": "generic-embed-file-preview.json", "target": "Column formatting", "schemaIssues": [ "/children/0/customRowAction/action must be equal to one of the allowed values", "/children/0/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-embed-file-preview/generic-embed-file-preview.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-embed-file-preview/generic-embed-file-preview.json", "sha256": "dee49cf3bb5367f79e5b3e2890d821597bc6127fa6ee3be9f47a2740b251caaf" } ] }, { "id": "column-samples/date-page-a-day-calendar", "family": "column", "slug": "date-page-a-day-calendar", "title": "Page-a-day Calendar", "description": "This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (`getDate`, `getMonth`, and `getYear`).", "longDescription": [ "This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (`getDate`, `getMonth`, and `getYear`)." ], "created": "2020-10-17T00:00:00.000Z", "updated": "2025-10-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "floor", "getDate", "getMonth", "getYear", "split", "Number", "substring", "toDateString", "toString", "ceiling", "Date" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontWeight-bold", "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-borderColor-themePrimary", "ms-fontSize-20", "ms-fontSize-18" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" }, { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Zeller's congruence", "description": "Details on how to calculate the day of the week.", "url": "https://en.wikipedia.org/wiki/Zeller%27s_congruence" }, { "name": "Tomohiko Sakamoto's methods", "description": "A precomputed lookup table of month offsets used to calculate the day of the week.", "url": "https://en.wikipedia.org/wiki/Determination_of_the_day_of_the_week" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-page-a-day-calendar", "route": "samples/column/date-page-a-day-calendar/", "preview": "generated/previews/column-date-page-a-day-calendar.webp", "previewAlt": "Page-a-day Calendar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-page-a-day-calendar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-page-a-day-calendar-30d-counter-dow.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-30d-counter-dow.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-30d-counter-dow.json", "sha256": "2836add44ffe313c12f084c96ae80c0409433873bb4b22ac2e752964fabfb73f" }, { "filename": "date-page-a-day-calendar-30d-counter.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-30d-counter.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-30d-counter.json", "sha256": "e6047693c6336570feb2862cb3ef335bde373b18917d0ce72d4c7d2ef76e4cc2" }, { "filename": "date-page-a-day-calendar-minimal.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-minimal.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-minimal.json", "sha256": "eb1e7e291d3d34c04055531071b8310688c09f16bdbd4929332b39bc088493da" }, { "filename": "date-page-a-day-calendar-prev-today-next.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-prev-today-next.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-prev-today-next.json", "sha256": "cc1c0e514f714126f65186b21df4606832c3475387b8b7f071eb2ec93b465843" }, { "filename": "date-page-a-day-calendar-weekend.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-weekend.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar-weekend.json", "sha256": "611502c7a32a7155c1655a6be959cb9b46fff6b13ab03341b3f0bd2c6e55bd93" }, { "filename": "date-page-a-day-calendar.json", "target": "Column formatting", "schemaIssues": [ "/children/1/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/date-page-a-day-calendar/date-page-a-day-calendar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-page-a-day-calendar/date-page-a-day-calendar.json", "sha256": "6c82cf5ebfa031ded828e4fa73ceaab75bc368a520feeba63065c03bf8608977" } ] }, { "id": "column-samples/generic-gamification", "family": "column", "slug": "generic-gamification", "title": "Gamification Badges", "description": "This sample demonstrates how to create dynamic Gamification badges in SharePoint columns based on score values with visual indicators and tooltips.", "longDescription": [ "This sample demonstrates how to create dynamic Gamification badges within a SharePoint list using column formatting JSON." ], "created": "2025-09-26T00:00:00.000Z", "updated": "2025-09-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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's displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-gamification", "route": "samples/column/generic-gamification/", "preview": "generated/previews/column-generic-gamification.webp", "previewAlt": "Gamification badges showing different contributor levels with colored borders and medal indicators", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-gamification/assets/screenshot.png", "alt": "Gamification badges showing different contributor levels with colored borders and medal indicators" } ], "definitions": [ { "filename": "generic-gamification.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-gamification/generic-gamification.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-gamification/generic-gamification.json", "sha256": "bc2a37840e52e87c15e103e7991b73f65b65864f5d52bd0920eb7528f4361d17" } ] }, { "id": "column-samples/number-per-100-people-grid", "family": "column", "slug": "number-per-100-people-grid", "title": "Per 100 People Grid", "description": "This sample demonstrates displaying a grid of 100 dots where dots are colored based on how many of something per 100 people.", "longDescription": [ "This sample demonstrates displaying a grid of 100 dots where dots are colored based on how many of something per 100 people. The format shows of nested `forEach` elements using `loopIndex` to reference position and `em` size units to show relative scaling based on the root `font-size`. Wowee!" ], "created": "2025-09-26T00:00:00.000Z", "updated": "2025-09-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "loopIndex", "ceiling" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "columnFormatterReference", "forEach" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-neutralSecondary", "ms-bgColor-themePrimary", "ms-bgColor-neutralQuaternaryAlt" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-per-100-people-grid", "route": "samples/column/number-per-100-people-grid/", "preview": "generated/previews/column-number-per-100-people-grid.webp", "previewAlt": "Per 100 People Grid formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-per-100-people-grid/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-per-100-people-grid/assets/screenshotGallery.png", "alt": "screenshot gallery" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-per-100-people-grid/assets/screenshotEmoji.png", "alt": "screenshot emoji" } ], "definitions": [ { "filename": "number-per-100-people-gallery.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-per-100-people-grid/number-per-100-people-gallery.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-per-100-people-grid/number-per-100-people-gallery.json", "sha256": "9ec5d79ede480e62dfa6e1258b0a6bd886b1e6fc8102824ac1d6f924e2b7be92" }, { "filename": "number-per-100-people-grid-emoji.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-per-100-people-grid/number-per-100-people-grid-emoji.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-per-100-people-grid/number-per-100-people-grid-emoji.json", "sha256": "36072a631dde49107dedd5548cc903e08820fbf1240da8a9cdef1a9e540ceec3" }, { "filename": "number-per-100-people-grid.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-per-100-people-grid/number-per-100-people-grid.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-per-100-people-grid/number-per-100-people-grid.json", "sha256": "2d3baac9758c5d37aa0813c201ab1cd5add4ebee9aea4aefd4501e1fcc3c6de8" } ] }, { "id": "view-samples/interactive-content-card", "family": "view", "slug": "interactive-content-card", "title": "Interactive Content Card with Button", "description": "This sample uses SharePoint List Formatting to display list items as modern card tiles with image header, icon overlay, and call-to-action button.", "longDescription": [ "This sample uses SharePoint List Formatting to display list items as modern card tiles with a prominent image header, icon overlay, and call-to-action button." ], "created": "2025-09-16T00:00:00.000Z", "updated": "2025-09-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/interactive-content-card", "route": "samples/view/interactive-content-card/", "preview": "generated/previews/view-interactive-content-card.webp", "previewAlt": "Interactive Content Card with Image Header and Explore Button", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/interactive-content-card/assets/screenshot.png", "alt": "Interactive Content Card with Image Header and Explore Button" } ], "definitions": [ { "filename": "interactive-content-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/interactive-content-card/interactive-content-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/interactive-content-card/interactive-content-card.json", "sha256": "8ef09535c3666f722d3b6101bcb40ec8a8e7a3600a363221f97204bd583ca227" } ] }, { "id": "column-samples/generic-dynamic-colored-pills", "family": "column", "slug": "generic-dynamic-colored-pills", "title": "Dynamic Colored Pills", "description": "This sample demonstrates how to dynamically add colored pills to lookup columns.", "longDescription": [ "This sample demonstrates how to dynamically add colored pills to lookup columns. If you have a lookup column with more than 10 options or a lookup column that can have additional items added, managing the pill colors can be time-consuming. This format will calculate a color, background, and border color based on the length of the lookup value and the lookupId." ], "created": "2024-07-14T00:00:00.000Z", "updated": "2025-09-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "ceiling", "pow" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "jaxkookie", "pictureUrl": "https://github.com/jaxkookie.png", "name": "Larry Pfaff", "key": "jaxkookie" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-dynamic-colored-pills", "route": "samples/column/generic-dynamic-colored-pills/", "preview": "generated/previews/column-generic-dynamic-colored-pills.webp", "previewAlt": "Dynamic Colored Pills formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-dynamic-colored-pills/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-dynamic-colored-pills.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-dynamic-colored-pills/generic-dynamic-colored-pills.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-dynamic-colored-pills/generic-dynamic-colored-pills.json", "sha256": "393c4c93da890db3df4f2ffff469fa517dc82c4595a5bf8b8a5190e70348e953" } ] }, { "id": "column-samples/text-comma-separated-value-tags", "family": "column", "slug": "text-comma-separated-value-tags", "title": "Display Comma-Separated Text as Tags", "description": "This sample demonstrates using the split function to display a comma separated text as tags.", "longDescription": [ "This sample demonstrates using the split function to display a comma separated text as tags." ], "created": "2025-09-04T00:00:00.000Z", "updated": "2025-09-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "split" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-bgColor-neutralLight", "ms-fontColor-black" ] }, "authors": [ { "gitHubAccount": "sudhirke", "pictureUrl": "https://github.com/sudhirke.png", "name": "Sudhir Kesharwani", "key": "sudhirke" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-comma-separated-value-tags", "route": "samples/column/text-comma-separated-value-tags/", "preview": "generated/previews/column-text-comma-separated-value-tags.webp", "previewAlt": "Display Comma-Separated Text as Tags formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-comma-separated-value-tags/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-comma-separated-value-tags.json", "target": "Column formatting", "schemaIssues": [ "/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/text-comma-separated-value-tags/text-comma-separated-value-tags.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-comma-separated-value-tags/text-comma-separated-value-tags.json", "sha256": "911b48f5cc253a156fa34d135682cf22efc853c1883f84ee286edf0dff8f8474" } ] }, { "id": "view-samples/funnel-chart-tile", "family": "view", "slug": "funnel-chart-tile", "title": "Funnel Chart", "description": "This sample displays funnel chart stages in a modern dashboard-style tile card with proportional widths and customizable colors.", "longDescription": [ "This sample demonstrates how to render a funnel chart inside a tile card using SharePoint JSON formatting. Each stage is represented as a colored bar, with the width proportional to its numeric value. The sample is ideal for visualizing pipelines such as Leads → Qualified → Proposal → Closed." ], "created": "2025-09-04T00:00:00.000Z", "updated": "2025-09-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/funnel-chart-tile", "route": "samples/view/funnel-chart-tile/", "preview": "generated/previews/view-funnel-chart-tile.webp", "previewAlt": "Tile card showing a funnel chart with four proportional colored bars", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/funnel-chart-tile/assets/screenshot.png", "alt": "Tile card showing a funnel chart with four proportional colored bars" } ], "definitions": [ { "filename": "funnel-chart-tile.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/funnel-chart-tile/funnel-chart-tile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/funnel-chart-tile/funnel-chart-tile.json", "sha256": "3013fd0397242c630a23d6f2a7907f35aadf3e5e2923b1eb42aac4ab9c6d6581" } ] }, { "id": "view-samples/image-overlay-buttons", "family": "view", "slug": "image-overlay-buttons", "title": "Image with Overlay Buttons", "description": "This sample displays images with action buttons overlaid on the bottom of each image in a compact tile format.", "longDescription": [ "This sample displays images with action buttons overlaid on the bottom of each image in a compact tile format." ], "created": "2025-09-04T00:00:00.000Z", "updated": "2025-09-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-overlay-buttons", "route": "samples/view/image-overlay-buttons/", "preview": "generated/previews/view-image-overlay-buttons.webp", "previewAlt": "Image tiles with overlay buttons showing glass effect styling", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-overlay-buttons/assets/screenshot.png", "alt": "Image tiles with overlay buttons showing glass effect styling" } ], "definitions": [ { "filename": "image-overlay-buttons.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/image-overlay-buttons/image-overlay-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/image-overlay-buttons/image-overlay-buttons.json", "sha256": "c9fe57820ee9b78f8e6569141ed6a83ccbef2a9807bcfc07cec0ae4c0d839402" } ] }, { "id": "column-samples/generic-bubble-chart", "family": "column", "slug": "generic-bubble-chart", "title": "Bubble Chart Column Formatting", "description": "This sample demonstrates how to use SharePoint Column Formatting to generate a dynamic bubble chart for list items.", "longDescription": [ "This sample demonstrates how to create a dynamic bubble chart using SharePoint Column Formatting JSON. It displays words from multiple label columns with varying font sizes, colors, and bold styling based on word length and specific highlights." ], "created": "2025-09-02T00:00:00.000Z", "updated": "2025-09-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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. This sample shows a bubble chart implementation using JSON formatting for multiple label columns with dynamic styles.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-bubble-chart", "route": "samples/column/generic-bubble-chart/", "preview": "generated/previews/column-generic-bubble-chart.webp", "previewAlt": "Bubble Chart Screenshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-bubble-chart/assets/screenshot.png", "alt": "Bubble Chart Screenshot" } ], "definitions": [ { "filename": "generic-bubble-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-bubble-chart/generic-bubble-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-bubble-chart/generic-bubble-chart.json", "sha256": "3616b8939d435d3f096ec98cc6231b95dbe47788b39b7e9a9cc358da05a62fcc" } ] }, { "id": "column-samples/generic-word-cloud", "family": "column", "slug": "generic-word-cloud", "title": "Word Cloud Column Formatting", "description": "This sample demonstrates how to use SharePoint Column Formatting to generate a dynamic word cloud for list items.", "longDescription": [ "This sample demonstrates how to create a dynamic word cloud using SharePoint Column Formatting JSON. It displays words from multiple label columns with varying font sizes, colors, and bold styling based on word length and specific highlights." ], "created": "2025-09-02T00:00:00.000Z", "updated": "2025-09-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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. This sample shows a word cloud implementation using JSON formatting for multiple label columns with dynamic styles.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-word-cloud", "route": "samples/column/generic-word-cloud/", "preview": "generated/previews/column-generic-word-cloud.webp", "previewAlt": "Word Cloud Screenshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-word-cloud/assets/screenshot.png", "alt": "Word Cloud Screenshot" } ], "definitions": [ { "filename": "generic-word-cloud.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-word-cloud/generic-word-cloud.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-word-cloud/generic-word-cloud.json", "sha256": "4a3c504095522e6a1d33e44c5ea55e0c1e85b19646281920a86399343e1f3f32" } ] }, { "id": "view-samples/book-template", "family": "view", "slug": "book-template", "title": "Book Template Card Formatter", "description": "This SharePoint JSON view formatting sample transforms your list items into visually rich book cards.", "longDescription": [ "This SharePoint JSON view formatting sample transforms your list items into visually rich book cards." ], "created": "2025-08-31T00:00:00.000Z", "updated": "2025-08-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-gray40", "ms-bgColor-gray60--hover" ] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/book-template", "route": "samples/view/book-template/", "preview": "generated/previews/view-book-template.webp", "previewAlt": "Book Template Card Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/book-template/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "book-template.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/book-template/book-template.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/book-template/book-template.json", "sha256": "671e3822ebcc003007e982056e7418981ab8acdef32ec2aace70acfde0ddcc7e" } ] }, { "id": "view-samples/bar-code", "family": "view", "slug": "bar-code", "title": "Bar Code Row Formatter", "description": "This sample uses SharePoint List Formatting to automatically generate Bar code for each list item based on the Title field.", "longDescription": [ "This sample uses SharePoint List Formatting to automatically generate Bar code for each list item based on the Title field." ], "created": "2025-08-29T00:00:00.000Z", "updated": "2025-08-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "rowFormatter", "hideColumnHeader" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-code", "route": "samples/view/bar-code/", "preview": "generated/previews/view-bar-code.webp", "previewAlt": "Bar Code Row Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bar-code/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "bar-code.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/bar-code/bar-code.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bar-code/bar-code.json", "sha256": "eaf02fe7f0f359efce73c984ff00f70b440ec01d8861ad7696bec26b9c71166a" } ] }, { "id": "view-samples/qr-code", "family": "view", "slug": "qr-code", "title": "QR Code Row Formatter", "description": "This sample uses SharePoint List Formatting to automatically generate QR codes for each list item based on the Title field.", "longDescription": [ "This sample uses SharePoint List Formatting to automatically generate QR codes for each list item based on the Title field." ], "created": "2025-08-29T00:00:00.000Z", "updated": "2025-08-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/qr-code", "route": "samples/view/qr-code/", "preview": "generated/previews/view-qr-code.webp", "previewAlt": "QR Code Row Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/qr-code/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "qr-code.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/qr-code/qr-code.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/qr-code/qr-code.json", "sha256": "8f069795f3bbaf81991fec944919f88eef9ed6f6ebe1df73fdae47e8d740c8f2" } ] }, { "id": "view-samples/certificate-card", "family": "view", "slug": "certificate-card", "title": "Certificate Card", "description": "This sample uses SharePoint List Formatting to display certificate data as a card list view.", "longDescription": [ "This sample uses SharePoint List Formatting to display certificate data as a card list view." ], "created": "2025-08-26T00:00:00.000Z", "updated": "2025-08-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/certificate-card", "route": "samples/view/certificate-card/", "preview": "generated/previews/view-certificate-card.webp", "previewAlt": "Certificate Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/certificate-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "certificate-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/certificate-card/certificate-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/certificate-card/certificate-card.json", "sha256": "1d29edae42a5b3010e7ee3aa004e1c9782be653788b8b371db9cf325d1b6f89f" } ] }, { "id": "view-samples/contact-custom-avatar", "family": "view", "slug": "contact-custom-avatar", "title": "Contact Custom Avatar Card", "description": "This sample uses SharePoint List Formatting to display Contact Custom Avatar data as a Card view.", "longDescription": [ "This sample uses SharePoint List Formatting to display Contact Custom Avatar as a Card view." ], "created": "2025-08-25T00:00:00.000Z", "updated": "2025-08-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/contact-custom-avatar", "route": "samples/view/contact-custom-avatar/", "preview": "generated/previews/view-contact-custom-avatar.webp", "previewAlt": "Contact Custom Avatar Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/contact-custom-avatar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "contact-custom-avatar.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/contact-custom-avatar/contact-custom-avatar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/contact-custom-avatar/contact-custom-avatar.json", "sha256": "8bc9f6f89703806e981e7f9c294dd56972871261057ba778d59d172e76116bdf" } ] }, { "id": "column-samples/generic-identicon", "family": "column", "slug": "generic-identicon", "title": "Identicon Column Formatting", "description": "This sample demonstrates how to use SharePoint Column Formatting to generate Identicons for list items.", "longDescription": [ "This sample demonstrates how to use SharePoint Column Formatting to generate Identicons for list items." ], "created": "2025-08-25T00:00:00.000Z", "updated": "2025-08-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-identicon", "route": "samples/column/generic-identicon/", "preview": "generated/previews/column-generic-identicon.webp", "previewAlt": "Identicon Column Formatting formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-identicon/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-identicon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-identicon/generic-identicon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-identicon/generic-identicon.json", "sha256": "d170b9e41b7b823d33eb05ea58d4d4a94cf016fcd9afe5c85ab026000f09fa0f" } ] }, { "id": "column-samples/person-name-avatar", "family": "column", "slug": "person-name-avatar", "title": "People Name Avatar Card", "description": "This SharePoint column formatting sample provides a modern, interactive People card for list items using JSON formatting.", "longDescription": [ "This SharePoint column formatting sample provides a modern, interactive People card for list items using JSON formatting." ], "created": "2025-08-25T00:00:00.000Z", "updated": "2025-08-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "substring", "length" ], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "sp-css-backgroundColor-themeLighterAlt", "sp-css-backgroundColor-neutralLighterAlt" ] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-name-avatar", "route": "samples/column/person-name-avatar/", "preview": "generated/previews/column-person-name-avatar.webp", "previewAlt": "People Name Avatar Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-name-avatar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-name-avatar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-name-avatar/person-name-avatar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-name-avatar/person-name-avatar.json", "sha256": "0b683e5207efc46045c4a4c051544a52f8c8fd731f72367675e25eb1335a1ec9" } ] }, { "id": "view-samples/highlighted-announcements", "family": "view", "slug": "highlighted-announcements", "title": "Highlighted Announcements", "description": "A list formatting style that visually emphasizes important announcements.", "longDescription": [ "A SharePoint list formatting sample that visually emphasizes important announcements to draw attention using custom icons, background colors, titles, descriptions, and links." ], "created": "2025-08-24T00:00:00.000Z", "updated": "2025-08-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/highlighted-announcements", "route": "samples/view/highlighted-announcements/", "preview": "generated/previews/view-highlighted-announcements.webp", "previewAlt": "Highlighted Announcements formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/highlighted-announcements/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/highlighted-announcements/assets/field-mapping.png", "alt": "screenshot" } ], "definitions": [ { "filename": "highlighted-announcements.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/highlighted-announcements/highlighted-announcements.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/highlighted-announcements/highlighted-announcements.json", "sha256": "2f2329bf6ad08717a3c4da0d900ebb2fe20a0d5c48c05a33d290b6ab647a56f4" } ] }, { "id": "column-samples/date-day-counter", "family": "column", "slug": "date-day-counter", "title": "Days Counter", "description": "This sample shows how many days are left until a date or how many days have passed since a date, right inside a SharePoint list column. Color-coded for quick scanning.", "longDescription": [ "This sample shows how many days are left until a date or how many days have passed since a date, right inside a SharePoint list column. Color-coded for quick scanning." ], "created": "2025-08-19T00:00:00.000Z", "updated": "2025-08-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Date", "floor", "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tvahk", "pictureUrl": "https://github.com/tvahk.png", "name": "Tanel Vahk", "key": "tvahk" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-day-counter", "route": "samples/column/date-day-counter/", "preview": "generated/previews/column-date-day-counter.webp", "previewAlt": "Days Counter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-day-counter/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-day-counter.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-day-counter/date-day-counter.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-day-counter/date-day-counter.json", "sha256": "84fcdffb50af43a37b2c9093e9de22a950cf63012c1a0cc470a266053a6d4a8d" } ] }, { "id": "view-samples/weekly-heatmap", "family": "view", "slug": "weekly-heatmap", "title": "Weekly Heatmap", "description": "This sample uses SharePoint List Formatting to display weekly data as a heatmap calendar view.", "longDescription": [ "This sample uses SharePoint List Formatting to display weekly data as a heatmap calendar view." ], "created": "2025-08-19T00:00:00.000Z", "updated": "2025-08-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "saiiiiiii", "pictureUrl": "https://github.com/saiiiiiii.png", "name": "Sai Bandaru", "key": "saiiiiiii" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/weekly-heatmap", "route": "samples/view/weekly-heatmap/", "preview": "generated/previews/view-weekly-heatmap.webp", "previewAlt": "Weekly Heatmap formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/weekly-heatmap/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "weekly-heatmap.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/weekly-heatmap/weekly-heatmap.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/weekly-heatmap/weekly-heatmap.json", "sha256": "465ccaee9ce70bf6dddeee72028dab7396835e89e5f742812bba7512caa6d19d" } ] }, { "id": "view-samples/faq-grouped", "family": "view", "slug": "faq-grouped", "title": "Grouped FAQs", "description": "This sample uses standard group rendering to provide a list of expandable questions.", "longDescription": [ "This sample uses standard group rendering to provide a list of expandable questions. By default, when grouping by a column the column name and the count of grouped items will be included in the group name. This format provides some small tweaks to the group header to only show the value (question in this case). By also hiding the column header and item selection, this format acts like a mini application and could easily be added to a page using the list web part." ], "created": "2022-04-15T00:00:00.000Z", "updated": "2025-08-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Frequently Asked Questions", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "groupProps", "headerFormatter", "additionalRowClass", "rowFormatter" ], "CLASSES": [ "sp-row-title", "ms-fontSize-xl", "ms-font-l", "ms-fontColor-neutralPrimary", "ms-bgColor-white--hover" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" }, { "gitHubAccount": "stevecorey365", "pictureUrl": "https://github.com/stevecorey365.png", "name": "Steve Corey", "key": "stevecorey365" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-grouped", "route": "samples/view/faq-grouped/", "preview": "generated/previews/view-faq-grouped.webp", "previewAlt": "Grouped FAQs formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/faq-grouped/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "faq-grouped-full-width-answer.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/faq-grouped/faq-grouped-full-width-answer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/faq-grouped/faq-grouped-full-width-answer.json", "sha256": "c7a1b0c5be79ade4113be938ad63b7b791a925674d3bca98b954e1874d88ec59" }, { "filename": "faq-grouped.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/faq-grouped/faq-grouped.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/faq-grouped/faq-grouped.json", "sha256": "aeb9d5f0d261df5b311110a3e506754709761d5244fe60eecbeb9a078bfe5e72" } ] }, { "id": "view-samples/image-card-tiles", "family": "view", "slug": "image-card-tiles", "title": "Image Card Tiles", "description": "This sample shows images in a tile layout using SharePoint's Gallery view. Each image tile is clickable and opens a link from another column.", "longDescription": [ "This sample demonstrates how to create a visually appealing tile layout for images in SharePoint lists using the Gallery view. Each tile contains an image that is clickable, linking to a URL specified in another column. The design includes a clean, modern look with rounded corners and a shadow effect, making it suitable for showcasing images in a gallery or catalog format. This is a view formatter (tile formatter) that applies to the entire Gallery view." ], "created": "2025-08-11T00:00:00.000Z", "updated": "2025-08-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "nanddeepn", "pictureUrl": "https://github.com/nanddeepn.png", "name": "Nanddeep Nachan", "key": "nanddeepn" }, { "gitHubAccount": "smitanachan", "pictureUrl": "https://github.com/smitanachan.png", "name": "Smita Nachan", "key": "smitanachan" } ], "references": [ { "name": "Use view formatting to customize SharePoint", "description": "You can use view formatting to customize how list views in SharePoint lists and libraries are displayed. View formatting allows you to customize the entire rendering of a view by constructing a JSON object that describes the elements that are displayed and the styles to be applied to those elements.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-card-tiles", "route": "samples/view/image-card-tiles/", "preview": "generated/previews/view-image-card-tiles.webp", "previewAlt": "Image Card Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-card-tiles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "image-card-tiles.json", "target": "View formatting", "schemaIssues": [ "/height must match pattern \"^[0-9]+$\"" ], "download": "generated/definitions/view-samples/image-card-tiles/image-card-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/image-card-tiles/image-card-tiles.json", "sha256": "c5303693016ab142794bd380895dcd457e63bcb67e1457ad70019df9539fae1c" } ] }, { "id": "column-samples/generic-yearly-gantt-chart", "family": "column", "slug": "generic-yearly-gantt-chart", "title": "Yearly Gantt Chart", "description": "This sample demonstrates the display of a yearly Gantt chart.", "longDescription": [ "This sample demonstrates the display of a yearly Gantt chart." ], "created": "2021-04-12T00:00:00.000Z", "updated": "2025-08-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number", "Date", "getYear", "floor", "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-bgColor-themePrimary", "ms-bgColor-themeTertiary", "ms-bgColor-themeTertiary--hover", "ms-bgColor-sharedRed10", "ms-fontWeight-bold", "ms-fontSize-l", "ms-bgColor-themeLight--hover", "ms-bgColor-neutralSecondary--hover", "ms-bgColor-neutralTertiary", "ms-bgColor-orangeLight--hover", "ms-fontColor-themeTertiary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiary", "ms-fontSize-mi" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" }, { "gitHubAccount": "hakki-max", "pictureUrl": "https://github.com/hakki-max.png", "name": "Alvin Fong", "key": "hakki-max" }, { "gitHubAccount": "DRVRogo", "pictureUrl": "https://github.com/DRVRogo.png", "name": "DRVRogo", "key": "drvrogo" }, { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-yearly-gantt-chart", "route": "samples/column/generic-yearly-gantt-chart/", "preview": "generated/previews/column-generic-yearly-gantt-chart.webp", "previewAlt": "Yearly Gantt Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-yearly-gantt-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-yearly-gantt-chart-with-today.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-yearly-gantt-chart/generic-yearly-gantt-chart-with-today.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-yearly-gantt-chart/generic-yearly-gantt-chart-with-today.json", "sha256": "48f1a3345629555403f9a492682ce4ab9834d142f332abf4589bf50c2e2a6b5a" }, { "filename": "generic-yearly-gantt-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-yearly-gantt-chart/generic-yearly-gantt-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-yearly-gantt-chart/generic-yearly-gantt-chart.json", "sha256": "2b5b47c42cde6010b03650e7b2562872a10b743b5320c432bc3021ca96533430" } ] }, { "id": "column-samples/generic-rowactions", "family": "column", "slug": "generic-rowactions", "title": "Row Actions", "description": "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.", "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." ], "created": "2019-04-18T00:00:00.000Z", "updated": "2025-07-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "delete", "editProps", "executeFlow", "defaultClick", "share", "comment", "copyFile", "moveFile", "embed", "previewFileAction", "openContextMenu", "openApprovalDialog", "setValue", "copyLink" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-themeDark--hover", "ms-font-xxl", "ms-font-xl" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-rowactions", "route": "samples/column/generic-rowactions/", "preview": "generated/previews/column-generic-rowactions.webp", "previewAlt": "Row Actions formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-rowactions/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-rowactions/assets/screenshot2.png", "alt": "screenshot2" } ], "definitions": [ { "filename": "comment.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/comment.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/comment.json", "sha256": "eeb33fbe3ffd176b6167748b66ce7a0cc2216eb29b21b1f59844d2966509b394" }, { "filename": "copyFile.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/copyFile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/copyFile.json", "sha256": "37a899e57899eeb3c111289e2cc14ac455df38a91b540ef8e1355cee215fab86" }, { "filename": "copyLink.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/copyLink.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/copyLink.json", "sha256": "7093fb8d995a0ca32827d780ec1c9d33ced218c54d2d9dc78776bb0cbfd5e2ae" }, { "filename": "delete.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/delete.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/delete.json", "sha256": "76b8c712e7e7c3e8a14cd9e1196b6868e54f3d6eefeae75b088b6b7ee424dc9e" }, { "filename": "editProps.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/editProps.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/editProps.json", "sha256": "c8af71ce8356e9eff78e87f062a45d2d99d8f2eda56cdcc64ba5a36548bf25a4" }, { "filename": "embed.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/embed.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/embed.json", "sha256": "1a8b61a3935ece677ec1c3f640f2565e9c1ef6f6548be63439aca6d5061363e9" }, { "filename": "executeFlow.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/executeFlow.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/executeFlow.json", "sha256": "31b476d4958f22b8c1c91fd5cf6e77966a78c8f720fd31100725224a85fb6e41" }, { "filename": "generic-rowactions.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/generic-rowactions.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/generic-rowactions.json", "sha256": "962797b03a1a3d51a645e28b894b6802cba78fc3cf5e08d384f1525751ba96fb" }, { "filename": "moveFile.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/moveFile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/moveFile.json", "sha256": "b051b1a58164b8773a630cd66436142d8db74bee201417226a2d456a2de46297" }, { "filename": "openApprovalDialog.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/openApprovalDialog.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/openApprovalDialog.json", "sha256": "dfcd4f1d14ce0d44ba8d5b0ebebb5c79ac0d3456a16f59565a7670bb1873cd2b" }, { "filename": "openContextMenu.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/openContextMenu.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/openContextMenu.json", "sha256": "4888b4a39ed5f713190b89852d4c08527cd2599f17cd444f535db983b7fc4109" }, { "filename": "previewFileAction.json", "target": "Column formatting", "schemaIssues": [ "/customRowAction/action must be equal to one of the allowed values", "/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-rowactions/previewFileAction.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/previewFileAction.json", "sha256": "32b8de1a6ff7618f20b863cd7a95b1e7e30bbf6bf31b487735c3a5c07e911150" }, { "filename": "setValue.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/setValue.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/setValue.json", "sha256": "68e0b84aacea8d1f1cce81c839d2da02fa3efbe6f1e5cd45e225bc672e224a0a" }, { "filename": "share.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowactions/share.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowactions/share.json", "sha256": "60d8dd0ff71c5f0fc531d61a5c35364cf8aa1090fdffb6ae8ef8cf9ad95db4e8" } ] }, { "id": "view-samples/image-grid", "family": "view", "slug": "image-grid", "title": "Image Grid", "description": "This sample includes two formats to display images in Lists as grid - row formatter and tile formatter for Gallery view.", "longDescription": [ "This sample includes two different formats to display images in Lists as grid:", "1. image-grid.json - Row formatter for standard list views", "2. Image-grid-horizontally.json - Tile formatter designed for Gallery view type to ensure proper horizontal display" ], "created": "2023-05-20T00:00:00.000Z", "updated": "2025-07-30T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Image", "Hover Cards", "Gallery", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "reshmee011", "pictureUrl": "https://github.com/reshmee011.png", "name": "Reshmee Auckloo", "key": "reshmee011" }, { "gitHubAccount": "ValerasNarbutas", "pictureUrl": "https://github.com/ValerasNarbutas.png", "name": "Valeras Narbutas", "key": "valerasnarbutas" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-grid", "route": "samples/view/image-grid/", "preview": "generated/previews/view-image-grid.webp", "previewAlt": "Image Grid formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot-animated.gif", "alt": "screenshot-animated" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshotHorisontal.png", "alt": "screenshot-horizontal" } ], "definitions": [ { "filename": "image-grid-horizontally.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/image-grid/image-grid-horizontally.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/image-grid/image-grid-horizontally.json", "sha256": "f4828b19134ebb03192a3704c44265f5743b049ebd5d3d5d81e50e2a546d3ede" }, { "filename": "image-grid.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/image-grid/image-grid.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/image-grid/image-grid.json", "sha256": "e7a6544cab20a1900f682725b7b5659d587bb2ef2e26dd5fd50cc33b5cdf9857" } ] }, { "id": "column-samples/generic-action-buttons", "family": "column", "slug": "generic-action-buttons", "title": "Incident Action Buttons", "description": "Adds Escalate and Resolve buttons to incident lists using column formatting and executeFlow.", "longDescription": [ "This sample demonstrates how to embed action buttons into a SharePoint list column using column formatting.The Escalate button is enabled only when Priority = high; the Resolve button is enabled when Status is not 'new'. Each button is linked to a Power Automate flow via executeFlow." ], "created": "2025-07-16T00:00:00.000Z", "updated": "2025-07-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Automate" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "executeFlow" ], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "LuiseFreese", "pictureUrl": "https://github.com/LuiseFreese.png", "name": "Luise Freese", "key": "luisefreese" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-action-buttons", "route": "samples/column/generic-action-buttons/", "preview": "generated/previews/column-generic-action-buttons.webp", "previewAlt": "Escalate and Resolve buttons in a SharePoint list", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-action-buttons/assets/screenshot.png", "alt": "Escalate and Resolve buttons in a SharePoint list" } ], "definitions": [ { "filename": "generic-action-buttons.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-action-buttons/generic-action-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-action-buttons/generic-action-buttons.json", "sha256": "6096237b946df824091232cf629517f0a9e180dcb6f9ff76766777baa923a9a2" } ] }, { "id": "column-samples/managed-metadata-button", "family": "column", "slug": "managed-metadata-button", "title": "Managed Metadata Values to Buttons", "description": "This sample demonstrates changing managed metadata (multiple) values to buttons that open (external) sites, documents or items on other links.", "longDescription": [ "This sample demonstrates changing managed metadata (multiple) values to buttons that open (external) sites, documents or items on other links." ], "created": "2025-06-26T00:00:00.000Z", "updated": "2025-06-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Managed Metadata" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-bgColor-gray30", "ms-fontColor-sharedGray30", "ms-fontColor-black--hover" ] }, "authors": [ { "gitHubAccount": "DAGiessenburg", "pictureUrl": "https://github.com/DAGiessenburg.png", "name": "Daniel Giessenburg", "key": "dagiessenburg" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/managed-metadata-button", "route": "samples/column/managed-metadata-button/", "preview": "generated/previews/column-managed-metadata-button.webp", "previewAlt": "Managed Metadata Values to Buttons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/managed-metadata-button/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/managed-metadata-button/assets/screenshot_normreference.png", "alt": "screenshot 2" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/managed-metadata-button/assets/screenshot_projects.png", "alt": "screenshot 3" } ], "definitions": [ { "filename": "managed-metadata-button.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/managed-metadata-button/managed-metadata-button.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-button/managed-metadata-button.json", "sha256": "015e05294ea5dbecedd283ae2915fab9d7c51c774176506d3d48aa77e4f2e771" } ] }, { "id": "view-samples/bookmarks", "family": "view", "slug": "bookmarks", "title": "Bookmarks", "description": "Creating custom bookmarks for SharePoint page.", "longDescription": [ "Creating custom bookmarks for SharePoint page." ], "created": "2025-06-22T00:00:00.000Z", "updated": "2025-06-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData", "@group.count" ], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-fontColor-neutralSecondary-hover" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bookmarks", "route": "samples/view/bookmarks/", "preview": "generated/previews/view-bookmarks.webp", "previewAlt": "Bookmarks formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bookmarks/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "bookmarks.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/bookmarks/bookmarks.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bookmarks/bookmarks.json", "sha256": "9d906111de9c933fb38db314167b612e48f0ccca95971ddd8cc6220b745cab94" } ] }, { "id": "view-samples/menu-style-list", "family": "view", "slug": "menu-style-list", "title": "Menu Style List", "description": "This sample transforms SharePoint list items into a styled menu layout using list view formatting.", "longDescription": [ "This sample transforms SharePoint list items into a styled menu layout using list view formatting." ], "created": "2025-06-03T00:00:00.000Z", "updated": "2025-06-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "hideSelection", "hideColumnHeader", "rowFormatter", "headerFormatter" ], "CLASSES": [ "ms-bgColor-communicationTint20", "ms-bgColor-white" ] }, "authors": [ { "gitHubAccount": "tvahk", "pictureUrl": "https://github.com/tvahk.png", "name": "Tanel Vahk", "key": "tvahk" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/menu-style-list", "route": "samples/view/menu-style-list/", "preview": "generated/previews/view-menu-style-list.webp", "previewAlt": "Menu Style List formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-style-list/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-style-list/assets/FormattedMenuList_Page.png", "alt": "screenshot" } ], "definitions": [ { "filename": "menu-style-list.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/menu-style-list/menu-style-list.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/menu-style-list/menu-style-list.json", "sha256": "7c3b50d7f90a3fae7d39b0eab8cb56a89fb3160107e0db8fdc2b5a9340fd2d99" } ] }, { "id": "view-samples/diet-plan-card", "family": "view", "slug": "diet-plan-card", "title": "Diet Plan Card Formatter", "description": "This SharePoint JSON view formatting sample transforms your list items into rich, visually appealing diet plan cards.", "longDescription": [ "This SharePoint JSON view formatting sample transforms your list items into rich, visually appealing diet plan cards." ], "created": "2025-05-03T00:00:00.000Z", "updated": "2025-05-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "CommandBar Customization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/diet-plan-card", "route": "samples/view/diet-plan-card/", "preview": "generated/previews/view-diet-plan-card.webp", "previewAlt": "Diet Plan Card Formatter formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/diet-plan-card/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/diet-plan-card/assets/sample2.png", "alt": "screenshot" } ], "definitions": [ { "filename": "diet-plan-card.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/3/children/0 must NOT have additional properties" ], "download": "generated/definitions/view-samples/diet-plan-card/diet-plan-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/diet-plan-card/diet-plan-card.json", "sha256": "053b2b58c4c48c4001607fe8b4e32dbcf40f56fd0452618e4710016c9ed0af02" } ] }, { "id": "view-samples/travel-tweets-board", "family": "view", "slug": "travel-tweets-board", "title": "Travel Tweets Board", "description": "This sample demonstrates using the board view to display travel tweets in a timeline format. Each tweet supports one image and one map link.", "longDescription": [ "This sample demonstrates using the board view to display travel tweets in a timeline format. Each tweet supports one image and one map link." ], "created": "2025-04-27T00:00:00.000Z", "updated": "2025-04-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Board", "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@window.innerHeight", "@window.innerWidth" ], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "forEach", "hideSelection", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-bgColor-themeDark--hover", "ms-bgColor-themePrimary", "ms-bgColor-white", "ms-fontColor-themeDark--hover", "ms-fontColor-themePrimary", "ms-fontColor-white", "sp-card-borderHighlight", "sp-card-container", "sp-card-container-noPadding", "sp-card-subContainer", "sp-card-subContainer-borderRadius", "sp-css-borderColor-neutralLight", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/travel-tweets-board", "route": "samples/view/travel-tweets-board/", "preview": "generated/previews/view-travel-tweets-board.webp", "previewAlt": "Travel Tweets Board formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/travel-tweets-board/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "travel-tweets-board.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/travel-tweets-board/travel-tweets-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/travel-tweets-board/travel-tweets-board.json", "sha256": "ecaa6476353f8b757976c3990b823a0a6181dada8b7098fc6ac19cfc9534318a" } ] }, { "id": "view-samples/employee-recognition-card", "family": "view", "slug": "employee-recognition-card", "title": "Employee Recognition Card", "description": "This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.", "longDescription": [ "This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes." ], "created": "2025-04-21T00:00:00.000Z", "updated": "2025-04-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage", "Number" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/employee-recognition-card", "route": "samples/view/employee-recognition-card/", "preview": "generated/previews/view-employee-recognition-card.webp", "previewAlt": "Employee Recognition Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/employee-recognition-card/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "employee-recognition-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/employee-recognition-card/employee-recognition-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/employee-recognition-card/employee-recognition-card.json", "sha256": "95f50f0b9e5ba8c98cfb8a28e4f728339908f5d2b4f35f43be83d511666e109f" } ] }, { "id": "column-samples/number-doughnut-chart", "family": "column", "slug": "number-doughnut-chart", "title": "Doughnut Chart", "description": "Changes the appearance of the values in number columns (percent) to a donut chart.", "longDescription": [ "This sample changes the appearance of the values in number columns (percent) to a donut chart. The donut chart is displayed using svg." ], "created": "2021-08-20T00:00:00.000Z", "updated": "2025-04-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "cos", "sin" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-neutralQuaternaryAlt" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-doughnut-chart", "route": "samples/column/number-doughnut-chart/", "preview": "generated/previews/column-number-doughnut-chart.webp", "previewAlt": "Doughnut Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-doughnut-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-doughnut-chart-compact.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-doughnut-chart/number-doughnut-chart-compact.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-doughnut-chart/number-doughnut-chart-compact.json", "sha256": "554d84e575400307415b93fb7985cc14ad93a9d5247deec628bdcc4a9aa335f5" }, { "filename": "number-doughnut-chart-icon-only.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-doughnut-chart/number-doughnut-chart-icon-only.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-doughnut-chart/number-doughnut-chart-icon-only.json", "sha256": "3f5266154084f847e295693b290d493e1cc2c7bfe9f91856b33040586f660d30" }, { "filename": "number-doughnut-chart-percent-only.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-doughnut-chart/number-doughnut-chart-percent-only.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-doughnut-chart/number-doughnut-chart-percent-only.json", "sha256": "78d7a29b05bfddbdda656fa8069717ee5c2784c60492232ee6b8ac72798438cf" }, { "filename": "number-doughnut-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-doughnut-chart/number-doughnut-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-doughnut-chart/number-doughnut-chart.json", "sha256": "23980b01cb036cd824ee5ea66c4e507bf89c2115f5622c5731429e09483c4b70" } ] }, { "id": "column-samples/generic-context-menu", "family": "column", "slug": "generic-context-menu", "title": "Context Menu", "description": "The sample is a simple version of the current context menu. It allows you to customize the menu options and link to the most user of visited links. You can add links to Flows, web pages, or other items specific the the item it is on.", "longDescription": [ "The sample is a simple version of the current context menu. It allows you to customize the menu options and link to the most user of visited links. You can add links to Flows, web pages, or other items specific the the item it is on." ], "created": "2024-04-02T00:00:00.000Z", "updated": "2025-02-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "defaultClick", "executeFlow", "editProps", "delete" ], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-borderColor-ThemeLight", "ms-fontColor-red--hover ms-font-l", "ms-fontColor-black--hover", "ms-fontColor-themeLighter", "ms-bgColor-themeLighter--hover", "ms-bgColor-gray50--hover", "ms-bgColor-success--hover", "ms-fontColor-black--hover", "ms-Link", "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "jaxkookie", "pictureUrl": "https://github.com/jaxkookie.png", "name": "Larry Pfaff", "key": "jaxkookie" }, { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-context-menu", "route": "samples/column/generic-context-menu/", "preview": "generated/previews/column-generic-context-menu.webp", "previewAlt": "Context Menu formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-context-menu/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-context-menu-minimal.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-context-menu/generic-context-menu-minimal.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-context-menu/generic-context-menu-minimal.json", "sha256": "7e802d64e69fa692f24afeaae0748c751720088f9ffa90e0178888b8b1ce6117" }, { "filename": "generic-context-menu.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-context-menu/generic-context-menu.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-context-menu/generic-context-menu.json", "sha256": "f553b5fc8c273ff434e2a6c854a013131900be4cceaed695bd2905c28436353a" } ] }, { "id": "column-samples/generic-monthly-gantt-chart", "family": "column", "slug": "generic-monthly-gantt-chart", "title": "Monthly Gantt Chart", "description": "This sample demonstrates the display of a monthly Gantt chart. The Gantt chart for the month corresponding to the StartDate value will be shown.", "longDescription": [ "This sample demonstrates the display of a monthly Gantt chart. The Gantt chart for the month corresponding to the StartDate value will be shown." ], "created": "2025-02-16T00:00:00.000Z", "updated": "2025-02-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "Date", "getYear", "getMonth" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "AMandour", "pictureUrl": "https://github.com/AMandour.png", "name": "Ahmed Mandour", "key": "amandour" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-monthly-gantt-chart", "route": "samples/column/generic-monthly-gantt-chart/", "preview": "generated/previews/column-generic-monthly-gantt-chart.webp", "previewAlt": "Monthly Gantt Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-monthly-gantt-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-monthly-gantt-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-monthly-gantt-chart/generic-monthly-gantt-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-monthly-gantt-chart/generic-monthly-gantt-chart.json", "sha256": "c2a2a77feec4bbebf40dfc04e6390d117fe59d5e6d0614d98a31e5266c932113" } ] }, { "id": "view-samples/person-quote-card", "family": "view", "slug": "person-quote-card", "title": "Person Quote Card", "description": "This sample transforms list items into a template that displates quotes from People with a link to their Twitter (X) handle.", "longDescription": [ "This sample transforms list items into a template that displates quotes from People with a link to their Twitter (X) handle." ], "created": "2025-01-14T00:00:00.000Z", "updated": "2025-01-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideColumnHeader", "hideSelection", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/person-quote-card", "route": "samples/view/person-quote-card/", "preview": "generated/previews/view-person-quote-card.webp", "previewAlt": "Person Quote Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/person-quote-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-quote-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/person-quote-card/person-quote-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/person-quote-card/person-quote-card.json", "sha256": "9e48fd07e3e92f6fe0c6a08231a87b22c3e0233f4ffd0d166bcaf76a87c41724" } ] }, { "id": "view-samples/department-members-list", "family": "view", "slug": "department-members-list", "title": "Department Members List", "description": "Turn list items into a custom table", "longDescription": [ "This sample demonstrates how to turn list items into a custom table and bring additional information from the Person column." ], "created": "2024-12-22T00:00:00.000Z", "updated": "2024-12-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-borderColor-themeSecondary--hover", "ms-borderColor-white", "ms-bgColor-themeLighter", "ms-bgColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/department-members-list", "route": "samples/view/department-members-list/", "preview": "generated/previews/view-department-members-list.webp", "previewAlt": "Department Members List formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/department-members-list/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "department-members-list.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/department-members-list/department-members-list.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/department-members-list/department-members-list.json", "sha256": "511598854dcc3bd188581d9bd49a260978edb0ec2d17217d4fa750844056fda0" } ] }, { "id": "view-samples/glossary-dynamicfilter-view", "family": "view", "slug": "glossary-dynamicfilter-view", "title": "Glossary View Formatters", "description": "View formatters to buid a glossary page using connected list WebParts.", "longDescription": [ "View formatters to buid a glossary page using connected list WebParts." ], "created": "2021-04-04T00:00:00.000Z", "updated": "2024-12-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "fillHorizontally", "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-white", "ms-borderColor-themeDark", "ms-fontColor-neutralPrimary", "ms-fontColor-white", "ms-fontSize-11", "ms-fontSize-12", "ms-fontSize-16", "sp-card-lastTextColumnContainer", "sp-css-borderColor-neutralLight ms-fontColor-yellow--hover" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" }, { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/glossary-dynamicfilter-view", "route": "samples/view/glossary-dynamicfilter-view/", "preview": "generated/previews/view-glossary-dynamicfilter-view.webp", "previewAlt": "Glossary View Formatters formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/glossary-dynamicfilter-view/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/glossary-dynamicfilter-view/assets/gFilterWPSetup.png", "alt": "screenshot 2" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/glossary-dynamicfilter-view/assets/gTermsWPSetup.png", "alt": "screenshot 3" } ], "definitions": [ { "filename": "glossary-dynamicfilter-view.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/glossary-dynamicfilter-view/glossary-dynamicfilter-view.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/glossary-dynamicfilter-view/glossary-dynamicfilter-view.json", "sha256": "f67daa6166e5b5bfbca2ad8c30d3dde6842871fecd2c592a81e1f86924ff3022" }, { "filename": "glossary-filter-background.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/glossary-dynamicfilter-view/glossary-filter-background.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/glossary-dynamicfilter-view/glossary-filter-background.json", "sha256": "380bf50a6a48f86dbaddd4bf07d26e9e3817b4a42a553fc5ecfdbb711e90ca3d" }, { "filename": "glossary-filter.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/glossary-dynamicfilter-view/glossary-filter.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/glossary-dynamicfilter-view/glossary-filter.json", "sha256": "00995857f22648d8eddf91db244c0284af58886e760ced7ee6c87325dc43d947" } ] }, { "id": "view-samples/head-of-bu-overview", "family": "view", "slug": "head-of-bu-overview", "title": "Head of Business Unit Overview", "description": "A visually appealing overview of business unit leaders to display key information at a glance.", "longDescription": [ "This sample shows how to transform a plain list view into a visually appealing overview of business unit leaders to display key information at a glance." ], "created": "2024-12-13T00:00:00.000Z", "updated": "2024-12-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData" ], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "hideSelection", "hideColumnHeader", "rowFormatter", "defaultHoverField", "headerFormatter" ], "CLASSES": [ "ms-borderColor-white", "ms-borderColor-yellow--hover" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/head-of-bu-overview", "route": "samples/view/head-of-bu-overview/", "preview": "generated/previews/view-head-of-bu-overview.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/head-of-bu-overview/assets/screenshot.png", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "head-of-bu-overview.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/head-of-bu-overview/head-of-bu-overview.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/head-of-bu-overview/head-of-bu-overview.json", "sha256": "e7ff8652fced901a7dba095ac7245a26ade2fd3c0cadc25fe6d9429e8291ebea" } ] }, { "id": "view-samples/picture-link-tiles", "family": "view", "slug": "picture-link-tiles", "title": "Picture Link Tiles", "description": "This sample demonstrates a link collection using picture and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format.", "longDescription": [ "This sample demonstrates a link collection using picture and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format." ], "created": "2024-12-01T00:00:00.000Z", "updated": "2024-12-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count" ], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLighter", "ms-bgColor-white", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralTertiaryAlt", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" }, { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/picture-link-tiles", "route": "samples/view/picture-link-tiles/", "preview": "generated/previews/view-picture-link-tiles.webp", "previewAlt": "Picture Link Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-link-tiles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "picture-link-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-link-tiles/picture-link-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-link-tiles/picture-link-tiles.json", "sha256": "2b40d9a7f6cb5867925c05dc322b23c837904db055d6912d7d24c9b6962a7149" } ] }, { "id": "view-samples/london-tube-status", "family": "view", "slug": "london-tube-status", "title": "London Underground Line Status", "description": "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. ", "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. " ], "created": "2020-10-24T00:00:00.000Z", "updated": "2024-11-28T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "replace" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-white", "ms-fontColor-black" ] }, "authors": [ { "gitHubAccount": "LeonArmston", "pictureUrl": "https://github.com/LeonArmston.png", "name": "Leon Armston", "key": "leonarmston" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/london-tube-status", "route": "samples/view/london-tube-status/", "preview": "generated/previews/view-london-tube-status.webp", "previewAlt": "London Underground Line Status formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/london-tube-status/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/london-tube-status/assets/screenshot-animated.gif", "alt": "screenshot-animated" } ], "definitions": [ { "filename": "london-tube-status.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/london-tube-status/london-tube-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/london-tube-status/london-tube-status.json", "sha256": "207b0ed372103467add70ca2f88973de054f44de16a11075af727c614d88832f" } ] }, { "id": "view-samples/board-tags", "family": "view", "slug": "board-tags", "title": "Board Tags", "description": "This sample displays a formatted card in a board view that enables tagging, updating card dates, menu options to reorder cards within their category, sharing links, flag (focus colors), assigning a user, and minimizing/expanding the card. This List format also uses embedded action to open custom Power Apps with parameters for digital signature of user and report generator.", "longDescription": [ "This sample displays a formatted card in a board view that enables tagging, updating card dates, menu options to reorder cards within their category, sharing links, flag (focus colors), assigning a user, and minimizing/expanding the card. This List format also uses embedded action to open custom Power Apps with parameters for digital signature of user and report generator." ], "created": "2022-03-05T00:00:00.000Z", "updated": "2024-11-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Board", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "toString", "loopIndex", "toLocaleDateString", "indexOf", "length", "getUserImage", "substring", "getDate", "getMonth", "getYear", "lastIndexOf", "replace", "getThumbnailImage" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "share", "delete", "editProps", "embed" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "columnFormatterReference", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralLight", "ms-bgColor-neutralLighter--hover", "ms-bgColor-white", "ms-bgColor-gray30--hover", "ms-fontColor-themePrimary", "ms-fontColor-themeTertiary--hover", "ms-fontColor-neutralSecondary", "ms-fontColor-white", "ms-fontColor-gray100", "ms-fontWeight-bold", "ms-fontSize-20", "ms-fontSize-16", "ms-fontSize-12", "ms-fontSize-10", "sp-css-backgroundColor-neutralLighterAlt", "sp-card-personCallout", "sp-card-container", "sp-card-keyboard-focusable", "sp-card-userContainer", "sp-card-userThumbnail", "sp-card-userOthers", "sp-card-userTitle", "sp-card-userCustomCard", "sp-card-container-noPadding", "sp-field-italic" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/board-tags", "route": "samples/view/board-tags/", "preview": "generated/previews/view-board-tags.webp", "previewAlt": "Timeline in Board View", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/board-tags/assets/screenshot.gif", "alt": "Timeline in Board View" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/board-tags/assets/screenshot-card-tasks.png", "alt": "Card Tasks" } ], "definitions": [ { "filename": "board-tags-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/board-tags/board-tags-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/board-tags/board-tags-cards.json", "sha256": "8420834b5910cae37542eb424a088219b55e3a7552ffeb1d3cb5626faef8bbc1" }, { "filename": "board-tags.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/0/children/1/children/0/children/4/children/1/customRowAction/action must be equal to one of the allowed values", "/formatter/children/0/children/1/children/0/children/4/children/1/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/view-samples/board-tags/board-tags.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/board-tags/board-tags.json", "sha256": "2c35def67456fe61dbda260fb76d951fcb18a3c4d0dc81292ca2cb6df1e44d09" } ] }, { "id": "column-samples/image-hyperlink", "family": "column", "slug": "image-hyperlink", "title": "Changing Image Hyperlink Standard Behavior", "description": "If you click on an image in a SharePoint list, the image is displayed as a preview. This formatter changes the standard behavior in which a link from another column is used. In this way, a click on the image has the same behavior as if the link had been clicked directly.", "longDescription": [ "If you click on an image in a SharePoint list, the image is displayed as a preview. This formatter changes the standard behavior in which a link from another column is used. In this way, a click on the image has the same behavior as if the link had been clicked directly." ], "created": "2024-11-21T00:00:00.000Z", "updated": "2024-11-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Image" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "samurai-ka", "pictureUrl": "https://github.com/samurai-ka.png", "name": "Hagen Deike", "key": "samurai-ka" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/image-hyperlink", "route": "samples/column/image-hyperlink/", "preview": "generated/previews/column-image-hyperlink.webp", "previewAlt": "Changing Image Hyperlink Standard Behavior formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/image-hyperlink/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "image-hyperlink.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/image-hyperlink/image-hyperlink.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/image-hyperlink/image-hyperlink.json", "sha256": "f836685c57cefb3e9a7bc3f10b0d76db742a29d8ab9447ba4f964194cf8987be" } ] }, { "id": "column-samples/multi-choice-workcategory-pill", "family": "column", "slug": "multi-choice-workcategory-pill", "title": "Work Progress Category Pill ", "description": "This JSON sample demonstrates how you can format the work progress category choices as pills found in the newly released Microsoft Lists Work progress tracker template.", "longDescription": [ "This JSON sample demonstrates how you can format the work progress category choices as pills found in the newly released Microsoft Lists Work progress tracker template." ], "created": "2020-08-08T00:00:00.000Z", "updated": "2024-11-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "sp-css-backgroundColor-errorBackground", "sp-css-backgroundColor-warningBackground", "sp-css-backgroundColor-successBackground", "sp-css-backgroundColor-blue", "sp-css-backgroundColor-neutralBackground", "sp-css-backgroundColor-blueBackground07", "sp-field-borderBottomRegular", "sp-field-borderBottomSolid" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "ganesh-sanap" }, { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-workcategory-pill", "route": "samples/column/multi-choice-workcategory-pill/", "preview": "generated/previews/column-multi-choice-workcategory-pill.webp", "previewAlt": "Work Progress Category Pill formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-workcategory-pill/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-workcategory-pill.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-workcategory-pill/multi-choice-workcategory-pill.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-workcategory-pill/multi-choice-workcategory-pill.json", "sha256": "f04f371f91a05b37fca581c41d4d4e2c7793f5a1239767ad22d8e7bc88354a23" }, { "filename": "text-column-workcategory-pill.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-workcategory-pill/text-column-workcategory-pill.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-workcategory-pill/text-column-workcategory-pill.json", "sha256": "ac71e9a51d03241b27ec945365d7e0c4d0505020ab86a0256ba297d5e8cd7f8e" } ] }, { "id": "view-samples/announcements", "family": "view", "slug": "announcements", "title": "Announcements", "description": "This sample formats your view to look like a Announcements card with a similiar style to Viva Connection Cards when on a SharePoint Page. In Microsoft Lists it will also show an image that you can connect with the Announcement.", "longDescription": [ "This sample formats your view to look like a Announcements card with a similiar style to Viva Connection Cards when on a SharePoint Page. In Microsoft Lists it will also show an image that you can connect with the Announcement." ], "created": "2021-12-01T00:00:00.000Z", "updated": "2024-11-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "DRamalho92", "pictureUrl": "https://github.com/DRamalho92.png", "name": "David Ramalho", "key": "dramalho92" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/announcements", "route": "samples/view/announcements/", "preview": "generated/previews/view-announcements.webp", "previewAlt": "Announcements formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/announcements/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/announcements/assets/screenshot2.png", "alt": "screenshot2" } ], "definitions": [ { "filename": "announcements.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/announcements/announcements.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/announcements/announcements.json", "sha256": "f1d1295f60833da82ed0c7dbd30a7b93770954daa9c7d42abf8f7d8e47049e5e" } ] }, { "id": "view-samples/annual-performance-review", "family": "view", "slug": "annual-performance-review", "title": "Annual Performance Review", "description": "This sample demonstrates how to change row data to column format for annual performance review form.", "longDescription": [ "This sample demonstrates how to change row data to column format for annual performance review form." ], "created": "2024-10-06T00:00:00.000Z", "updated": "2024-10-30T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "CommandBar Customization", "Icons", "Inline Editing", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData" ], "FORMATTING-OPERATORS": [ "Number", "toString", "getUserImage" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "groupProps", "hideSelection", "hideColumnHeader", "rowFormatter", "headerFormatter" ], "CLASSES": [ "ms-fontColor-red--hover" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/annual-performance-review", "route": "samples/view/annual-performance-review/", "preview": "generated/previews/view-annual-performance-review.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/annual-performance-review/assets/screenshot.png", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "annual-performance-review.json", "target": "View formatting", "schemaIssues": [ "/commandBarProps/commands/1/key must be equal to one of the allowed values" ], "download": "generated/definitions/view-samples/annual-performance-review/annual-performance-review.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/annual-performance-review/annual-performance-review.json", "sha256": "79e25fdb79fa61f7e8c3eb8066e0edc252c97e167cf5398ea4c8d0ce37df3183" } ] }, { "id": "form-samples/created-modified-footer", "family": "form", "slug": "created-modified-footer", "title": "Display Created and Modified Information in the Footer", "description": "This sample demonstrates displaying the values of Created, Created By, Modified, and Modified By in the footer of the form.", "longDescription": [ "This sample demonstrates displaying the values of Created, Created By, Modified, and Modified By in the footer of the form." ], "created": "2024-10-27T00:00:00.000Z", "updated": "2024-10-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-neutralLight", "ms-fontColor-neutralPrimary", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/created-modified-footer", "route": "samples/form/created-modified-footer/", "preview": "generated/previews/form-created-modified-footer.webp", "previewAlt": "Display Created and Modified Information in the Footer formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/created-modified-footer/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "created-modified-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/created-modified-footer/created-modified-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/created-modified-footer/created-modified-footer.json", "sha256": "fdd0e24853bc45d7a9b40fbe35912626d6941f72c8289a316b4b84d74c88ba08" } ] }, { "id": "view-samples/group-header-user-picture", "family": "view", "slug": "group-header-user-picture", "title": "Display a User's Photo in Group Header", "description": "This is a sample of customizing the group header when grouping by user column. Display the user's picture as well as the user's name in the group header.", "longDescription": [ "This is a sample of customizing the group header when grouping by user column. Display the user's picture as well as the user's name in the group header." ], "created": "2021-04-03T00:00:00.000Z", "updated": "2024-10-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count", "@group.columnDisplayName" ], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-fontColor-neutralSecondary", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-user-picture", "route": "samples/view/group-header-user-picture/", "preview": "generated/previews/view-group-header-user-picture.webp", "previewAlt": "Display a User's Photo in Group Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/group-header-user-picture/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "group-header-user-picture.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-user-picture/group-header-user-picture.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-user-picture/group-header-user-picture.json", "sha256": "2e425bdc1040c6183450339cf361ed9c15be25b5bbdd1e7d3c33639eba2f98a1" } ] }, { "id": "column-samples/generic-card-with-buttons", "family": "column", "slug": "generic-card-with-buttons", "title": "Format a row as a card with buttons", "description": "This is a sample that enables you to show content of various columns (single line of text, person) in a modern card design. It also shows two buttons that can call Power Automate flows for actions like sending emails or scheduling meetings.", "longDescription": [ "This is a sample that enables you to show content of various columns (single line of text, person) in a modern card design. It also shows two buttons that can call Power Automate flows for actions like sending emails or scheduling meetings in the context of the list or the list item." ], "created": "2024-10-16T00:00:00.000Z", "updated": "2024-10-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Automate" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [ "executeFlow" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontWeight-semibold" ] }, "authors": [ { "gitHubAccount": "LuiseFreese", "pictureUrl": "https://github.com/LuiseFreese.png", "name": "Luise Freese", "key": "luisefreese" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-card-with-buttons", "route": "samples/column/generic-card-with-buttons/", "preview": "generated/previews/column-generic-card-with-buttons.webp", "previewAlt": "Format a row as a card with buttons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-card-with-buttons/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-card-with-buttons.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-card-with-buttons/generic-card-with-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-card-with-buttons/generic-card-with-buttons.json", "sha256": "c631294a7554318b3d33223549038c58a388b0ed3f9ee8bc7486aefc8d62646e" } ] }, { "id": "view-samples/prompt-cards", "family": "view", "slug": "prompt-cards", "title": "Prompt Cards", "description": "This sample demonstrates how to format list items as prompt cards", "longDescription": [ "This sample demonstrates how to format list items as prompt cards" ], "created": "2024-10-11T00:00:00.000Z", "updated": "2024-10-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-themePrimary", "ms-fontSize-l", "ms-fontWeight-bold", "ms-fontWeight-semibold", "sp-card-borderHighlight", "sp-card-content", "sp-card-defaultClickButton", "sp-card-displayColumnContainer", "sp-card-label", "sp-card-multiline", "sp-card-subContainer", "sp-css-borderColor-neutralLight", "sp-card-container" ] }, "authors": [ { "gitHubAccount": "pmcgown", "pictureUrl": "https://github.com/pmcgown.png", "name": "Pat McGown", "key": "pmcgown" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/prompt-cards", "route": "samples/view/prompt-cards/", "preview": "generated/previews/view-prompt-cards.webp", "previewAlt": "Prompt Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/prompt-cards/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "prompt-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/prompt-cards/prompt-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/prompt-cards/prompt-cards.json", "sha256": "efd28815dc51d30bbe3a193caf7949ea87d25cdb400af1a44f27ec530c7aa836" } ] }, { "id": "column-samples/number-data-plant", "family": "column", "slug": "number-data-plant", "title": "Format a column with multi-path SVGs", "description": "This formats applies different SVGs with multiple paths to a number field, depending on the value of the field.", "longDescription": [ "This formats applies different SVGs with multiple paths to a number field, depending on the value of the field. " ], "created": "2024-10-08T00:00:00.000Z", "updated": "2024-10-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "LuiseFreese", "pictureUrl": "https://github.com/LuiseFreese.png", "name": "Luise Freese", "key": "luisefreese" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-data-plant", "route": "samples/column/number-data-plant/", "preview": "generated/previews/column-number-data-plant.webp", "previewAlt": "Format a column with multi-path SVGs formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-data-plant/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-data-plant.json", "target": "Column formatting", "schemaIssues": [ "/children/0/attributes/viewBox must be object", "/children/0/attributes/viewBox must match pattern \"^(?:[\\-+]?\\d+\\s*[\\s,]\\s*){3}(?:[\\-+]?\\d+)$\"", "/children/0/attributes/viewBox must match a schema in anyOf" ], "download": "generated/definitions/column-samples/number-data-plant/number-data-plant.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-plant/number-data-plant.json", "sha256": "ba65cfcf1b0d562ed04158601e6a67af608407ffad6d59af22b72759568c2566" } ] }, { "id": "column-samples/generic-published-version", "family": "column", "slug": "generic-published-version", "title": "Published Version", "description": "This sample creates a button for opening the currently published version of a document.", "longDescription": [ "This sample creates a button for opening the currently published version of a document. The sample is supposed to be used in a SharePoint Online document library with minor versions enabled. Button is displayed for every document with a published version, i.e., at version at least 1.0. It is linked to the latest published version of the document - for example, if the latest draft of the document is at version 2.8, the button opens version 2.0." ], "created": "2024-10-07T00:00:00.000Z", "updated": "2024-10-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Document Library" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "indexOf", "substring", "floor", "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-white", "ms-borderColor-themeDark", "ms-borderColor-themeDark--hover", "ms-fontColor-gray200", "ms-fontColor-white--hover" ] }, "authors": [ { "gitHubAccount": "mkacena", "pictureUrl": "https://github.com/mkacena.png", "name": "Miroslav Kačena", "key": "mkacena" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-published-version", "route": "samples/column/generic-published-version/", "preview": "generated/previews/column-generic-published-version.webp", "previewAlt": "Published Version formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-published-version/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-published-version.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-published-version/generic-published-version.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-published-version/generic-published-version.json", "sha256": "0b284159ea136486b022913bd22a0628e72f285c58dd028e385bb450b5e10ebc" } ] }, { "id": "view-samples/numbered-list-cards", "family": "view", "slug": "numbered-list-cards", "title": "Numbered List Card", "description": "This sample converts list items into numbered list cards. The numbering is done using @rowIndex JSON formatting value.", "longDescription": [ "This sample converts list items into numbered list cards. The numbering is done using @rowIndex JSON formatting value." ], "created": "2024-10-01T00:00:00.000Z", "updated": "2024-10-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-fontSize-m", "ms-fontSize-xlPlus", "ms-fontWeight-bold", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontSize-l" ] }, "authors": [ { "gitHubAccount": "tvahk", "pictureUrl": "https://github.com/tvahk.png", "name": "Tanel Vahk", "key": "tvahk" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/numbered-list-cards", "route": "samples/view/numbered-list-cards/", "preview": "generated/previews/view-numbered-list-cards.webp", "previewAlt": "Numbered List Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/numbered-list-cards/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "numbered-list-cards-background.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/numbered-list-cards/numbered-list-cards-background.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/numbered-list-cards/numbered-list-cards-background.json", "sha256": "bbda90fc152623c8848d7f726f957e5285b9f8e1a2e0d44d94591e3120d50c1f" }, { "filename": "numbered-list-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/numbered-list-cards/numbered-list-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/numbered-list-cards/numbered-list-cards.json", "sha256": "2edec47616e9b28871c60c82fa94fd94111ddac30541eab85cf70f22b1547a90" } ] }, { "id": "column-samples/generic-custom-hover-card-approvers", "family": "column", "slug": "generic-custom-hover-card-approvers", "title": "Custom Approver Hover Card", "description": "The approval hover card provides an intuitive, streamlined way for users to quickly access key details about an approval details without navigating away from their current task or screen.", "longDescription": [ "The approval hover card provides an intuitive, streamlined way for users to quickly access key details about an approval details without navigating away from their current task or screen." ], "created": "2024-09-24T00:00:00.000Z", "updated": "2024-09-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-custom-hover-card-approvers", "route": "samples/column/generic-custom-hover-card-approvers/", "preview": "generated/previews/column-generic-custom-hover-card-approvers.webp", "previewAlt": "Custom Approver Hover Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-custom-hover-card-approvers/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-custom-hover-card-approvers.json", "target": "Column formatting", "schemaIssues": [ "/customCardProps/directionalHint must be equal to one of the allowed values" ], "download": "generated/definitions/column-samples/generic-custom-hover-card-approvers/generic-custom-hover-card-approvers.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-custom-hover-card-approvers/generic-custom-hover-card-approvers.json", "sha256": "64eaf18a80049792f67483c93df4f354e006d7403b5bb4df9ca11c78fe87b273" } ] }, { "id": "view-samples/pricing-table", "family": "view", "slug": "pricing-table", "title": "Pricing Table", "description": "This sample transforms list items into cards formatted with pricing table layouts.", "longDescription": [ "This sample transforms list items into cards formatted with pricing table layouts." ], "created": "2024-09-23T00:00:00.000Z", "updated": "2024-09-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "forEach" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-neutralTertiary", "ms-fontColor-white", "ms-font-xl", "ms-bgColor-white" ] }, "authors": [ { "gitHubAccount": "tvahk", "pictureUrl": "https://github.com/tvahk.png", "name": "Tanel Vahk", "key": "tvahk" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/pricing-table", "route": "samples/view/pricing-table/", "preview": "generated/previews/view-pricing-table.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/pricing-table/assets/screenshot.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/pricing-table/assets/screenshot-page-view.png", "alt": "screenshot of the sample embedded on the page" } ], "definitions": [ { "filename": "pricing-table.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/0/children/0/children/1/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/view-samples/pricing-table/pricing-table.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/pricing-table/pricing-table.json", "sha256": "ba8bbde436837468e14bba916a06f0c496c9740c5882d215ed6eb3ca6f83f34d" } ] }, { "id": "column-samples/hyperlink-display-url", "family": "column", "slug": "hyperlink-display-url", "title": "Display URLs in Hyperlink Column", "description": "This sample demonstrates displaying a URL in a hyperlink column.", "longDescription": [ "This sample demonstrates displaying a URL in a hyperlink column." ], "created": "2024-09-16T00:00:00.000Z", "updated": "2024-09-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Hyperlink" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontSize-s", "ms-fontSize-xs" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" }, { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/hyperlink-display-url", "route": "samples/column/hyperlink-display-url/", "preview": "generated/previews/column-hyperlink-display-url.webp", "previewAlt": "Display URLs in Hyperlink Column formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/hyperlink-display-url/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "hyperlink-display-url-format-picture.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/hyperlink-display-url/hyperlink-display-url-format-picture.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/hyperlink-display-url/hyperlink-display-url-format-picture.json", "sha256": "ea0baaad0f0087bbba25f0c56307a5b82f20111657b85f45ab857b09d2a97e8d" }, { "filename": "hyperlink-display-url.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/hyperlink-display-url/hyperlink-display-url.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/hyperlink-display-url/hyperlink-display-url.json", "sha256": "fa78de2896aaa0ff89fcf08ee4e9e30d27984b8a1b777815215136356ba6f89f" } ] }, { "id": "view-samples/picture-quick-links", "family": "view", "slug": "picture-quick-links", "title": "Picture Quick Links", "description": "This sample shows custom quick links for adding to a vertical section in a SharePoint page.", "longDescription": [ "This sample shows custom quick links for adding to a vertical section in a SharePoint page." ], "created": "2024-09-16T00:00:00.000Z", "updated": "2024-09-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-neutralLight", "sp-card-borderHighlight", "sp-card-container", "sp-card-container-noPadding", "sp-card-defaultClickButton", "sp-card-imageContainer", "sp-card-imagePreviewBackground", "sp-card-previewColumnContainer", "sp-card-subContainer", "sp-css-borderColor-neutralLight", "sp-card-subContainer-borderRadius" ] }, "authors": [ { "gitHubAccount": "watana2", "pictureUrl": "https://github.com/watana2.png", "name": "Watana", "key": "watana2" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/picture-quick-links", "route": "samples/view/picture-quick-links/", "preview": "generated/previews/view-picture-quick-links.webp", "previewAlt": "Picture Quick Links formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/picture-quick-links/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "picture-quick-links-compact-purple.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-quick-links/picture-quick-links-compact-purple.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-quick-links/picture-quick-links-compact-purple.json", "sha256": "6b12566ab7c6bf828bc67a449aa044dd9677fda36f95fc5e52f5d552dd636573" }, { "filename": "picture-quick-links-compact.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-quick-links/picture-quick-links-compact.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-quick-links/picture-quick-links-compact.json", "sha256": "5f880a3063637e4642d147b29139368eed1c995edb591c4ea436dfd8d090864b" }, { "filename": "picture-quick-links.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/picture-quick-links/picture-quick-links.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/picture-quick-links/picture-quick-links.json", "sha256": "0797134253d86810a344253b096f8a5fc4861d54aa96310c971b64a00c3b40ef" } ] }, { "id": "view-samples/shopping-cart", "family": "view", "slug": "shopping-cart", "title": "Shopping Cart", "description": "The JSON template is designed for an online shopping cart. It displays items within the cart, including product details, pricing, shipping information, and user interactions like adding or removing items.", "longDescription": [ "The JSON template is designed for an online shopping cart. It displays items within the cart, including product details, pricing, shipping information, and user interactions like adding or removing items." ], "created": "2024-09-11T00:00:00.000Z", "updated": "2024-09-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/shopping-cart", "route": "samples/view/shopping-cart/", "preview": "generated/previews/view-shopping-cart.webp", "previewAlt": "Shopping Cart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/shopping-cart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "shopping-cart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/shopping-cart/shopping-cart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/shopping-cart/shopping-cart.json", "sha256": "89b32beb0f09012e0f211b45bba0d9748a4112797c01c49857e99c8333d86ced" } ] }, { "id": "view-samples/speed-dial", "family": "view", "slug": "speed-dial", "title": "Speed Dial", "description": "This sample creates a speed dial list for your team members/contacts, that you can list as a tab in your teams channel and/or display on your Team SharePoint site, to get quick access to your contacts through Teams call, chat and email.", "longDescription": [ "This sample creates a speed dial list for your team members/contacts, that you can list as a tab in your teams channel and/or display on your Team SharePoint site, to get quick access to your contacts through Teams call, chat and email." ], "created": "2024-09-11T00:00:00.000Z", "updated": "2024-09-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-neutralLighterAlt", "ms-fontColor-themePrimary--hover", "ms-fontColor-black" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/speed-dial", "route": "samples/view/speed-dial/", "preview": "generated/previews/view-speed-dial.webp", "previewAlt": "Speed Dial formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/speed-dial/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/speed-dial/assets/Speed%20dial%202.png", "alt": "screenshot 2" } ], "definitions": [ { "filename": "speed-dial.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/speed-dial/speed-dial.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/speed-dial/speed-dial.json", "sha256": "b8efa16b483cc2d9d6b1b00a962274e180f67092bf846c7f658bfd8e7f96ef8c" } ] }, { "id": "view-samples/faq-accordion", "family": "view", "slug": "faq-accordion", "title": "FAQ Accordion", "description": "This sample formats your view to appear and work like an Accordion style FAQ (Frequently Asked Questions).", "longDescription": [ "This sample formats your view to appear and work like an Accordion style FAQ (Frequently Asked Questions)." ], "created": "2021-07-09T00:00:00.000Z", "updated": "2024-09-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Grouped", "Frequently Asked Questions" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themeLighterAlt", "ms-fontSize-m", "sp-row-card", "sp-row-listPadding", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-accordion", "route": "samples/view/faq-accordion/", "preview": "generated/previews/view-faq-accordion.webp", "previewAlt": "FAQ Accordion formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/faq-accordion/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/faq-accordion/assets/screenshot2.png", "alt": "screenshot2" } ], "definitions": [ { "filename": "faq-accordion.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/faq-accordion/faq-accordion.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/faq-accordion/faq-accordion.json", "sha256": "d07f959fb2e54a68299becc59d1becf7677e241108221cfdac373c4a88161c31" } ] }, { "id": "column-samples/generic-world-time", "family": "column", "slug": "generic-world-time", "title": "World Current Time", "description": "This sample demonstrates the side-by-side display and comparison of the current time in different countries around the world.", "longDescription": [ "This sample demonstrates the side-by-side display and comparison of the current time in different countries around the world." ], "created": "2022-04-17T00:00:00.000Z", "updated": "2024-08-30T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "toString", "Number", "abs", "floor", "ceiling", "padStart", "split" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "forEach" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLight", "ms-bgColor-neutralPrimary--hover", "ms-bgColor-neutralTertiary", "ms-fontColor-themePrimary", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-world-time", "route": "samples/column/generic-world-time/", "preview": "generated/previews/column-generic-world-time.webp", "previewAlt": "World Current Time formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-world-time/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-world-time.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/1/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/generic-world-time/generic-world-time.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-world-time/generic-world-time.json", "sha256": "9bf3ed104182b77a0c20bdbe79bc987ab95baf49fafa88d52c1a7ec79f219c8a" } ] }, { "id": "column-samples/hyperlink-embed", "family": "column", "slug": "hyperlink-embed", "title": "Displaying embedded content using the embed action", "description": "This sample demonstrates displaying embedded content using the embed action.", "longDescription": [ "This sample demonstrates displaying embedded content using the embed action." ], "created": "2024-08-27T00:00:00.000Z", "updated": "2024-08-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Hyperlink" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "embed" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themeDarker--hover", "ms-fontColor-themePrimary", "ms-fontSize-mi", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/hyperlink-embed", "route": "samples/column/hyperlink-embed/", "preview": "generated/previews/column-hyperlink-embed.webp", "previewAlt": "Displaying embedded content using the embed action formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/hyperlink-embed/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "hyperlink-embed.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/customRowAction/action must be equal to one of the allowed values", "/children/0/children/0/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/hyperlink-embed/hyperlink-embed.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/hyperlink-embed/hyperlink-embed.json", "sha256": "a4a0fe4665c722243a2c8c79304f40512b2147af085e5a340896820aaca1f609" } ] }, { "id": "column-samples/person-assign-to-me", "family": "column", "slug": "person-assign-to-me", "title": "Assign to Me", "description": "This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column.", "longDescription": [ "This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column." ], "created": "2023-05-11T00:00:00.000Z", "updated": "2024-08-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "getUserImage", "appendTo", "indexOf" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField" ], "CLASSES": [ "ms-fontColor-themeDarker", "ms-fontColor-themeDarker--hover", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-bgColor-neutralLight", "ms-bgColor-themeLighter", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-assign-to-me", "route": "samples/column/person-assign-to-me/", "preview": "generated/previews/column-person-assign-to-me.webp", "previewAlt": "Assign to Me formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-assign-to-me/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "person-assign-to-me-highlight-multi.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-assign-to-me/person-assign-to-me-highlight-multi.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-assign-to-me/person-assign-to-me-highlight-multi.json", "sha256": "eda5fe495ccebc56222ab3bde4d9b21c46e1a5d360dfead818f1d811f281e723" }, { "filename": "person-assign-to-me-highlight-single.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-assign-to-me/person-assign-to-me-highlight-single.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-assign-to-me/person-assign-to-me-highlight-single.json", "sha256": "68e5e9ba0577453292f760771e0db3e7f063d823dcf31268a7910e7cde2f9e68" }, { "filename": "person-assign-to-me-multi.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-assign-to-me/person-assign-to-me-multi.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-assign-to-me/person-assign-to-me-multi.json", "sha256": "74f1ca8dbc988c3f71369b25428313716f86d3a0803dc499e4be53bacfeffd29" }, { "filename": "person-assign-to-me.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-assign-to-me/person-assign-to-me.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-assign-to-me/person-assign-to-me.json", "sha256": "684679f5b027ece1ea0f871defdd2abc62cf5181c41448908a3b431c04d9d977" } ] }, { "id": "view-samples/weather-forecast", "family": "view", "slug": "weather-forecast", "title": "Weather forecast", "description": "This sample transforms list items into cards formatted with weather forecast layouts.", "longDescription": [ "This sample transforms list items into cards formatted with weather forecast layouts." ], "created": "2024-08-13T00:00:00.000Z", "updated": "2024-08-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/weather-forecast", "route": "samples/view/weather-forecast/", "preview": "generated/previews/view-weather-forecast.webp", "previewAlt": "Weather forecast formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/weather-forecast/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "weather-forecast.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/weather-forecast/weather-forecast.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/weather-forecast/weather-forecast.json", "sha256": "608606cea25e5a5d3941487ef2cda6756b921d36b53ccf2c60e5f287c9f007a7" } ] }, { "id": "view-samples/match-score-card", "family": "view", "slug": "match-score-card", "title": "Match Score Card", "description": "This sample transforms list items into a match summary.", "longDescription": [ "This sample transforms list items into a match summary." ], "created": "2024-07-26T00:00:00.000Z", "updated": "2024-07-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/match-score-card", "route": "samples/view/match-score-card/", "preview": "generated/previews/view-match-score-card.webp", "previewAlt": "Match Score Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/match-score-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "match-score-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/match-score-card/match-score-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/match-score-card/match-score-card.json", "sha256": "192ea00854e4dd62c40afc261611b72d198d2b3f02b49e1c19e87d4491b759f3" } ] }, { "id": "view-samples/flight-card", "family": "view", "slug": "flight-card", "title": "Flight Card", "description": "This sample transforms list items into cards formatted with flight information layouts. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons.", "longDescription": [ "This sample transforms list items into cards formatted with flight information layouts. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons." ], "created": "2024-07-22T00:00:00.000Z", "updated": "2024-07-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeSecondary--hover" ] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/flight-card", "route": "samples/view/flight-card/", "preview": "generated/previews/view-flight-card.webp", "previewAlt": "Flight Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/flight-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "flight-card.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0/children/1/children/3/children/2 must NOT have additional properties" ], "download": "generated/definitions/view-samples/flight-card/flight-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/flight-card/flight-card.json", "sha256": "e3fc03d13b9d8a7fa60bf04c1e6752440fdf0b263ffd758b095fdad07ff0cdd6" } ] }, { "id": "view-samples/imdb-card", "family": "view", "slug": "imdb-card", "title": "IMDb Card", "description": "This sample transforms list items into cards formatted with IMDb (Internet Movie Database) Movie listing layout. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons.", "longDescription": [ "This sample transforms list items into cards formatted with IMDb (Internet Movie Database) Movie listing layout. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons." ], "created": "2024-07-22T00:00:00.000Z", "updated": "2024-07-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/imdb-card", "route": "samples/view/imdb-card/", "preview": "generated/previews/view-imdb-card.webp", "previewAlt": "IMDb Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/imdb-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "imdb-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/imdb-card/imdb-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/imdb-card/imdb-card.json", "sha256": "2491a746fc1f961ea7b7253533356eab2219ecce554adc098e9a2b1a23610f31" } ] }, { "id": "view-samples/property-card", "family": "view", "slug": "property-card", "title": "Property Card", "description": "This sample transforms list items into cards formatted with property listing layouts. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons.", "longDescription": [ "This sample transforms list items into cards formatted with property listing layouts. To ensure the view functions correctly, make sure all specified columns are included. The icons are referenced from Fluent UI Icons." ], "created": "2024-07-22T00:00:00.000Z", "updated": "2024-07-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sudeepghatak", "pictureUrl": "https://github.com/sudeepghatak.png", "name": "Sudeep Ghatak", "key": "sudeepghatak" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/property-card", "route": "samples/view/property-card/", "preview": "generated/previews/view-property-card.webp", "previewAlt": "Property Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/property-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "property-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/property-card/property-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/property-card/property-card.json", "sha256": "d7ffa9ac6d9ad96d3695518ec4ef651f45c6a892645e10c2e6c88307280f1eff" } ] }, { "id": "form-samples/two-column-logo-header", "family": "form", "slug": "two-column-logo-header", "title": "Two Column Logo Header", "description": "This sample displays an Icon and Title in a two column header with the Icon on the left and the Title on the right. An additional Icon and RequestStatus and added below the Title.", "longDescription": [ "This sample displays an Icon and Title in a two column header with the Icon on the left and the Title on the right. An additional Icon and RequestStatus and added below the Title." ], "created": "2024-07-14T00:00:00.000Z", "updated": "2024-07-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-gray130", "ms-bgColor-redDark", "ms-bgColor-teal", "ms-bgColor-yellow", "ms-fontColor-white", "ms-fontSize-16", "ms-fontSize-24", "ms-fontSize-42", "ms-fontWeight-bold", "ms-fontWeight-regular" ] }, "authors": [ { "gitHubAccount": "GeorgiaGit", "pictureUrl": "https://github.com/GeorgiaGit.png", "name": "Andrew Burns", "key": "georgiagit" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/two-column-logo-header", "route": "samples/form/two-column-logo-header/", "preview": "generated/previews/form-two-column-logo-header.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot_two_column_Default.png", "alt": "screenshot of the sample when RequestStatus is Default" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot_two_column_Approved.png", "alt": "screenshot of the sample when RequestStatus is Approved" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot_two_column_Pending.png", "alt": "screenshot of the sample when RequestStatus is Pending" }, { "type": "image", "order": 104, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot_two_column_Rejected.png", "alt": "screenshot of the sample when RequestStatus is Rejected" }, { "type": "image", "order": 105, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/two-column-logo-header/assets/screenshot_two_column_Withdrawn.png", "alt": "screenshot of the sample when RequestStatus is Withdrawn" } ], "definitions": [ { "filename": "two-column-logo-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/two-column-logo-header/two-column-logo-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/two-column-logo-header/two-column-logo-header.json", "sha256": "91c7238068424d38617b3c020c5570482121468f8eff723cd6cc43cf9c68d92b" } ] }, { "id": "view-samples/honeycomb-link", "family": "view", "slug": "honeycomb-link", "title": "Honeycomb Links", "description": "Formats links to look like honeycombs!", "longDescription": [ "This sample demonstrates a honeycomb structure of links. The hexagons are displayed using SVG, so that five hexagons are displayed per line. This sample uses the Icons from the Fluent UI. The name of the icon is referenced through an Icon field." ], "created": "2021-07-05T00:00:00.000Z", "updated": "2024-06-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeLight--hover", "ms-fontColor-white", "ms-fontColor-themeDark--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/honeycomb-link", "route": "samples/view/honeycomb-link/", "preview": "generated/previews/view-honeycomb-link.webp", "previewAlt": "Honeycomb Link", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/honeycomb-link/assets/screenshot.png", "alt": "Honeycomb Link" } ], "definitions": [ { "filename": "honeycomb-link.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/honeycomb-link/honeycomb-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/honeycomb-link/honeycomb-link.json", "sha256": "92de1b8601de2df1fde9694c1b3f9f8b3e59358ede3649f0fe5180b2f1500dd5" } ] }, { "id": "column-samples/generic-quickview-issue-card", "family": "column", "slug": "generic-quickview-issue-card", "title": "Quick-View Issue Card", "description": "The Issue HoverCard Formatter is a SharePoint list Column JSON formatter component tailored to enhance user experience when interacting with issue data. It provides a streamlined approach to view essential information about issues through hover cards, offering quick insights in a card format.", "longDescription": [ "The Issue HoverCard Formatter is a SharePoint list Column JSON formatter component tailored to enhance user experience when interacting with issue data. It provides a streamlined approach to view essential information about issues through hover cards, offering quick insights in a card format." ], "created": "2024-05-29T00:00:00.000Z", "updated": "2024-05-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "Jatin-patil", "pictureUrl": "https://github.com/Jatin-patil.png", "name": "Jatin Patil", "key": "jatin-patil" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-quickview-issue-card", "route": "samples/column/generic-quickview-issue-card/", "preview": "generated/previews/column-generic-quickview-issue-card.webp", "previewAlt": "Quick View Issue Card", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-quickview-issue-card/assets/screenshot.png", "alt": "Quick View Issue Card" } ], "definitions": [ { "filename": "generic-quickview-issue-card.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-quickview-issue-card/generic-quickview-issue-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-quickview-issue-card/generic-quickview-issue-card.json", "sha256": "afa6759a765ccdac24f9d6f9ef419960c4244eb89d0ab5f16e08aa10a70d4883" } ] }, { "id": "form-samples/workflow-progress-header", "family": "form", "slug": "workflow-progress-header", "title": "Workflow Progress Header", "description": "This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.", "longDescription": [ "This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit." ], "created": "2021-02-01T00:00:00.000Z", "updated": "2024-04-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralTertiary", "ms-fontColor-success", "ms-fontSize-42", "ms-fontSize-18" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/workflow-progress-header", "route": "samples/form/workflow-progress-header/", "preview": "generated/previews/form-workflow-progress-header.webp", "previewAlt": "screen_capture", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/workflow-progress-header/assets/screenshot.gif", "alt": "screen_capture" } ], "definitions": [ { "filename": "workflow-progress-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/workflow-progress-header/workflow-progress-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/workflow-progress-header/workflow-progress-header.json", "sha256": "eb10a2faf6c0084fb080320ecbf3a4eff0cf47b2213edd1c9abde0f477ab05c5" } ] }, { "id": "column-samples/generic-eisenhower-matrix", "family": "column", "slug": "generic-eisenhower-matrix", "title": "Task Matrix", "description": "The Eisenhower Matrix is like a map for managing your tasks. It helps you decide what needs to be done first, what can wait, what can be given to someone else, and what can be left aside.", "longDescription": [ "The Eisenhower Matrix is like a map for managing your tasks. It helps you decide what needs to be done first, what can wait, what can be given to someone else, and what can be left aside." ], "created": "2024-04-02T00:00:00.000Z", "updated": "2024-04-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "jaxkookie", "pictureUrl": "https://github.com/jaxkookie.png", "name": "Larry Pfaff", "key": "jaxkookie" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-eisenhower-matrix", "route": "samples/column/generic-eisenhower-matrix/", "preview": "generated/previews/column-generic-eisenhower-matrix.webp", "previewAlt": "Task Matrix formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-eisenhower-matrix/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-eisenhower-matrix.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-eisenhower-matrix/generic-eisenhower-matrix.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-eisenhower-matrix/generic-eisenhower-matrix.json", "sha256": "8c2578efa1498085eb532a1b2fba240d9ff6977669a95eabf5b9f9e3ca320be2" } ] }, { "id": "column-samples/date-compress-format", "family": "column", "slug": "date-compress-format", "title": "Compressed Date", "description": "This sample provide a different style to provide Date in a compress way such us align days and month and display year parallel as vertical.", "longDescription": [ "This sample provide a different style to provide Date in a compress way such us align days and month and display year parallel as vertical." ], "created": "2021-12-06T00:00:00.000Z", "updated": "2024-03-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getDate", "getMonth", "getYear" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeTertiary", "ms-fontColor-themeTertiary--hover", "ms-borderColor-themePrimary", "ms-fontWeight-bold", "ms-fontSize-10", "ms-fontSize-16", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-compress-format", "route": "samples/column/date-compress-format/", "preview": "generated/previews/column-date-compress-format.webp", "previewAlt": "Compressed Date formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-compress-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-compress-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-compress-format/date-compress-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-compress-format/date-compress-format.json", "sha256": "97d8d4c6aa547b8f21c8d6583547b72b17b11ffcd311594087a3b213b78c5913" } ] }, { "id": "view-samples/disable-click-action", "family": "view", "slug": "disable-click-action", "title": "Disable default click action on a tile list view", "description": "The sample list of items in a tile view where default click action is disabled. When item is clicked it is selected only.", "longDescription": [ "The sample list of items in a tile view where default click action is disabled. When item is clicked it is selected only." ], "created": "2022-04-08T00:00:00.000Z", "updated": "2024-02-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary", "sp-card-borderHighlight", "sp-card-container", "sp-card-content", "sp-card-defaultClickButton", "sp-card-highlightedContent", "sp-card-lastTextColumnContainer", "sp-card-subContainer", "sp-css-borderColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "Michal-Ziemba", "pictureUrl": "https://github.com/Michal-Ziemba.png", "name": "Michal Ziemba", "key": "michal-ziemba" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/disable-click-action", "route": "samples/view/disable-click-action/", "preview": "generated/previews/view-disable-click-action.webp", "previewAlt": "Disable default click action on a tile list view formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/disable-click-action/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "disable-click-action.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/disable-click-action/disable-click-action.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/disable-click-action/disable-click-action.json", "sha256": "16fb341c64bf051bdf78609b89d736152695c41421f4bfc782f67d5157ecdfef" } ] }, { "id": "column-samples/text-phonenumber-teams-call", "family": "column", "slug": "text-phonenumber-teams-call", "title": "Call phone number with Microsoft Teams", "description": "This sample demonstrates displaying a phone number stored in a single line of text column as a link to initiate a Microsoft Teams call.", "longDescription": [ "This sample demonstrates displaying a phone number stored in a single line of text column as a link to initiate a Microsoft Teams call." ], "created": "2024-02-16T00:00:00.000Z", "updated": "2024-02-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Microsoft Teams", "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover", "ms-font-l" ] }, "authors": [ { "gitHubAccount": "samurai-ka", "pictureUrl": "https://github.com/samurai-ka.png", "name": "Hagen Deike", "key": "samurai-ka" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-phonenumber-teams-call", "route": "samples/column/text-phonenumber-teams-call/", "preview": "generated/previews/column-text-phonenumber-teams-call.webp", "previewAlt": "Call phone number with Microsoft Teams formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-phonenumber-teams-call/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-phonenumber-teams-call.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-phonenumber-teams-call/text-phonenumber-teams-call.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-phonenumber-teams-call/text-phonenumber-teams-call.json", "sha256": "1d340ded05e2b2b1f6c57dd73e1409055244deb49376f99866cd04c5ea25bcc7" } ] }, { "id": "column-samples/generic-blurred", "family": "column", "slug": "generic-blurred", "title": "Blurred Field Value", "description": "This format demonstrates how to blur the value of a field. You can use this formatting when you want to share your screen for a demo and don't want to display real data.", "longDescription": [ "This format demonstrates how to blur the value of a field. You can use this formatting when you want to share your screen for a demo and don't want to display real data." ], "created": "2024-02-08T00:00:00.000Z", "updated": "2024-02-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "JulienVLC", "pictureUrl": "https://github.com/JulienVLC.png", "name": "Julien Aubert", "key": "julienvlc" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-blurred", "route": "samples/column/generic-blurred/", "preview": "generated/previews/column-generic-blurred.webp", "previewAlt": "Blurred Field Value formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-blurred/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-blurred.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-blurred/generic-blurred.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-blurred/generic-blurred.json", "sha256": "1948f3d2299f90f2c4d7fa28676a90dba0a148ab7c738739a60b9aae97c62fff" } ] }, { "id": "column-samples/filename-highlight-non-empty-folders", "family": "column", "slug": "filename-highlight-non-empty-folders", "title": "Highlight non-empty folder", "description": "This sample shows how folders can be highlighted or grayed out depending on whether they are empty or not", "longDescription": [ "This sample shows how folders can be highlighted or grayed out depending on whether they are empty or not" ], "created": "2023-10-06T00:00:00.000Z", "updated": "2024-01-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Document Library", "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [ "defaultClick", "openContextMenu", "share" ], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-bgColor-gray60--hover", "ms-fontColor-black", "ms-fontColor-black", "ms-fontColor-black", "ms-fontColor-gray120", "ms-fontColor-gray120", "ms-fontColor-neutralDark--hover", "ms-fontColor-white", "ms-fontWeight-semibold", "ms-fontWeight-semibold", "ms-Link" ] }, "authors": [ { "gitHubAccount": "MoeIcI", "pictureUrl": "https://github.com/MoeIcI.png", "name": "Moritz Lickert", "key": "moeici" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/filename-highlight-non-empty-folders", "route": "samples/column/filename-highlight-non-empty-folders/", "preview": "generated/previews/column-filename-highlight-non-empty-folders.webp", "previewAlt": "Highlight non-empty folder formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/filename-highlight-non-empty-folders/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/filename-highlight-non-empty-folders/assets/screenshot_hidden_columns.png", "alt": "screenshot" } ], "definitions": [ { "filename": "filename-highlight-non-empty-folders-with-buttons.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/filename-highlight-non-empty-folders/filename-highlight-non-empty-folders-with-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/filename-highlight-non-empty-folders/filename-highlight-non-empty-folders-with-buttons.json", "sha256": "38355fa8c96b4f5c4060bf45d2ad42b0affbaf55cfd7770d8608ddf864a1d75a" }, { "filename": "filename-highlight-non-empty-folders.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/filename-highlight-non-empty-folders/filename-highlight-non-empty-folders.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/filename-highlight-non-empty-folders/filename-highlight-non-empty-folders.json", "sha256": "29fafb6655dd1b7c4ffe3e3360db1b7489b8d1ce66e00f596805bd7df455dd47" } ] }, { "id": "view-samples/commandbar-display-edit-in-gridview", "family": "view", "slug": "commandbar-display-edit-in-gridview", "title": "Display Edit in Grid View Button in the Command Bar", "description": "In the Document Library, the [Edit in grid view] button is hidden under the [...] button. This sample demonstrates displaying the [Edit in grid view] button on the command bar.", "longDescription": [ "In the Document Library, the [Edit in grid view] button is hidden under the [...] button. This sample demonstrates displaying the [Edit in grid view] button on the command bar." ], "created": "2024-01-23T00:00:00.000Z", "updated": "2024-01-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "CommandBar Customization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/commandbar-display-edit-in-gridview", "route": "samples/view/commandbar-display-edit-in-gridview/", "preview": "generated/previews/view-commandbar-display-edit-in-gridview.webp", "previewAlt": "Display Edit in Grid View Button in the Command Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/commandbar-display-edit-in-gridview/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "commandbar-display-edit-in-gridview.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/commandbar-display-edit-in-gridview/commandbar-display-edit-in-gridview.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/commandbar-display-edit-in-gridview/commandbar-display-edit-in-gridview.json", "sha256": "9bb6dca5bd19befb15d1f2283b26a3b028de22c4673a5872d00a470e84c6cbb7" } ] }, { "id": "column-samples/multi-choice-thumbnail", "family": "column", "slug": "multi-choice-thumbnail", "title": "Multiple thumbnail", "description": "This tutorial will help you create a multiple thumbnail through images URLs listed in a multiple choice column.", "longDescription": [ "This tutorial will help you create a multiple thumbnail through images URLs listed in a multiple choice column." ], "created": "2024-01-19T00:00:00.000Z", "updated": "2024-01-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-white--hover", "sp-css-backgroundColor-LightPurpleText", "sp-css-backgroundColor-LightPurpleText--hover", "sp-css-color-LightPurpleText", "sp-css-color-WhiteFont", "sp-css-color-WhiteText" ] }, "authors": [ { "gitHubAccount": "Fedes365", "pictureUrl": "https://github.com/Fedes365.png", "name": "Federico Sapia", "key": "fedes365" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-thumbnail", "route": "samples/column/multi-choice-thumbnail/", "preview": "generated/previews/column-multi-choice-thumbnail.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-thumbnail/assets/screenshot.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-thumbnail/assets/Basic-Thumbnail-Desc.png", "alt": "screenshot of the basic sample" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-thumbnail/assets/Advanced-Animation.gif", "alt": "screenshot of the advanced sample" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-thumbnail/assets/Window-Desc.png", "alt": "advanced sample structure" } ], "definitions": [ { "filename": "multi-choice-thumbnail-advanced.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-thumbnail/multi-choice-thumbnail-advanced.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-thumbnail/multi-choice-thumbnail-advanced.json", "sha256": "45972e400e2b1e1566f9066a0b3169497deee0c6e96561909af0c125e0d6bbe2" }, { "filename": "multi-choice-thumbnail.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-thumbnail/multi-choice-thumbnail.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-thumbnail/multi-choice-thumbnail.json", "sha256": "e9a615b5fb8ef30febb8bb21169cdf30d56a282362023f13648d09fe2f518bd5" } ] }, { "id": "column-samples/generic-image-download", "family": "column", "slug": "generic-image-download", "title": "Download Image from SharePoint Image column", "description": "This sample demonstrates adding a button within a SharePoint Online/Microsoft Lists view which downloads the image from image column.", "longDescription": [ "This sample demonstrates adding a button within a SharePoint Online/Microsoft Lists view which downloads the image from image column." ], "created": "2022-11-12T00:00:00.000Z", "updated": "2024-01-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-image-download", "route": "samples/column/generic-image-download/", "preview": "generated/previews/column-generic-image-download.webp", "previewAlt": "image-download", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-image-download/assets/screenshot.png", "alt": "image-download" } ], "definitions": [ { "filename": "generic-image-download.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-image-download/generic-image-download.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-image-download/generic-image-download.json", "sha256": "80d363b09f4003daac506b9845d901dc5fb9399893d70b5840f6353373d8fdb4" } ] }, { "id": "column-samples/date-button-setValue-today", "family": "column", "slug": "date-button-setValue-today", "title": "Set Date to Today's Date (Date Only)", "description": "This sample a button to 'Mark Trip as Complete' (Date Field). ", "longDescription": [ "This sample a button to 'Mark Trip as Complete' (Date Field). " ], "created": "2024-01-15T00:00:00.000Z", "updated": "2024-01-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number", "getYear", "getMonth", "getDate", "padStart", "toString" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-button-setValue-today", "route": "samples/column/date-button-setValue-today/", "preview": "generated/previews/column-date-button-setValue-today.webp", "previewAlt": "Set Date to Today's Date (Date Only) formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-button-setValue-today/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "date-button-setValue-today.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-button-setValue-today/date-button-setValue-today.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-button-setValue-today/date-button-setValue-today.json", "sha256": "2cdc2443a84c350a2d0768f0ce31177612decce72cab927b149d15228ea61041" } ] }, { "id": "column-samples/promotedstate-demote-news", "family": "column", "slug": "promotedstate-demote-news", "title": "Demote News to Site Page", "description": "This sample demonstrates how to use the setValue action to update the value of the Promoted State column to 0 and demote the news to a page.", "longDescription": [ "This sample demonstrates how to use the setValue action to update the value of the Promoted State column to 0 and demote the news to a page." ], "created": "2021-12-11T00:00:00.000Z", "updated": "2024-01-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Promoted State" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-borderColor-themePrimary", "ms-bgColor-white", "ms-bgColor-themeLighter", "ms-fontColor-white", "ms-bgColor-themeLighter--hover", "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" }, { "gitHubAccount": "Schwartzyy55", "pictureUrl": "https://github.com/Schwartzyy55.png", "name": "Cory Schwartz", "key": "schwartzyy55" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/promotedstate-demote-news", "route": "samples/column/promotedstate-demote-news/", "preview": "generated/previews/column-promotedstate-demote-news.webp", "previewAlt": "Demote News to Site Page formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/promotedstate-demote-news/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "promotedstate-demote-news.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/promotedstate-demote-news/promotedstate-demote-news.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/promotedstate-demote-news/promotedstate-demote-news.json", "sha256": "9633b03e3ed707cf411fedc63b6331956b4d73c5b6bed8053c4ffc8e2639d2eb" } ] }, { "id": "column-samples/number-linear-gauge", "family": "column", "slug": "number-linear-gauge", "title": "Linear Gauge", "description": "This sample demonstrates displaying a linear gauge from a regular string set to the split operator.", "longDescription": [ "This sample demonstrates displaying a linear gauge from a regular string set to the split operator." ], "created": "2023-12-01T00:00:00.000Z", "updated": "2023-12-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts", "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "split", "substring", "indexOf", "lastIndexOf", "Number", "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-Primary", "ms-fontSize-mi", "ms-fontSize-s", "ms-fontSize-sPlus" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-linear-gauge", "route": "samples/column/number-linear-gauge/", "preview": "generated/previews/column-number-linear-gauge.webp", "previewAlt": "Linear Gauge formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-linear-gauge/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-linear-gauge.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/1/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-linear-gauge/number-linear-gauge.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-linear-gauge/number-linear-gauge.json", "sha256": "986e43f18f087ad837233387a33adcbc573a8fa0f0fcbfb7b0de77cd36255cb3" } ] }, { "id": "view-samples/custom-charts", "family": "view", "slug": "custom-charts", "title": "Custom Charts", "description": "This templates package will allow you to quickly create 7 different types of charts, which you can organize into collections, share, and publish on SharePoint pages.", "longDescription": [ "This templates package will allow you to quickly create 7 different types of charts, which you can organize into collections, share, and publish on SharePoint pages." ], "created": "2023-03-22T00:00:00.000Z", "updated": "2023-11-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "SVG", "Charts" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "substring", "toString", "cos", "sin" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "inlineEditField", "hideColumnHeader", "hideSelection", "beakStyle", "directionalHint", "rowFormatter" ], "CLASSES": [ "sp-field-bold", "ms-bgColor-communicationTint40--hover", "ms-bgColor-severeWarning--hover", "ms-fontColor-black--hover", "ms-fontColor-neutralQuaternaryAlt", "sp-css-color-BlackText", "sp-css-color-GrayText" ] }, "authors": [ { "gitHubAccount": "Fedes365", "pictureUrl": "https://github.com/Fedes365.png", "name": "Federico Sapia", "key": "fedes365" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-charts", "route": "samples/view/custom-charts/", "preview": "generated/previews/view-custom-charts.webp", "previewAlt": "screenshot of 7 different charts", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/screenshot.png", "alt": "screenshot of 7 different charts" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Doughnut-Chart-P.png", "alt": "screenshot of the donut chart sample" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Pie-Chart.png", "alt": "screenshot of the pie chart sample" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Bar-Chart.gif", "alt": "screenshot of the vertical bar chart sample" }, { "type": "image", "order": 104, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Horizontal-Bar-Chart.gif", "alt": "screenshot of the horizontal bar chart sample" }, { "type": "image", "order": 105, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Stacked-Bars-Chart.png", "alt": "screenshot of the stacked bars sample" }, { "type": "image", "order": 106, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Line-Chart.png", "alt": "screenshot of the line chart sample" }, { "type": "image", "order": 107, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-charts/assets/Radar-Chart.png", "alt": "screenshot of the radar chart sample" } ], "definitions": [ { "filename": "Bar-Chart-H.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Bar-Chart-H.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Bar-Chart-H.json", "sha256": "87e36ae51d46fa51039d2d77479e51748ddf9d56cda84a5df849c395112c0641" }, { "filename": "Bar-Chart-V-Large.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Bar-Chart-V-Large.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Bar-Chart-V-Large.json", "sha256": "226167ddcdf424aecfcdfc928692a529556e3cccc1dcf3dd483ea18dc2138f0a" }, { "filename": "Bar-Chart-V.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Bar-Chart-V.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Bar-Chart-V.json", "sha256": "2597d9b527e0987928436da370442007a7487a8a13becf3925315abd91591456" }, { "filename": "Doughnut-Chart-P.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Doughnut-Chart-P.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Doughnut-Chart-P.json", "sha256": "6059d5a56d7d2b825e553df9e3637cd4cb4bbfb2d34cf0841a68ae087410613d" }, { "filename": "Doughnut-Chart-PV.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Doughnut-Chart-PV.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Doughnut-Chart-PV.json", "sha256": "c6c341e16c07f212cf2e2654f207aab3a3cba3d06d632829f54dc115d33dae36" }, { "filename": "Line-Chart-Large.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/2/children/2/children/0/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/custom-charts/Line-Chart-Large.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Line-Chart-Large.json", "sha256": "87e6e4a0df7ce5bc95e2911908b966c90e1e80486de49cc6003afb924bb57371" }, { "filename": "Line-Chart.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/2/children/2/children/0/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/custom-charts/Line-Chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Line-Chart.json", "sha256": "b96ff42f11016b624638fca0c3b61d9f03c75a67bd6ac6fdb1feddb9fce4f673" }, { "filename": "Pie-Chart-Large.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Pie-Chart-Large.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Pie-Chart-Large.json", "sha256": "0c097d05cc7c7b0df0e5346a13413f6b8ff43d7c122dc9465842a741fc3a613e" }, { "filename": "Pie-Chart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Pie-Chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Pie-Chart.json", "sha256": "372e407a3451c9523fc3480f34ce2a2f4009d410c72bea7f0fd6637bb7ed2649" }, { "filename": "Radar-Chart.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0 must NOT have additional properties" ], "download": "generated/definitions/view-samples/custom-charts/Radar-Chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Radar-Chart.json", "sha256": "d882ca207872e03d4532175cac4d79e7d442cdfd781857c3a34c2b549fd1c71b" }, { "filename": "Stacked-Bars-Chart-Large.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Stacked-Bars-Chart-Large.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Stacked-Bars-Chart-Large.json", "sha256": "875b212a363c0a156d2f3d93b9d09023648101fd3c8c8bd5d6f83903a3a12e57" }, { "filename": "Stacked-Bars-Chart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-charts/Stacked-Bars-Chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-charts/Stacked-Bars-Chart.json", "sha256": "fb9995c52c97d300ca8300a577b9b3718c5da18d6e8827ba6eedefbc4b133626" } ] }, { "id": "column-samples/custom-hover-card", "family": "column", "slug": "custom-hover-card", "title": "Custom Hover Card (Column)", "description": "A custom card is shown on hover of an item. The hover card shows additional details about an item's status.", "longDescription": [ "A custom card is shown on hover of an item. The hover card shows additional details about an item's status." ], "created": "2020-04-08T00:00:00.000Z", "updated": "2023-11-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-black", "ms-fontColor-green", "ms-borderColor-neutralSecondaryAlt", "ms-fontColor-neutralSecondaryAlt" ] }, "authors": [ { "gitHubAccount": "NiketJain", "pictureUrl": "https://github.com/NiketJain.png", "name": "Niket Jain", "key": "niketjain" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-card", "route": "samples/column/custom-hover-card/", "preview": "generated/previews/column-custom-hover-card.webp", "previewAlt": "Status_hover", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/custom-hover-card/assets/screenshot.png", "alt": "Status_hover" } ], "definitions": [ { "filename": "custom-hover-card.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/custom-hover-card/custom-hover-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/custom-hover-card/custom-hover-card.json", "sha256": "7d76ae20ea1542a307d497f7b4b074e4470863ead6ba789d53c25e00202ed77e" } ] }, { "id": "column-samples/generic-supertype", "family": "column", "slug": "generic-supertype", "title": "Generic Super Type", "description": "This sample demonstrates recreating the `Type` column (folder/file icons) and adds meaningful hover panels.", "longDescription": [ "This sample demonstrates recreating the `Type` column (folder/file icons) and adds meaningful hover panels. Shows you how to take advantage of SharePoint folder colors by referencing the `[$_ColorHex]` field. Additionally, demonstrates 2 different ways of using the `filepreview` element to show a file type icon and also a thumbnail preview of the file." ], "created": "2023-11-09T00:00:00.000Z", "updated": "2023-11-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Document Library", "Hover Cards", "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@thumbnail" ], "FORMATTING-OPERATORS": [ "startsWith" ], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "filePreviewProps", "customCardProps" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Create Folders with Colors using Power Automate", "description": "Blog post by Expiscornovus on how to create folders with colors using Power Automate.", "url": "https://www.expiscornovus.com/2023/10/11/create-coloured-folder/" }, { "name": "Create Folders with Colors using PnP.PowerShell", "description": "Script sample by Tetsuya Kawahara and Ganesh Sanap on how to create folders with colors using PnP.PowerShell.", "url": "https://pnp.github.io/script-samples/spo-create-colored-folder/README.html?tabs=pnpps" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-supertype", "route": "samples/column/generic-supertype/", "preview": "generated/previews/column-generic-supertype.webp", "previewAlt": "Generic Super Type formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-supertype/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-supertype.json", "target": "Column formatting", "schemaIssues": [ "/children/0 must NOT have additional properties" ], "download": "generated/definitions/column-samples/generic-supertype/generic-supertype.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-supertype/generic-supertype.json", "sha256": "5ddc79f91b568229773296d56aca944e20b11cdb26e8ebd0dd2a99c04026b5e1" } ] }, { "id": "column-samples/yesno-checkbox", "family": "column", "slug": "yesno-checkbox", "title": "Yes/No Checkbox", "description": "This sample uses Fluent UI icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors.", "longDescription": [ "This sample uses Fluent UI icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors." ], "created": "2018-08-18T00:00:00.000Z", "updated": "2023-10-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralPrimary", "ms-fontColor-neutralTertiary", "ms-fontSize-l" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" }, { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-checkbox", "route": "samples/column/yesno-checkbox/", "preview": "generated/previews/column-yesno-checkbox.webp", "previewAlt": "Yes/No Checkbox formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-checkbox/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-checkbox.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkbox/yesno-checkbox.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkbox/yesno-checkbox.json", "sha256": "703ee8c7bda588523a67bcced9abd225b9bbb72e9d8a07489a82d53a50ec4170" }, { "filename": "yesno-checkboxAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkbox/yesno-checkboxAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkbox/yesno-checkboxAST.json", "sha256": "8a9b4322785ceeb32b3b63469d08f9df5ac18ddb8dc8ae9ea331781176f70716" } ] }, { "id": "column-samples/image-lightbox", "family": "column", "slug": "image-lightbox", "title": "Image Lightbox", "description": "This sample demonstrates showing the full size image in a lightbox (hover card) rather than opening this image in a new window.", "longDescription": [ "This sample demonstrates showing the full size image in a lightbox (hover card) rather than opening this image in a new window." ], "created": "2020-02-10T00:00:00.000Z", "updated": "2023-10-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Image" ], "FORMATTING-TOKENS": [ "@window.innerHeight", "@window.innerWidth" ], "FORMATTING-OPERATORS": [ "ceiling", "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-fontColor-themeLight", "ms-fontColor-themeLight--hover", "ms-fontColor-white", "ms-bgColor-black" ] }, "authors": [ { "gitHubAccount": "joaoferreira", "pictureUrl": "https://github.com/joaoferreira.png", "name": "João Ferreira", "key": "joaoferreira" }, { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Drive Item Thumbnail Size Options", "description": "Details on the different size options and parameters available when retrieving a thumbnail of the Image column", "url": "https://docs.microsoft.com/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http#size-options" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/image-lightbox", "route": "samples/column/image-lightbox/", "preview": "generated/previews/column-image-lightbox.webp", "previewAlt": "Image Lightbox formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/image-lightbox/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/image-lightbox/assets/screenshotAdvanced.gif", "alt": "screenshotAdvanced" } ], "definitions": [ { "filename": "image-lightbox-advanced.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/image-lightbox/image-lightbox-advanced.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/image-lightbox/image-lightbox-advanced.json", "sha256": "be5d65df916c6ae29b5f10bcae785c0e25f216fe89d9530915aa7aa9f7fd1ec1" }, { "filename": "image-lightbox.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/image-lightbox/image-lightbox.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/image-lightbox/image-lightbox.json", "sha256": "6845ffaec77bb2a9de7c094a237e5983331eff2b8edf086cc45c078d21a458c6" } ] }, { "id": "view-samples/rating-in-tiles", "family": "view", "slug": "rating-in-tiles", "title": "Rating in Tiles", "description": "This sample demonstrates how to create a clickable rating experience in the view Tile mode. It allows users to rate the item/document when in the tile mode. ", "longDescription": [ "This sample demonstrates how to create a clickable rating experience in the view Tile mode. It allows users to rate the item/document when in the tile mode. " ], "created": "2023-10-22T00:00:00.000Z", "updated": "2023-10-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "SVG", "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "appendTo", "getThumbnailImage", "getUserImage", "indexOf", "length", "loopIndex", "Number", "replaceAll", "split", "substring", "toString" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "forEach", "fillHorizontally", "hideSelection", "defaultHoverField", "customCardProps" ], "CLASSES": [ "ms-bgColor-communicationPrimary--hover", "ms-bgColor-neutralLight", "ms-bgColor-themeLighter", "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "sp-card-borderHighlight", "sp-card-container", "sp-card-content", "sp-card-defaultClickButton", "sp-card-defaultImage", "sp-card-defaultImageOverlay", "sp-card-displayColumnContainer", "sp-card-emptyFillStar", "sp-card-halfFillStar", "sp-card-highlightedContent", "sp-card-imageContainer", "sp-card-imagePreview", "sp-card-imagePreviewBackground", "sp-card-keyboard-focusable", "sp-card-label", "sp-card-previewColumnContainer", "sp-card-starRating", "sp-card-subContainer", "sp-card-urlContent", "sp-card-userContainer", "sp-card-userCustomCard", "sp-card-userOthers", "sp-card-userTitle", "sp-css-borderColor-neutralLight", "sp-card-personCallout", "sp-card-userEmptyText", "sp-card-userThumbnail", "sp-card-ratingCount" ] }, "authors": [ { "gitHubAccount": "luis-ribeiro", "pictureUrl": "https://github.com/luis-ribeiro.png", "name": "Luís Ribeiro", "key": "luis-ribeiro" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/rating-in-tiles", "route": "samples/view/rating-in-tiles/", "preview": "generated/previews/view-rating-in-tiles.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/rating-in-tiles/assets/screenshot.gif", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "rating-in-tiles.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/1/children/0/children/0/children/0/children/1/children/0/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/rating-in-tiles/rating-in-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/rating-in-tiles/rating-in-tiles.json", "sha256": "96b16b6aab9bd7e3044f6df3225348dc4443472c9dae2496cdd5748f3889fe33" } ] }, { "id": "view-samples/group-header-remove-column-name", "family": "view", "slug": "group-header-remove-column-name", "title": "Remove Column Name from Group Header", "description": "This view formatting sample can be used to customize the group header to remove column name from group header.", "longDescription": [ "This view formatting sample can be used to customize the group header to remove column name from group header." ], "created": "2021-11-10T00:00:00.000Z", "updated": "2023-10-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "groupProps", "headerFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "ganesh-sanap" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-remove-column-name", "route": "samples/view/group-header-remove-column-name/", "preview": "generated/previews/view-group-header-remove-column-name.webp", "previewAlt": "Remove Column Name from Group Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/group-header-remove-column-name/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "group-header-remove-column-name-clickable.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-remove-column-name/group-header-remove-column-name-clickable.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-remove-column-name/group-header-remove-column-name-clickable.json", "sha256": "e331a59c2316b281ab6c770deb5c2bded52556c12e1e806dbb938146c9705fab" }, { "filename": "group-header-remove-column-name.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-remove-column-name/group-header-remove-column-name.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-remove-column-name/group-header-remove-column-name.json", "sha256": "162d2752bd1056b883ee476c9eee5320f8f1976efe13cab5d900f07c14be22d3" } ] }, { "id": "column-samples/generic-share-to-teams-with-message", "family": "column", "slug": "generic-share-to-teams-with-message", "title": "Custom Share to Teams", "description": "This sample demonstrates displaying a Share to Microsoft Teams screen with a message and URL.", "longDescription": [ "This sample demonstrates displaying a Share to Microsoft Teams screen with a message and URL." ], "created": "2023-10-15T00:00:00.000Z", "updated": "2023-10-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Microsoft Teams" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeTertiary--hover" ] }, "authors": [ { "gitHubAccount": "bianca-git", "pictureUrl": "https://github.com/bianca-git.png", "name": "Bianca W", "key": "bianca-git" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-share-to-teams-with-message", "route": "samples/column/generic-share-to-teams-with-message/", "preview": "generated/previews/column-generic-share-to-teams-with-message.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-share-to-teams-with-message/assets/screenshot.gif", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "generic-share-to-teams-with-message.json", "target": "Column formatting", "schemaIssues": [ "/children/0/attributes/viewBox must be object", "/children/0/attributes/viewBox must match pattern \"^(?:[\\-+]?\\d+\\s*[\\s,]\\s*){3}(?:[\\-+]?\\d+)$\"", "/children/0/attributes/viewBox must match a schema in anyOf" ], "download": "generated/definitions/column-samples/generic-share-to-teams-with-message/generic-share-to-teams-with-message.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-share-to-teams-with-message/generic-share-to-teams-with-message.json", "sha256": "0408c2426d6cc5fa4427460c081552bebf6c202ee6d5d219f6494c317e3e7ce3" } ] }, { "id": "column-samples/generic-gantt-chart", "family": "column", "slug": "generic-gantt-chart", "title": "Gantt Chart", "description": "This sample demonstrates the use of the Calculated column to generate a string for displaying a Gantt chart, and then parses the string to display the Gantt chart.", "longDescription": [ "This sample demonstrates the use of the Calculated column to generate a string for displaying a Gantt chart, and then parses the string to display the Gantt chart." ], "created": "2023-09-27T00:00:00.000Z", "updated": "2023-10-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "replaceAll", "substring", "indexOf", "Number", "Date", "loopIndex" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "inlineEditField", "forEach", "directionalHint" ], "CLASSES": [ "ms-bgColor-themeLight", "ms-bgColor-themeLighter--hover", "ms-bgColor-themePrimary", "ms-fontSize-s", "ms-fontSize-xs" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-gantt-chart", "route": "samples/column/generic-gantt-chart/", "preview": "generated/previews/column-generic-gantt-chart.webp", "previewAlt": "Gantt Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-gantt-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-gantt-chart-ddMMyyyy.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/0/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/generic-gantt-chart/generic-gantt-chart-ddMMyyyy.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-gantt-chart/generic-gantt-chart-ddMMyyyy.json", "sha256": "aa1dcec27e716ef600e03238bb77e1b41f64a753564374b91ee2f8903ca19632" }, { "filename": "generic-gantt-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-gantt-chart/generic-gantt-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-gantt-chart/generic-gantt-chart.json", "sha256": "4248cba90f632022fef28fb9a562b5e829126e2a2c21b96c6aba7b9e6858c70b" } ] }, { "id": "column-samples/person-hover-card", "family": "column", "slug": "person-hover-card", "title": "Person Hover Card", "description": "The following image shows a list with a default hover added to a formatted column in a list", "longDescription": [ "The following image shows a list with a default hover added to a formatted column in a list" ], "created": "2020-04-08T00:00:00.000Z", "updated": "2023-10-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "NiketJain", "pictureUrl": "https://github.com/NiketJain.png", "name": "Niket Jain", "key": "niketjain" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card", "route": "samples/column/person-hover-card/", "preview": "generated/previews/column-person-hover-card.webp", "previewAlt": "Person Hover Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-hover-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-hover-card.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-hover-card/person-hover-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-hover-card/person-hover-card.json", "sha256": "dfa67819858c374fe4bc43c88a1c3cb675356e0edd574e1e566d436813251b7f" } ] }, { "id": "column-samples/text-startswith-callingcodes", "family": "column", "slug": "text-startswith-callingcodes", "title": "Text StartsWith Calling Codes", "description": "This sample demonstrates using the indexOf 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's flag is shown next to the phone number. The same nested conditionals are also used for the tooltip.", "longDescription": [ "This sample demonstrates using the indexOf 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's flag is shown next to the phone number. The same nested conditionals are also used for the tooltip." ], "created": "2019-02-05T00:00:00.000Z", "updated": "2023-09-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-startswith-callingcodes", "route": "samples/column/text-startswith-callingcodes/", "preview": "generated/previews/column-text-startswith-callingcodes.webp", "previewAlt": "Text StartsWith Calling Codes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-startswith-callingcodes/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-startswith-callingcodes.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-startswith-callingcodes/text-startswith-callingcodes.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-startswith-callingcodes/text-startswith-callingcodes.json", "sha256": "bbf5d726494ad5eaba087978e0402fc54f30ca0ab707888ec5a77936996d24a9" } ] }, { "id": "form-samples/send-meeting-invite-with-teams-footer", "family": "form", "slug": "send-meeting-invite-with-teams-footer", "title": "Send Meeting Invite with Microsoft Teams", "description": "This sample demonstrates sending a meeting invite via Microsoft Teams to attendees in SharePoint list. The JSON can be used as Footer within SharePoint List formatting.", "longDescription": [ "This sample demonstrates sending a meeting invite via Microsoft Teams to attendees in SharePoint list. The JSON can be used as Footer within SharePoint List formatting." ], "created": "2023-09-25T00:00:00.000Z", "updated": "2023-09-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Microsoft Teams", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontSize-xl" ] }, "authors": [ { "gitHubAccount": "VigneshManohar", "pictureUrl": "https://github.com/VigneshManohar.png", "name": "Vignesh Manohar", "key": "vigneshmanohar" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/send-meeting-invite-with-teams-footer", "route": "samples/form/send-meeting-invite-with-teams-footer/", "preview": "generated/previews/form-send-meeting-invite-with-teams-footer.webp", "previewAlt": "screen_capture", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/send-meeting-invite-with-teams-footer/assets/screenshot.png", "alt": "screen_capture" } ], "definitions": [ { "filename": "send-meeting-invite-with-teams-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/send-meeting-invite-with-teams-footer/send-meeting-invite-with-teams-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/send-meeting-invite-with-teams-footer/send-meeting-invite-with-teams-footer.json", "sha256": "502a6e9a343f8b8773d610939372a2e67fdcb04379147305b9b354642d2478c7" } ] }, { "id": "column-samples/person-teams-message-format", "family": "column", "slug": "person-teams-message-format", "title": "Teams Message Format", "description": "This sample is using Microsoft Teams deep links to create a link that allows a user to send Microsoft Teams messages to the user in the column.", "longDescription": [ "This sample is using Microsoft Teams deep links to create a link that allows a user to send Microsoft Teams messages to the user in the column." ], "created": "2023-09-20T00:00:00.000Z", "updated": "2023-09-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Microsoft Teams", "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField" ], "CLASSES": [ "ms-fontSize-42", "ms-fontWeight-regular", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "stevecorey365", "pictureUrl": "https://github.com/stevecorey365.png", "name": "Steve Corey", "key": "stevecorey365" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-teams-message-format", "route": "samples/column/person-teams-message-format/", "preview": "generated/previews/column-person-teams-message-format.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-teams-message-format/assets/screenshot.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-teams-message-format/assets/screenshot-name.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-teams-message-format/assets/screenshot-picture.png", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "person-teams-message-format-name.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-teams-message-format/person-teams-message-format-name.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-teams-message-format/person-teams-message-format-name.json", "sha256": "329594a89795fb2ecdbd7784bfcd288ddc7b6ffd23f534b6372a6b5dfe9bed65" }, { "filename": "person-teams-message-format-picture.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-teams-message-format/person-teams-message-format-picture.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-teams-message-format/person-teams-message-format-picture.json", "sha256": "4ff4a88ecd29b79e5d6293ca7826f65e8603c28fb02c5b5ef57f066d46dd7aed" }, { "filename": "person-teams-message-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-teams-message-format/person-teams-message-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-teams-message-format/person-teams-message-format.json", "sha256": "fd8103b022b40cef0bf4e1fd45ce4b1c624cbfc1d6ba2b854fd06094af4fafd6" } ] }, { "id": "column-samples/managed-metadata-tag", "family": "column", "slug": "managed-metadata-tag", "title": "Display Tags", "description": "This sample demonstrates changing managed metadata values to tag-like appearance.", "longDescription": [ "This sample demonstrates changing managed metadata values to tag-like appearance." ], "created": "2023-09-17T00:00:00.000Z", "updated": "2023-09-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Managed Metadata" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-bgColor-white", "ms-fontColor-white", "ms-bgColor-themePrimary", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/managed-metadata-tag", "route": "samples/column/managed-metadata-tag/", "preview": "generated/previews/column-managed-metadata-tag.webp", "previewAlt": "Display Tags formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/managed-metadata-tag/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "managed-metadata-tag-multiple-values.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/managed-metadata-tag/managed-metadata-tag-multiple-values.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-tag/managed-metadata-tag-multiple-values.json", "sha256": "ffc758e48e6a5f40aa87501d904612a2abeac660f991b6c13771213e3cac6e35" }, { "filename": "managed-metadata-tag.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/managed-metadata-tag/managed-metadata-tag.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-tag/managed-metadata-tag.json", "sha256": "4507567087914f033efd5605025a444b1570d3258931df2e4f6c3923593ca593" } ] }, { "id": "column-samples/multi-choice-country-flags", "family": "column", "slug": "multi-choice-country-flags", "title": "Multiple Choice Country Flags", "description": "This sample demonstrates displaying flags of the counties selected in the multiple selection SharePoint choice column.", "longDescription": [ "This sample demonstrates displaying flags of the counties selected in the multiple selection SharePoint choice column." ], "created": "2023-08-27T00:00:00.000Z", "updated": "2023-08-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Image", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "inlineEditField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-country-flags", "route": "samples/column/multi-choice-country-flags/", "preview": "generated/previews/column-multi-choice-country-flags.webp", "previewAlt": "Multiple Choice Country Flags formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-country-flags/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-country-flags.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-country-flags/multi-choice-country-flags.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-country-flags/multi-choice-country-flags.json", "sha256": "8e5e628d605feb0dcfd6957beea28854022242835e14a6e691412fec92eb1aa8" } ] }, { "id": "view-samples/search-page-link-tiles", "family": "view", "slug": "search-page-link-tiles", "title": "Links to Search Page", "description": "This sample demonstrates displaying links to the search page. When you open the search page, it displays the search results where the query registered in the Query column of the item has been executed.", "longDescription": [ "This sample demonstrates displaying links to the search page. When you open the search page, it displays the search results where the query registered in the Query column of the item has been executed." ], "created": "2023-08-15T00:00:00.000Z", "updated": "2023-08-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Grouped", "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb", "@group.fieldData", "@me" ], "FORMATTING-OPERATORS": [ "substring", "indexOf", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "customCardProps", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-bgColor-themeLighter--hover", "ms-bgColor-themeLighter--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralTertiaryAlt", "ms-fontColor-themePrimary", "ms-fontColor-themePrimary", "ms-font-l" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/search-page-link-tiles", "route": "samples/view/search-page-link-tiles/", "preview": "generated/previews/view-search-page-link-tiles.webp", "previewAlt": "Links to Search Page formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/search-page-link-tiles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "search-page-link-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/search-page-link-tiles/search-page-link-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/search-page-link-tiles/search-page-link-tiles.json", "sha256": "dd0ff98616b9eda3415d24bcbe71dd552cf3ab7043b94a165288b120d05f0481" } ] }, { "id": "column-samples/generic-share-to-teams", "family": "column", "slug": "generic-share-to-teams", "title": "Share to teams", "description": "Adds an icon to share the current document in a Teams message", "longDescription": [ "Adds an icon to share the current document in a Teams message" ], "created": "2023-08-15T00:00:00.000Z", "updated": "2023-08-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists", "Microsoft Teams" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Microsoft Teams" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "indexOf", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "365Knoten", "pictureUrl": "https://github.com/365knoten.png", "name": "Sven Sieverding", "key": "365knoten" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-share-to-teams", "route": "samples/column/generic-share-to-teams/", "preview": "generated/previews/column-generic-share-to-teams.webp", "previewAlt": "Share to teams formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-share-to-teams/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-share-to-teams.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-share-to-teams/generic-share-to-teams.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-share-to-teams/generic-share-to-teams.json", "sha256": "bf16824e1559158cb613e12b18c1853d7b63717ef28adbe565c631f83b07793c" } ] }, { "id": "column-samples/multi-lookup-projected-field", "family": "column", "slug": "multi-lookup-projected-field", "title": "Multi-lookup fields and projected fields", "description": "Lookup columns that support multiple values can be formatted using the advanced `forEach` 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.", "longDescription": [ "Lookup columns that support multiple values can be formatted using the advanced `forEach` 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." ], "created": "2021-04-22T00:00:00.000Z", "updated": "2023-08-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Lookup" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "split" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" }, { "gitHubAccount": "timberrr", "pictureUrl": "https://github.com/timberrr.png", "name": "Tim Hunt", "key": "timberrr" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-lookup-projected-field", "route": "samples/column/multi-lookup-projected-field/", "preview": "generated/previews/column-multi-lookup-projected-field.webp", "previewAlt": "Multi-lookup fields and projected fields formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-lookup-projected-field/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-lookup-projected-field.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/multi-lookup-projected-field/multi-lookup-projected-field.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-lookup-projected-field/multi-lookup-projected-field.json", "sha256": "239d85a0dcc136d5853700754b1ae7edf47aef5abe2f8c2eb2115ae882cdf294" }, { "filename": "multi-lookup.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-lookup-projected-field/multi-lookup.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-lookup-projected-field/multi-lookup.json", "sha256": "4fb37ab384da681f8973d79975dd27a474c449ce693c0bb92cb8e9d2488761f6" } ] }, { "id": "view-samples/project-gantt-chart", "family": "view", "slug": "project-gantt-chart", "title": "Project Gantt Chart", "description": "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.", "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." ], "created": "2020-11-01T00:00:00.000Z", "updated": "2023-08-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now", "@rowIndex" ], "FORMATTING-OPERATORS": [ "Number", "toLocaleDateString", "floor", "getDate", "getMonth" ], "FORMATTING-ACTIONS": [ "editProps", "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter", "customCardProps", "defaultHoverField", "beakStyle", "directionalHint" ], "CLASSES": [ "ms-bgColor-neutralLight", "ms-bgColor-neutralLight", "ms-bgColor-neutralLighter--hover", "ms-bgColor-themeDarker", "ms-bgColor-themeLight", "ms-bgColor-themeLight--hover", "ms-bgColor-themePrimary", "ms-bgColor-themeTertiary", "ms-ContextualMenu-list", "ms-fontColor-black--hover", "ms-fontColor-gray140", "ms-fontColor-gray160", "ms-fontColor-green", "ms-fontColor-neutralSecondaryAlt", "ms-fontColor-sharedRed20", "ms-fontColor-sharedRed20", "ms-fontColor-themeDarker--hover", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontColor-white", "ms-fontSize-12", "ms-fontSize-14", "ms-fontSize-16", "ms-fontSize-24", "ms-fontWeight-semibold", "ms-fontWeight-semibold", "sp-field-bold", "sp-field-severity--blocked30", "ms-fontColor-gray40" ] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/project-gantt-chart", "route": "samples/view/project-gantt-chart/", "preview": "generated/previews/view-project-gantt-chart.webp", "previewAlt": "Project Gantt Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/project-gantt-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "project-gantt-chart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/project-gantt-chart/project-gantt-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/project-gantt-chart/project-gantt-chart.json", "sha256": "0dd063b4ab2530b00150608b36bf663e73e29dd204e2b334e4bba6594d92b268" } ] }, { "id": "view-samples/team-poll", "family": "view", "slug": "team-poll", "title": "Team Poll", "description": "This sample combines a couple of lists and a few formats to demonstrate creating an application using view formatting. The end result is a configurable poll that end users can submit their choices too and view grouped results.", "longDescription": [ "This sample combines a couple of lists and a few formats to demonstrate creating an application using view formatting. The end result is a configurable poll that end users can submit their choices too and view grouped results." ], "created": "2023-08-03T00:00:00.000Z", "updated": "2023-08-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Charts", "Icons", "Inline Editing", "Hover Cards", "CommandBar Customization", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex", "@group.count" ], "FORMATTING-OPERATORS": [ "indexOf", "substring" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "customCardProps", "beakStyle", "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-neutralTertiary", "ms-bgColor-neutralLight--hover", "ms-bgColor-neutralLighter", "ms-bgColor-neutralLighter--hover", "ms-bgColor-white", "ms-borderColor-neutralSecondary--hover", "ms-borderColor-neutralTertiary", "ms-borderColor-neutralLight", "ms-borderColor-neutralLighter", "ms-borderColor-white", "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover", "ms-fontColor-neutralDark", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralPrimary--hover", "ms-fontColor-neutralSecondary", "ms-fontColor-white", "ms-fontWeight-semibold", "ms-fontSize-l", "ms-fontSize-m", "ms-fontSize-s", "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/team-poll", "route": "samples/view/team-poll/", "preview": "generated/previews/view-team-poll.webp", "previewAlt": "Team Poll formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/team-poll/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/team-poll/assets/screenshotPollResponse.png", "alt": "screenshot of poll response" } ], "definitions": [ { "filename": "team-poll-configuration.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0/children/0 must NOT have additional properties" ], "download": "generated/definitions/view-samples/team-poll/team-poll-configuration.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/team-poll/team-poll-configuration.json", "sha256": "2e02efc323359d102fc95f7de2e2d4d0dbc9b631967524bc2f34dd44884e8e54" }, { "filename": "team-poll-response.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0 must NOT have additional properties" ], "download": "generated/definitions/view-samples/team-poll/team-poll-response.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/team-poll/team-poll-response.json", "sha256": "bba76593d430b186e9bbc9d51d530a3b311b73be49cc0974ab18bb8f8d7a0356" }, { "filename": "team-poll.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/team-poll/team-poll.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/team-poll/team-poll.json", "sha256": "b60dc94f078283837c0783bcf5f29f1b6de4378ee62c4814f8e1fb893eb48152" } ] }, { "id": "column-samples/multi-person-inlineedit-pill", "family": "column", "slug": "multi-person-inlineedit-pill", "title": "Multi-Person inline edit pill", "description": "This sample provides a pill style for each person in a multi-select person field, whilst allowing inline edits.", "longDescription": [ "This sample provides a pill style for each person in a multi-select person field, whilst allowing inline edits." ], "created": "2023-08-01T00:00:00.000Z", "updated": "2023-08-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField", "forEach", "inlineEditField" ], "CLASSES": [ "ms-bgColor-neutralLight", "ms-fontColor-neutralPrimary" ] }, "authors": [ { "gitHubAccount": "z3019494", "pictureUrl": "https://github.com/z3019494.png", "name": "Hubert Lam", "key": "z3019494" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-inlineedit-pill", "route": "samples/column/multi-person-inlineedit-pill/", "preview": "generated/previews/column-multi-person-inlineedit-pill.webp", "previewAlt": "Multi-Person inline edit pill formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-inlineedit-pill/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-inlineedit-pill.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-inlineedit-pill/multi-person-inlineedit-pill.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-inlineedit-pill/multi-person-inlineedit-pill.json", "sha256": "e846801d370b0a653fb19320916a8988d97541145090c05081545e2e6ffb407b" } ] }, { "id": "column-samples/multi-person-favorite", "family": "column", "slug": "multi-person-favorite", "title": "Multi person favorite", "description": "Mark a list item as a favorite", "longDescription": [ "This sample let a user add/remove a list item as a favorite, by adding the user name to a multi-person column." ], "created": "2023-07-31T08:02:26.765Z", "updated": "2023-07-31T08:02:26.765Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "removeFrom", "appendTo", "indexOf" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-Link", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "AlexanderHenkel", "pictureUrl": "https://github.com/AlexanderHenkel.png", "name": "Alexander Henkel", "key": "alexanderhenkel" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-favorite", "route": "samples/column/multi-person-favorite/", "preview": "generated/previews/column-multi-person-favorite.webp", "previewAlt": "Multi person favorite formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-favorite/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-favorite.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-favorite/multi-person-favorite.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-favorite/multi-person-favorite.json", "sha256": "00cc7a14880f90fef53dd5e47c770943a2047c9dc0e335b2d49e14c5d36a023c" } ] }, { "id": "column-samples/multi-choice-color-circles", "family": "column", "slug": "multi-choice-color-circles", "title": "Color Circles", "description": "This sample demonstrates displaying a circle of the color of the value of the choices.", "longDescription": [ "This sample demonstrates displaying a circle of the color of the value of the choices." ], "created": "2023-07-17T00:00:00.000Z", "updated": "2023-07-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length", "split", "cos", "sin", "loopIndex" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-color-circles", "route": "samples/column/multi-choice-color-circles/", "preview": "generated/previews/column-multi-choice-color-circles.webp", "previewAlt": "Color Circles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-color-circles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-color-circles.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/0/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/multi-choice-color-circles/multi-choice-color-circles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-color-circles/multi-choice-color-circles.json", "sha256": "06739933fc70f781d5400d97f0efe25a679f12a40ac9b2f2413d24f7ef1b3b2c" } ] }, { "id": "view-samples/exam-bundle-tracker", "family": "view", "slug": "exam-bundle-tracker", "title": "Exam Bundle Tracker", "description": "This sample transforms your list into an Exam Bundle Tracker.", "longDescription": [ "This sample transforms your list into an Exam Bundle Tracker." ], "created": "2023-07-14T00:00:00.000Z", "updated": "2023-07-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Grouped", "CommandBar Customization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData", "@group.count", "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "length", "getUserImage", "toString", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue", "share", "editProps" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter", "forEach", "defaultHoverField", "additionalRowClass" ], "CLASSES": [ "ms-bgColor-grey", "ms-bgColor-neutralLight", "ms-bgColor-neutralQuaternary--hover", "ms-bgColor-themeLighter", "ms-bgColor-themeLight--hover", "ms-fontColor-black", "ms-fontColor-neutralPrimary", "ms-fontColor-white--hover", "ms-fontWeight-bold", "ms-fontWeight-semibold", "sp-css-backgroundColor-BgCoral", "sp-css-backgroundColor-BgCornflowerBlue", "sp-css-backgroundColor-BgCyan", "sp-css-backgroundColor-BgCyan", "sp-css-backgroundColor-BgCyan30--hover", "sp-css-backgroundColor-BgDarkPink", "sp-css-backgroundColor-BgDustRose", "sp-css-backgroundColor-BgGold", "sp-css-backgroundColor-BgLightBlue20", "sp-css-backgroundColor-BgMintGreen", "sp-css-backgroundColor-BgMintGreen", "sp-css-backgroundColor-BgMintGreen30--hover", "sp-css-backgroundColor-BgPeach", "sp-css-backgroundColor-disabledBackground", "sp-css-backgroundColor-neutralBackground", "sp-css-borderLeftColor-CoralFont", "sp-css-borderLeftColor-CornflowerBlueFont", "sp-css-borderLeftColor-CyanFont", "sp-css-borderLeftColor-DustRoseFont", "sp-css-borderLeftColor-GoldFont", "sp-css-borderLeftColor-MintGreenFont", "sp-css-borderLeftColor-PeachFont", "sp-css-borderRight-warningBorder", "sp-css-borderTop-successBorder", "sp-css-borderTop-warningBorder", "sp-css-color-DustRoseFont", "sp-css-color-MintGreenFont", "sp-css-color-neutralFont", "sp-css-color-WhiteText", "sp-field-borderLeftBold", "sp-field-borderLeftBold", "sp-field-borderLeftSolid", "sp-field-borderLeftSolid", "sp-field-borderLeftSolid", "sp-field-fontSizeSmall", "sp-row-button", "sp-row-buttonms-bgColor-grey", "sp-row-card", "sp-row-listPadding", "sp-row-listPadding", "sp-css-color-CoralFont", "sp-css-color-PeachFont", "sp-css-color-GoldFont", "sp-css-color-CyanFont", "sp-css-color-CornflowerBlueFont", "sp-row-title" ] }, "authors": [ { "gitHubAccount": "z3019494", "pictureUrl": "https://github.com/z3019494.png", "name": "Hubert Lam", "key": "z3019494" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/exam-bundle-tracker", "route": "samples/view/exam-bundle-tracker/", "preview": "generated/previews/view-exam-bundle-tracker.webp", "previewAlt": "Exam Bundle Tracker formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/exam-bundle-tracker/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "exam-bundle-tracker.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/exam-bundle-tracker/exam-bundle-tracker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/exam-bundle-tracker/exam-bundle-tracker.json", "sha256": "c117f0433f0de0794a96959557590bf5919794f83607bbd519ff91e9b438a970" } ] }, { "id": "view-samples/student-class-learning-tracker", "family": "view", "slug": "student-class-learning-tracker", "title": "Student & Class Learning Tracker", "description": "This sample transforms your list into a learning tracker.", "longDescription": [ "This sample transforms your list into a learning tracker." ], "created": "2023-07-14T00:00:00.000Z", "updated": "2023-07-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.fieldData", "@me", "@now", "@group.count" ], "FORMATTING-OPERATORS": [ "length", "padStart", "indexOf", "toLocaleString", "toLocaleDateString", "getDate", "getMonth", "getYear", "getUserImage" ], "FORMATTING-ACTIONS": [ "setValue", "executeFlow", "share", "editProps" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter", "forEach", "inlineEditField", "defaultHoverField" ], "CLASSES": [ "ms-bgColor-grey", "ms-bgColor-neutralQuaternary--hover", "ms-bgColor-themeDark--hover", "ms-bgColor-themePrimary", "ms-fontColor-black", "ms-fontColor-neutralPrimary", "ms-fontColor-white", "ms-fontColor-white--hover", "ms-fontSize-m", "ms-fontWeight-semibold", "sp-css-backgroundColor-BgCoral", "sp-css-backgroundColor-BgCoral", "sp-css-backgroundColor-BgCoral30--hover", "sp-css-backgroundColor-BgCornflowerBlue", "sp-css-backgroundColor-BgCyan", "sp-css-backgroundColor-BgDarkPink", "sp-css-backgroundColor-BgDustRose", "sp-css-backgroundColor-BgGold", "sp-css-backgroundColor-BgMintGreen", "sp-css-backgroundColor-BgMintGreen", "sp-css-backgroundColor-BgMintGreen30--hover", "sp-css-backgroundColor-BgSage", "sp-css-backgroundColor-BgViolet", "sp-css-backgroundColor-blue", "sp-css-backgroundColor-disabledBackground", "sp-css-backgroundColor-disabledText", "sp-css-backgroundColor-errorBackground", "sp-css-backgroundColor-errorBackground", "sp-css-backgroundColor-neutralBackground", "sp-css-backgroundColor-neutralLighterAlt", "sp-css-backgroundColor-successBackground", "sp-css-backgroundColor-warningBackground", "sp-css-borderTop-successBorder", "sp-css-borderTop-successBorder", "sp-css-borderTop-warningBorder", "sp-css-borderTop-warningBorder", "sp-css-color-CoralFont", "sp-css-color-CornflowerBlueFont", "sp-css-color-CyanFont", "sp-css-color-DustRoseFont", "sp-css-color-errorFont", "sp-css-color-GoldFont", "sp-css-color-MintGreenFont", "sp-css-color-neutralFont", "sp-css-color-SageFont", "sp-css-color-VioletFont", "sp-css-color-WhiteText", "sp-css-color-WhiteText", "sp-css-color-WhiteText", "sp-field-fontSizeSmall", "sp-row-button", "sp-row-button", "sp-row-card", "sp-row-listPadding", "sp-css-backgroundColor-BgDarkRed", "sp-css-backgroundColor-BgBrown", "sp-css-backgroundColor-BgGreen", "sp-css-backgroundColor-BgBlue", "sp-css-color-WhiteFont", "ms-bgColor-neutralLight", "ms-fontColor-neutralTertiaryAlt", "ms-fontWeight-bold", "sp-row-title" ] }, "authors": [ { "gitHubAccount": "z3019494", "pictureUrl": "https://github.com/z3019494.png", "name": "Hubert Lam", "key": "z3019494" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/student-class-learning-tracker", "route": "samples/view/student-class-learning-tracker/", "preview": "generated/previews/view-student-class-learning-tracker.webp", "previewAlt": "Student & Class Learning Tracker formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/student-class-learning-tracker/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "student-class-learning-tracker-calendar.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/student-class-learning-tracker/student-class-learning-tracker-calendar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/student-class-learning-tracker/student-class-learning-tracker-calendar.json", "sha256": "4ca1ca354a20e16a5b796d6cdf9c64db97700c4bb334706b8422ccc30ed15e26" }, { "filename": "student-class-learning-tracker.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/student-class-learning-tracker/student-class-learning-tracker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/student-class-learning-tracker/student-class-learning-tracker.json", "sha256": "a686923d9ddfd0d7f344dbba5d4893545148e74c21ce63f4499f37d982105f46" } ] }, { "id": "column-samples/approval-status-icon-color", "family": "column", "slug": "approval-status-icon-color", "title": "Approval Status Icons and Colors", "description": "This sample demonstrates how to change icons and colors based on the value in the Approval Status column.", "longDescription": [ "This sample demonstrates how to change icons and colors based on the value in the Approval Status column." ], "created": "2023-06-04T00:00:00.000Z", "updated": "2023-06-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Approval Status" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [ "openApprovalDialog" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-white", "ms-bgColor-sharedBlueMagenta10", "ms-bgColor-sharedRed10", "ms-bgColor-tealLight", "ms-bgColor-blue", "ms-fontSize-10", "ms-fontColor-sharedBlueMagenta10", "ms-fontColor-sharedRed10", "ms-fontColor-teal", "ms-fontColor-blue", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/approval-status-icon-color", "route": "samples/column/approval-status-icon-color/", "preview": "generated/previews/column-approval-status-icon-color.webp", "previewAlt": "Approval Status Icons and Colors formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/approval-status-icon-color/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/approval-status-icon-color/assets/language-difference.png", "alt": "screenshot" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/approval-status-icon-color/assets/approval-details.png", "alt": "screenshot" } ], "definitions": [ { "filename": "approval-status-icon-color-with-approvals.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/1/customRowAction/action must be equal to one of the allowed values", "/children/0/children/1/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/column-samples/approval-status-icon-color/approval-status-icon-color-with-approvals.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/approval-status-icon-color/approval-status-icon-color-with-approvals.json", "sha256": "8c4f29e998cc8c08ca688e7dfb3e880a8c02662d8e47c39765d650ef7b322007" }, { "filename": "approval-status-icon-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/approval-status-icon-color/approval-status-icon-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/approval-status-icon-color/approval-status-icon-color.json", "sha256": "30f3586d2217fb034f72e220272af96eb2fb13fd14b9781e240c009a69d95d3a" } ] }, { "id": "column-samples/generic-star-icon", "family": "column", "slug": "generic-star-icon", "title": "Star Icons", "description": "This sample formats a choice column to use star icons similar to Gmail.", "longDescription": [ "This sample formats a choice column to use star icons similar to Gmail." ], "created": "2023-05-15T00:00:00.000Z", "updated": "2023-05-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "wwcoop", "pictureUrl": "https://github.com/wwcoop.png", "name": "Will Cooper", "key": "wwcoop" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-star-icon", "route": "samples/column/generic-star-icon/", "preview": "generated/previews/column-generic-star-icon.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-star-icon/assets/screenshot.png", "alt": "screenshot of the sample" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-star-icon/assets/icon-list.png", "alt": "screenshot of the icon list" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-star-icon/assets/inlineEditField.gif", "alt": "screenshot of the inlineEditField" } ], "definitions": [ { "filename": "generic-star-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-star-icon/generic-star-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-star-icon/generic-star-icon.json", "sha256": "54b4d744d1f42ea47556dbb8c8af5d01afaefc4e7741e36a81770fb09db8a64a" } ] }, { "id": "column-samples/generic-item-version-history", "family": "column", "slug": "generic-item-version-history", "title": "Item Version History", "description": "This sample demonstrates how to build a button to display the version history of an item in SharePoint Online.", "longDescription": [ "This sample demonstrates how to build a button to display the version history of an item in SharePoint Online by creating a link to the classic versions.aspx page." ], "created": "2023-05-12T00:00:00.000Z", "updated": "2023-05-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "Tanddant", "pictureUrl": "https://github.com/Tanddant.png", "name": "Dan Toft", "key": "tanddant" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-item-version-history", "route": "samples/column/generic-item-version-history/", "preview": "generated/previews/column-generic-item-version-history.webp", "previewAlt": "Item Version History formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-item-version-history/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-item-version-history.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-item-version-history/generic-item-version-history.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-item-version-history/generic-item-version-history.json", "sha256": "05eb36a5e65dfe52fd36619e44d2c5695b529f865c85e85156fe9e765b3a3d80" } ] }, { "id": "view-samples/menu-link-button", "family": "view", "slug": "menu-link-button", "title": "Menu Link button", "description": "This sample allows for the creation of quick links through the use of buttons with additional features. These features include the ability to configure the button using size and color.", "longDescription": [ "This sample allows for the creation of quick links through the use of buttons with additional features. These features include the ability to configure the button using size and color. It does not include features like audience targeting, ability to change position of the icon and few others." ], "created": "2023-05-03T00:00:00.000Z", "updated": "2023-05-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-sharedGray10--hover" ] }, "authors": [ { "gitHubAccount": "reshmee011", "pictureUrl": "https://github.com/reshmee011.png", "name": "Reshmee Auckloo", "key": "reshmee011" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/menu-link-button", "route": "samples/view/menu-link-button/", "preview": "generated/previews/view-menu-link-button.webp", "previewAlt": "Menu Link button formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-link-button/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-link-button/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "menu-link-button.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/menu-link-button/menu-link-button.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/menu-link-button/menu-link-button.json", "sha256": "33598bc3cd97f510f9de257197d4e9132ead43681f8ff5c2b08b79923cd94d93" } ] }, { "id": "view-samples/quiz", "family": "view", "slug": "quiz", "title": "Quiz", "description": "This sample creates a quiz with multiple choice questions. The tile view and custom card props provide visual feedback to users when making answer choices.", "longDescription": [ "This sample creates a quiz with multiple choice questions. The tile view and custom card props provide visual feedback to users when making answer choices." ], "created": "2023-04-29T00:00:00.000Z", "updated": "2023-04-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Icons", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "beakStyle", "customCardProps", "directionalHint" ], "CLASSES": [ "sp-row-listPadding", "sp-row-button", "ms-borderColor-blue", "sp-row-button", "ms-bgColor-purpleDark--hover", "ms-fontWeight-semibold", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/quiz", "route": "samples/view/quiz/", "preview": "generated/previews/view-quiz.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/quiz/assets/screenshot.gif", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "quiz.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/quiz/quiz.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/quiz/quiz.json", "sha256": "9e01ca6d3b98fb0fb6e293dd659b98f06d5d15bb4c64e111c01fb82865e004dd" } ] }, { "id": "view-samples/linkinbio", "family": "view", "slug": "linkinbio", "title": "Linkinbio", "description": "This sample creates a link in bio card for users. A Link in bio is important for people to have because it provides a centralized location where they can direct their followers or potential customers to access more information about them, their products, or their services.", "longDescription": [ "This sample creates a link in bio card for users. A Link in bio is important for people to have because it provides a centralized location where they can direct their followers or potential customers to access more information about them, their products, or their services." ], "created": "2023-04-22T00:00:00.000Z", "updated": "2023-04-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-font-l", "ms-font-xl", "ms-bgColor-sharedBlueMagenta10", "ms-bgColor-sharedMagenta10--hover", "ms-bgColor-sharedCyanBlue10", "ms-bgColor-sharedCyanBlue20--hover", "ms-bgColor-magentaLight", "ms-bgColor-magenta--hover", "ms-bgColor-orangeLighter", "ms-bgColor-orange--hover", "ms-bgColor-greenLight", "ms-bgColor-green--hover", "ms-bgColor-neutralLight", "ms-fontColor-black", "sp-row-listPadding", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/linkinbio", "route": "samples/view/linkinbio/", "preview": "generated/previews/view-linkinbio.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/linkinbio/assets/screenshot.png", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "linkinbio.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/linkinbio/linkinbio.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/linkinbio/linkinbio.json", "sha256": "ea4e1901efbb7a04cd3cc4a37a9762f20b0e9f5aeac4a89b57134a1a5bebe37c" } ] }, { "id": "view-samples/linkinbio-instagram", "family": "view", "slug": "linkinbio-instagram", "title": "Linkinbio_Instagram", "description": "An instagram-inspired bio page for users.", "longDescription": [ "This sample creates a instagram-inspired bio page for users.A Link in bio page is important for people to have because it provides a centralized location where they can direct their followers or potential customers to access more information about them, their products, or their services" ], "created": "2023-04-22T00:00:00.000Z", "updated": "2023-04-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Gallery", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@isSelected" ], "FORMATTING-OPERATORS": [ "getUserImage", "getThumbnailImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField" ], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-purpleDark--hover", "ms-fontColor-black", "ms-fontWeight-semibold", "ms-font-xl", "sp-row-listPadding", "sp-row-button", "ms-bgColor-blue", "ms-bgColor-blueLight" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/linkinbio-instagram", "route": "samples/view/linkinbio-instagram/", "preview": "generated/previews/view-linkinbio-instagram.webp", "previewAlt": "screenshot of the sample", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/linkinbio-instagram/assets/screenshot.png", "alt": "screenshot of the sample" } ], "definitions": [ { "filename": "linkinbio-instagram.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/2/children/5/children/0/children/0/children/0/attributes/viewBox must be object", "/formatter/children/2/children/5/children/0/children/0/children/0/attributes/viewBox must match pattern \"^(?:[\\-+]?\\d+\\s*[\\s,]\\s*){3}(?:[\\-+]?\\d+)$\"", "/formatter/children/2/children/5/children/0/children/0/children/0/attributes/viewBox must match a schema in anyOf" ], "download": "generated/definitions/view-samples/linkinbio-instagram/linkinbio-instagram.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/linkinbio-instagram/linkinbio-instagram.json", "sha256": "0d58ea1c331b570e04444bb23ed8f7e9607d1bae49b866e4f5ed55d092b32147" } ] }, { "id": "column-samples/text-googlemaps-link", "family": "column", "slug": "text-googlemaps-link", "title": "Display Link to Google Maps", "description": "This sample demonstrates displaying a link to Google Maps. When you open that link, a map of the area around the field value location is displayed.", "longDescription": [ "This sample demonstrates displaying a link to Google Maps. When you open that link, a map of the area around the field value location is displayed." ], "created": "2023-04-06T00:00:00.000Z", "updated": "2023-04-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themeLighter", "ms-fontColor-neutralSecondary", "ms-bgColor-themePrimary--hover", "ms-fontColor-white--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-googlemaps-link", "route": "samples/column/text-googlemaps-link/", "preview": "generated/previews/column-text-googlemaps-link.webp", "previewAlt": "Display Link to Google Maps formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-googlemaps-link/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-googlemaps-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-googlemaps-link/text-googlemaps-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-googlemaps-link/text-googlemaps-link.json", "sha256": "e9f0890f50100b6976d972cc61e8163caef7f7e7192ca2e32cc8a4029bd07cda" } ] }, { "id": "column-samples/multi-choice-links", "family": "column", "slug": "multi-choice-links", "title": "Multi-Choice Links", "description": "This sample shows how we can display multiple links in a single column using the multi-choice column.", "longDescription": [ "This sample shows how we can display multiple links in a single column using the multi-choice column." ], "created": "2021-04-14T00:00:00.000Z", "updated": "2023-03-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-bgColor-themeLight", "ms-bgColor-themeLighter--hover", "ms-fontColor-themeDark", "ms-fontWeight-regular", "ms-fontSize-sPlus", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", "name": "Anoop Tatti", "key": "anoopt" }, { "gitHubAccount": "TekExpo", "pictureUrl": "https://github.com/TekExpo.png", "name": "Abhijeet Jadhav", "key": "tekexpo" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-links", "route": "samples/column/multi-choice-links/", "preview": "generated/previews/column-multi-choice-links.webp", "previewAlt": "Multi-Choice Links formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-links/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-links-advenced.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-links/multi-choice-links-advenced.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-links/multi-choice-links-advenced.json", "sha256": "010cba55f742be9f5b72decd9491c77c90719908feef95ab96a5d9aee6d281c4" }, { "filename": "multi-choice-links.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-links/multi-choice-links.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-links/multi-choice-links.json", "sha256": "6d84f188977392d3207057393fd81ed10170d4f65cabc3e58bd1a40c8f5460ae" } ] }, { "id": "form-samples/welcome-header", "family": "form", "slug": "welcome-header", "title": "Welcome Header", "description": "This sample demonstrates how to display Welcome message depending on time of day, display user profile image in Forms Header.", "longDescription": [ "This sample demonstrates how to display Welcome message depending on time of day, display user profile image and display user name if formated in mail address in Forms Header" ], "created": "2023-03-14T00:00:00.000Z", "updated": "2023-03-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me", "@now" ], "FORMATTING-OPERATORS": [ "toLocaleTimeString", "indexOf", "replaceAll", "getUserImage", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-css-color-themePrimary", "sp-css-backgroundColor-themeLight", "ms-fontSize-24", "ms-fontWeight-semibold", "ms-fontSize-12" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/welcome-header", "route": "samples/form/welcome-header/", "preview": "generated/previews/form-welcome-header.webp", "previewAlt": "Welcome Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/welcome-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "welcome-header-24hours.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/welcome-header/welcome-header-24hours.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/welcome-header/welcome-header-24hours.json", "sha256": "5d6b55f6163c1dd9d60ad1eaa36eb9129c920507446201e0101e9fe7c2aebe28" }, { "filename": "welcome-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/welcome-header/welcome-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/welcome-header/welcome-header.json", "sha256": "f30f0be02066815a8a1c95ef66173d3e6bd9efa2274c32187fa89ef12a507d5e" } ] }, { "id": "column-samples/date-world-time", "family": "column", "slug": "date-world-time", "title": "World Time", "description": "This sample demonstrates displaying the times of countries and regions of the world for a date column value that includes the time.", "longDescription": [ "This sample demonstrates displaying the times of countries and regions of the world for a date column value that includes the time." ], "created": "2023-03-03T00:00:00.000Z", "updated": "2023-03-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Icons" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "Number", "abs", "floor", "ceiling", "padStart", "split", "replaceAll", "indexOf", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "forEach" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLight", "ms-bgColor-neutralPrimary--hover", "ms-bgColor-neutralTertiary", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-bgColor-themePrimary--hover", "ms-fontColor-white--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-world-time", "route": "samples/column/date-world-time/", "preview": "generated/previews/column-date-world-time.webp", "previewAlt": "World Time formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-world-time/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-world-time.json", "target": "Column formatting", "schemaIssues": [ "/children/1/customCardProps/formatter/children/0/children/0/children/2/children/0/children/1/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/date-world-time/date-world-time.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-world-time/date-world-time.json", "sha256": "a131af262e60467ad087a796fcc168ea7449e874397e951e2e74b0027804bc60" } ] }, { "id": "column-samples/childcount-color-change", "family": "column", "slug": "childcount-color-change", "title": "Change color based on Item Child Count", "description": "This sample shows the Item Child Count field as green when exactly 5 files are uploaded", "longDescription": [ "This sample shows the Item Child Count field as red when less then 5 documents are uploaded, and green when exactly 5 files are uploaded" ], "created": "2023-02-20T00:00:00.000Z", "updated": "2023-02-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "marijnsomers", "pictureUrl": "https://github.com/marijnsomers.png", "name": "Marijn Somers", "key": "marijnsomers" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/childcount-color-change", "route": "samples/column/childcount-color-change/", "preview": "generated/previews/column-childcount-color-change.webp", "previewAlt": "Change color based on Item Child Count formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/childcount-color-change/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "childcount-color-change.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/childcount-color-change/childcount-color-change.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/childcount-color-change/childcount-color-change.json", "sha256": "b5f9cc95616860f599eef2c968f43d3a78f35202ccfd7c8f909fb887b6a39463" } ] }, { "id": "view-samples/group-header-color-itemcount", "family": "view", "slug": "group-header-color-itemcount", "title": "Group by header color depending on item count", "description": "Group by header colors green when 5 items are grouped", "longDescription": [ "Grouping items or documents will show the header in a red or green color depending on amount of items in the gruouping" ], "created": "2023-02-19T00:00:00.000Z", "updated": "2023-02-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "headerFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "marijnsomers", "pictureUrl": "https://github.com/marijnsomers.png", "name": "Marijn Somers", "key": "marijnsomers" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-color-itemcount", "route": "samples/view/group-header-color-itemcount/", "preview": "generated/previews/view-group-header-color-itemcount.webp", "previewAlt": "Group by header color depending on item count formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/group-header-color-itemcount/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "group-header-color-itemcount.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-color-itemcount/group-header-color-itemcount.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-color-itemcount/group-header-color-itemcount.json", "sha256": "556d1a3779b422ef7fc65030dffecd75cd6e25105d8136d71213498084107a77" } ] }, { "id": "form-samples/person-circle-header", "family": "form", "slug": "person-circle-header", "title": "Person circle Header", "description": "This sample demonstrates how to display multiple selected persons from existing field in the header.", "longDescription": [ "This sample demonstrates how to display multiple selected persons from existing field in the header. The values of the `Contacts` column are displayed in the header with visual circle process desing and switching color position." ], "created": "2023-02-17T00:00:00.000Z", "updated": "2023-02-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "loopIndex", "Number", "length", "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField" ], "CLASSES": [ "sp-card-userThumbnail", "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/person-circle-header", "route": "samples/form/person-circle-header/", "preview": "generated/previews/form-person-circle-header.webp", "previewAlt": "Person circle Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/person-circle-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-circle-header.json", "target": "Form header", "schemaIssues": [ "/children/0/children/1/style/border-bottom must be object", "/children/0/children/1/style/border-bottom must be string", "/children/0/children/1/style/border-bottom must match a schema in anyOf" ], "download": "generated/definitions/form-samples/person-circle-header/person-circle-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/person-circle-header/person-circle-header.json", "sha256": "a77dd3ff86cac2cb1df1b13fceb2ed0531120a34daefcc25c3297061fa03ee90" } ] }, { "id": "column-samples/date-notation", "family": "column", "slug": "date-notation", "title": "Date Notation", "description": "This sample provides a way to make sure that the notation of a date and time column in SharePoint is forced in a specific notation.", "longDescription": [ "This sample provides a way to make sure that the notation of a date and time column in SharePoint is forced in a specific notation." ], "created": "2023-02-08T00:00:00.000Z", "updated": "2023-02-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getDate", "getMonth", "getYear", "substring", "endsWith", "toLocaleTimeString", "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "m3ngi3", "pictureUrl": "https://github.com/m3ngi3.png", "name": "Django Lohn", "key": "m3ngi3" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-notation", "route": "samples/column/date-notation/", "preview": "generated/previews/column-date-notation.webp", "previewAlt": "Date Notation formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-notation/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-notation.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-notation/date-notation.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-notation/date-notation.json", "sha256": "17642a052ad885c4ec797113f438cf588f48879b4881c0368edb90e7bbb79eb3" } ] }, { "id": "column-samples/generic-file-preview", "family": "column", "slug": "generic-file-preview", "title": "File Preview", "description": "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).", "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)." ], "created": "2020-08-08T00:00:00.000Z", "updated": "2023-01-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-themeDark--hover" ] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-file-preview", "route": "samples/column/generic-file-preview/", "preview": "generated/previews/column-generic-file-preview.webp", "previewAlt": "File Preview formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-file-preview/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-file-preview/assets/screenshotFilePreview.png", "alt": "screenshotFilePreview" } ], "definitions": [ { "filename": "generic-file-preview.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-file-preview/generic-file-preview.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-file-preview/generic-file-preview.json", "sha256": "17970cf2e0cd4e5b8718b26e7cbbbf748044332c193ddd0b02b9aef268da2842" } ] }, { "id": "column-samples/text-multiple-hyperlinks", "family": "column", "slug": "text-multiple-hyperlinks", "title": "Multiple hyperlinks in single field", "description": "Using this sample you can have multiple hyperlinks in a single field.", "longDescription": [ "Using this sample you can have multiple hyperlinks in a single field." ], "created": "2023-01-26T00:00:00.000Z", "updated": "2023-01-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "split", "indexOf", "substring", "replaceAll" ], "FORMATTING-ACTIONS": [ "editProps" ], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontSize-s", "ms-fontColor-neutralPrimaryAlt", "ms-fontColor-themePrimary--hover", "ms-bgColor-themeLight", "ms-bgColor-themeLighter", "ms-bgColor-themeLight--hover", "ms-bgColor-neutralTertiary--hover" ] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-multiple-hyperlinks", "route": "samples/column/text-multiple-hyperlinks/", "preview": "generated/previews/column-text-multiple-hyperlinks.webp", "previewAlt": "Multiple hyperlinks in single field formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-multiple-hyperlinks/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-multiple-hyperlinks.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/text-multiple-hyperlinks/text-multiple-hyperlinks.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-multiple-hyperlinks/text-multiple-hyperlinks.json", "sha256": "d18536bac5f06ccc1297b12d865d345c74e492e6b60606a6c5eea35d43a5ceb1" } ] }, { "id": "column-samples/text-hyperlink-long-addresses", "family": "column", "slug": "text-hyperlink-long-addresses", "title": "Hyperlink long addresses", "description": "The URL in a hyperlink column has a 255-character limit, which can get you into trouble. This sample demonstrates the use of a multiple lines of text column to display the link so that this limitation can be avoided.", "longDescription": [ "The URL in a hyperlink column has a 255-character limit, which can get you into trouble. This sample demonstrates the use of a multiple lines of text column to display the link so that this limitation can be avoided." ], "created": "2023-01-23T00:00:00.000Z", "updated": "2023-01-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "editProps" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontSize-s", "ms-fontColor-themePrimary", "ms-bgColor-themeLight", "ms-bgColor-themeLight--hover", "ms-bgColor-neutralTertiary--hover" ] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-hyperlink-long-addresses", "route": "samples/column/text-hyperlink-long-addresses/", "preview": "generated/previews/column-text-hyperlink-long-addresses.webp", "previewAlt": "Hyperlink long addresses formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-hyperlink-long-addresses/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-hyperlink-long-addresses.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-hyperlink-long-addresses/text-hyperlink-long-addresses.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-hyperlink-long-addresses/text-hyperlink-long-addresses.json", "sha256": "9ad1467c0b25598e94a89bbfc6e385b14c026b1f26d66a729a314bb0410a32a5" } ] }, { "id": "column-samples/generic-link-to-parent-documentset", "family": "column", "slug": "generic-link-to-parent-documentset", "title": "Link to Parent Documentset", "description": "The purpose of this sample is to enhance the use of documentsets. Assuming you have a SharePoint Library with documentsets, it can be useful to create a view that shows all the files without the documentset (folder) structure. By adding a column to this view using this sample, users can open the parent documentset of a file.", "longDescription": [ "The purpose of this sample is to enhance the use of documentsets. Assuming you have a SharePoint Library with documentsets, it can be useful to create a view that shows all the files without the documentset (folder) structure. By adding a column to this view using this sample, users can open the parent documentset of a file." ], "created": "2022-04-07T00:00:00.000Z", "updated": "2023-01-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "replace", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-link-to-parent-documentset", "route": "samples/column/generic-link-to-parent-documentset/", "preview": "generated/previews/column-generic-link-to-parent-documentset.webp", "previewAlt": "Link to Parent Documentset formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-link-to-parent-documentset/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-link-to-parent-documentset.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-link-to-parent-documentset/generic-link-to-parent-documentset.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-link-to-parent-documentset/generic-link-to-parent-documentset.json", "sha256": "c242195699fc0682efcb08e5d5db5c37bbff297d44857214c3a77df66a9c6da3" } ] }, { "id": "column-samples/multi-choice-list", "family": "column", "slug": "multi-choice-list", "title": "Bulleted and Numbered List", "description": "This sample demonstrates displaying Multi-Select Choice column values like a bulleted and numbered list.", "longDescription": [ "This sample demonstrates displaying Multi-Select Choice column values like a bulleted and numbered list." ], "created": "2023-01-14T00:00:00.000Z", "updated": "2023-01-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "loopIndex" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-list", "route": "samples/column/multi-choice-list/", "preview": "generated/previews/column-multi-choice-list.webp", "previewAlt": "Bulleted and Numbered List formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-list/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-list/assets/screenshot-bulleted-list.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-list.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-list/multi-choice-list.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-list/multi-choice-list.json", "sha256": "484ec8352035add4e488310a70e4c35c999a68444a9c78c23c3c6f0c6279fceb" }, { "filename": "multi-choice-numbered-list.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-list/multi-choice-numbered-list.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-list/multi-choice-numbered-list.json", "sha256": "ddb424e3284c8d00051c055b9fe678e771316c249a5097c1f94a76e1987538d5" } ] }, { "id": "column-samples/number-icon-repeat", "family": "column", "slug": "number-icon-repeat", "title": "Display icons by repeating", "description": "This sample demonstrates the use of the padStart and split operators to repeatedly display icons for the number of values in the number column.", "longDescription": [ "This sample demonstrates the use of the padStart and split operators to repeatedly display icons for the number of values in the number column." ], "created": "2023-01-14T00:00:00.000Z", "updated": "2023-01-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "split", "padStart", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-icon-repeat", "route": "samples/column/number-icon-repeat/", "preview": "generated/previews/column-number-icon-repeat.webp", "previewAlt": "Display icons by repeating formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-icon-repeat/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-icon-repeat/assets/screenshot-icon.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-icon-repeat-with-number.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/1/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-icon-repeat/number-icon-repeat-with-number.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-icon-repeat/number-icon-repeat-with-number.json", "sha256": "f5282c2a418f80fdfc6b5104edeb8284e703aa129cdef5ffcb29d42f9cc77f68" }, { "filename": "number-icon-repeat.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-icon-repeat/number-icon-repeat.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-icon-repeat/number-icon-repeat.json", "sha256": "78a695d3de8032b941e0a4f090c8e3b57afc84f010f7750b4c9c5715a3f83a0f" } ] }, { "id": "column-samples/managed-metadata-tag-icon", "family": "column", "slug": "managed-metadata-tag-icon", "title": "Managed Metadata Tag Icon", "description": "This sample displays a tag icon to the left of the value in the managed metadata column.", "longDescription": [ "This sample displays a tag icon to the left of the value in the managed metadata column." ], "created": "2021-03-29T00:00:00.000Z", "updated": "2023-01-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Managed Metadata" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-font-s" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/managed-metadata-tag-icon", "route": "samples/column/managed-metadata-tag-icon/", "preview": "generated/previews/column-managed-metadata-tag-icon.webp", "previewAlt": "Managed Metadata Tag Icon formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/managed-metadata-tag-icon/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "managed-metadata-tag-icon-multi-choice.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/managed-metadata-tag-icon/managed-metadata-tag-icon-multi-choice.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-tag-icon/managed-metadata-tag-icon-multi-choice.json", "sha256": "23a561e31f9dabcb05ed263e19d047806fe0cc9d54b1fd4d1edc40024c57e830" }, { "filename": "managed-metadata-tag-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/managed-metadata-tag-icon/managed-metadata-tag-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/managed-metadata-tag-icon/managed-metadata-tag-icon.json", "sha256": "4cf65082166a58f39a8d3a6f13e55dca2c09e9773167eb9b4d7248ba25bf7c70" } ] }, { "id": "column-samples/generic-download-file-button", "family": "column", "slug": "generic-download-file-button", "title": "Download File Button", "description": "This sample demonstrates adding a button within a document library view which downloads the file.", "longDescription": [ "This sample demonstrates adding a button within a document library view which downloads the file." ], "created": "2022-01-05T00:00:00.000Z", "updated": "2023-01-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-download-file-button", "route": "samples/column/generic-download-file-button/", "preview": "generated/previews/column-generic-download-file-button.webp", "previewAlt": "generic-comment-count", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-download-file-button/assets/screenshot.png", "alt": "generic-comment-count" } ], "definitions": [ { "filename": "generic-download-file-button.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-download-file-button/generic-download-file-button.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-download-file-button/generic-download-file-button.json", "sha256": "4d3d4f61ae653d359cbbf973d66f4e3ee765a5f6aeef8b35cfb58f13c1f8e5ff" } ] }, { "id": "view-samples/internal-cv", "family": "view", "slug": "internal-cv", "title": "Internal CV", "description": "This tutorial will help you create a basic internal CV through JSON view formatting.", "longDescription": [ "This tutorial will help you create a basic internal CV through JSON view formatting. Thanks to JSON formatting, it's possible to create a custom card to be used as a form itself, by taking advantage of the inline editing feature." ], "created": "2022-12-21T00:00:00.000Z", "updated": "2022-12-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Grouped", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "length", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "defaultClick", "share" ], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "beakStyle", "directionalHint", "hideSelection", "fillHorizontally", "forEach", "defaultHoverField" ], "CLASSES": [ "sp-field-bold", "sp-field-fontSize15", "sp-field-fontSize17", "sp-css-color-BlackText", "ms-fontSize-32", "sp-css-color-neutralTertiary", "ms-bgColor-themeLighterAlt--hover", "sp-field-fontSize24", "sp-css-color-GreyText", "sp-css-color-black", "sp-css-backgroundColor-BgLilac30--hover", "sp-css-backgroundColor-BgSage20--hover", "ms-bgColor-warning--hover", "sp-css-backgroundColor-BgLightBlue20", "sp-css-color-DarkBlueText", "sp-css-backgroundColor-neutralLighter--hover" ] }, "authors": [ { "gitHubAccount": "Fedes365", "pictureUrl": "https://github.com/Fedes365.png", "name": "Federico Sapia", "key": "fedes365" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/internal-cv", "route": "samples/view/internal-cv/", "preview": "generated/previews/view-internal-cv.webp", "previewAlt": "Internal CV preview card", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/internal-cv/assets/screenshot.png", "alt": "Internal CV preview card" } ], "definitions": [ { "filename": "internal-cv.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/2/children/2/children/8/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/view-samples/internal-cv/internal-cv.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/internal-cv/internal-cv.json", "sha256": "6258167a84f3da6f41ec8bbee5498d9ea8a09aa004fe57cbd6b6ff00bf6242a3" } ] }, { "id": "view-samples/vertical-mega-menu", "family": "view", "slug": "vertical-mega-menu", "title": "Vertical Mega Menu", "description": "This sample demonstrates the use of multi lines of text column value and the split operator to display a vertical mega menu.", "longDescription": [ "This sample demonstrates the use of multi lines of text column value and the split operator to display a vertical mega menu." ], "created": "2022-12-13T00:00:00.000Z", "updated": "2022-12-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@window.innerWidth" ], "FORMATTING-OPERATORS": [ "split", "indexOf", "substring", "replaceAll", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter", "forEach" ], "CLASSES": [ "ms-fontColor-neutralPrimaryAlt", "ms-fontColor-themePrimary--hover", "ms-bgColor-themeLighter--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/vertical-mega-menu", "route": "samples/view/vertical-mega-menu/", "preview": "generated/previews/view-vertical-mega-menu.webp", "previewAlt": "Vertical Mega Menu", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/vertical-mega-menu/assets/screenshot.png", "alt": "Vertical Mega Menu" } ], "definitions": [ { "filename": "vertical-mega-menu.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/customCardProps/formatter/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/view-samples/vertical-mega-menu/vertical-mega-menu.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/vertical-mega-menu/vertical-mega-menu.json", "sha256": "910d945fb4da29adc7f32751a2aaa2520db172af993e18a7c4d2dae0ea925762" } ] }, { "id": "view-samples/highlight-rows-current-weekday", "family": "view", "slug": "highlight-rows-current-weekday", "title": "Highlight rows on current day of the week", "description": "Highlight rows in a view differently on different days of the week.", "longDescription": [ "Highlight rows in a view differently on different days of the week." ], "created": "2022-11-27T00:00:00.000Z", "updated": "2022-11-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "floor", "Number", "Date" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-bgColor-themeLight--hover" ] }, "authors": [ { "gitHubAccount": "365Knoten", "pictureUrl": "https://github.com/365knoten.png", "name": "Sven Sieverding", "key": "365knoten" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/highlight-rows-current-weekday", "route": "samples/view/highlight-rows-current-weekday/", "preview": "generated/previews/view-highlight-rows-current-weekday.webp", "previewAlt": "View on a Sunday", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/highlight-rows-current-weekday/assets/screenshot.png", "alt": "View on a Sunday" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/highlight-rows-current-weekday/assets/screenshot-wednesday.png", "alt": "View on a Wednesday" } ], "definitions": [ { "filename": "highlight-rows-current-weekday.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/highlight-rows-current-weekday/highlight-rows-current-weekday.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/highlight-rows-current-weekday/highlight-rows-current-weekday.json", "sha256": "206128659216c4c91c3a5acd1ee62442aeb144ebc3a0b25e1896e024312f977a" } ] }, { "id": "column-samples/text-qrcode", "family": "column", "slug": "text-qrcode", "title": "Display QR Code", "description": "This sample demonstrates the use of TEC-IT's service to convert column value text into a QR code and display it.", "longDescription": [ "This sample demonstrates the use of TEC-IT's service to convert column value text into a QR code and display it." ], "created": "2022-11-13T00:00:00.000Z", "updated": "2022-11-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover", "ms-bgColor-themeLight--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-qrcode", "route": "samples/column/text-qrcode/", "preview": "generated/previews/column-text-qrcode.webp", "previewAlt": "Display QR Code formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-qrcode/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-qrcode-card.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-qrcode/text-qrcode-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-qrcode/text-qrcode-card.json", "sha256": "469406e4402c05e124806bce0f3c09a7b9bea02ca00d1e9fd306989703686212" }, { "filename": "text-qrcode.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-qrcode/text-qrcode.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-qrcode/text-qrcode.json", "sha256": "a37312c5a03e2e365c7e58732c14996c8f6ea388b9f14c46d87d261e69d01b32" } ] }, { "id": "view-samples/whiteboard-sticky-notes", "family": "view", "slug": "whiteboard-sticky-notes", "title": "Whiteboard sticky notes", "description": "This sample creates a whiteboard-styled sticky notes that displays information. The sticky notes have two sides, so when clicked they show another piece of information.", "longDescription": [ "This sample creates a whiteboard-styled sticky notes that displays information. The sticky notes have two sides, so when clicked they show another piece of information." ], "created": "2022-11-04T00:00:00.000Z", "updated": "2022-11-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@isSelected" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-fontColor-neutralPrimary", "sp-card-content", "sp-card-highlightedContent", "sp-css-borderColor-neutralLight", "sp-card-subContainer", "sp-card-displayColumnContainer", "sp-card-borderHighlight", "sp-row-card" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/whiteboard-sticky-notes", "route": "samples/view/whiteboard-sticky-notes/", "preview": "generated/previews/view-whiteboard-sticky-notes.webp", "previewAlt": "Whiteboard sticky notes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/whiteboard-sticky-notes/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "whiteboard-sticky-notes.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/whiteboard-sticky-notes/whiteboard-sticky-notes.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/whiteboard-sticky-notes/whiteboard-sticky-notes.json", "sha256": "ada79d01a920a709d289e324e630d255fe2de918aefa8d21e2be4a51575e6ad2" } ] }, { "id": "form-samples/send-email-task-owner-footer", "family": "form", "slug": "send-email-task-owner-footer", "title": "Send Email to Task owner", "description": "This sample demonstrates displaying Email link to send an email to task owner", "longDescription": [ "This sample demonstrates displaying Email link to send an email to owner of the task in SharePoint list." ], "created": "2022-10-15T00:00:00.000Z", "updated": "2022-10-30T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralSecondary", "ms-fontColor-themePrimary", "ms-fontSize-xl" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "ganesh-sanap" }, { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/send-email-task-owner-footer", "route": "samples/form/send-email-task-owner-footer/", "preview": "generated/previews/form-send-email-task-owner-footer.webp", "previewAlt": "Send Email to Task owner formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/send-email-task-owner-footer/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "send-email-task-owner-footer-outlook-web.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/send-email-task-owner-footer/send-email-task-owner-footer-outlook-web.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/send-email-task-owner-footer/send-email-task-owner-footer-outlook-web.json", "sha256": "90d2e323d2a815d251f2c6a20332b020d6017c13c192a29e87287bef598d9d83" }, { "filename": "send-email-task-owner-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/send-email-task-owner-footer/send-email-task-owner-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/send-email-task-owner-footer/send-email-task-owner-footer.json", "sha256": "877312f12f51421f3a3ccb73166d75fe5189b0b637a82dcde7dd1252ed661015" } ] }, { "id": "view-samples/photo-gallery-with-likes", "family": "view", "slug": "photo-gallery-with-likes", "title": "photo-gallery-with-likes", "description": "This sample demonstrates formatting a document library gallery view into a photo gallery showing title and likes.", "longDescription": [ "This sample demonstrates formatting a document library gallery view into a photo gallery showing title and likes." ], "created": "2022-10-21T00:00:00.000Z", "updated": "2022-10-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@thumbnail", "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "appendTo", "removeFrom", "Number", "length" ], "FORMATTING-ACTIONS": [ "setValue", "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "filePreviewProps", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-white", "ms-bgColor-black--hover", "ms-bgColor-neutralLight--hover", "ms-fontColor-black--hover", "sp-card-container", "sp-card-defaultClickButton", "sp-css-borderColor-neutralLight", "sp-card-borderHighlight", "sp-card-subContainer", "sp-card-lastTextColumnContainer", "sp-card-imageContainer" ] }, "authors": [ { "gitHubAccount": "Lou-i3", "pictureUrl": "https://github.com/Lou-i3.png", "name": "Lou-i3", "key": "lou-i3" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/photo-gallery-with-likes", "route": "samples/view/photo-gallery-with-likes/", "preview": "generated/previews/view-photo-gallery-with-likes.webp", "previewAlt": "photo-gallery-with-likes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/photo-gallery-with-likes/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/photo-gallery-with-likes/assets/screenshot-no-title.png", "alt": "screenshot no title" } ], "definitions": [ { "filename": "photo-gallery-no-title.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/photo-gallery-with-likes/photo-gallery-no-title.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/photo-gallery-with-likes/photo-gallery-no-title.json", "sha256": "4fa954c71c256695ddf2b39e20c3be4b6afa5eba8ab0297aca9292293fcecc5a" }, { "filename": "photo-gallery-with-likes.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/photo-gallery-with-likes/photo-gallery-with-likes.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/photo-gallery-with-likes/photo-gallery-with-likes.json", "sha256": "a4e7fad37c024dbca961473bba21b3c95c8f035fb716077b9052bb6cac4a9bcd" } ] }, { "id": "form-samples/teams-chat-task-owner-footer", "family": "form", "slug": "teams-chat-task-owner-footer", "title": "Microsoft Teams chat with Task owner", "description": "This sample demonstrates displaying Microsoft Teams chat link to chat with task owner.", "longDescription": [ "This sample demonstrates displaying Microsoft Teams chat link to chat with task owner." ], "created": "2022-10-15T00:00:00.000Z", "updated": "2022-10-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Microsoft Teams", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralSecondary", "ms-fontColor-themePrimary", "ms-fontSize-xl" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "ganesh-sanap" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/teams-chat-task-owner-footer", "route": "samples/form/teams-chat-task-owner-footer/", "preview": "generated/previews/form-teams-chat-task-owner-footer.webp", "previewAlt": "Microsoft Teams chat with Task owner formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/teams-chat-task-owner-footer/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "teams-chat-task-owner-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/teams-chat-task-owner-footer/teams-chat-task-owner-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/teams-chat-task-owner-footer/teams-chat-task-owner-footer.json", "sha256": "53f068c980d81771c127ee4759f5e6cec8a0e36800b44d2384023aed626a9725" } ] }, { "id": "view-samples/multilingual-quotes", "family": "view", "slug": "multilingual-quotes", "title": "Multilingual Quotes", "description": "This sample demonstrates the use of the @UIlcid token to change the text displayed based on the site display language.", "longDescription": [ "This sample demonstrates the use of the @UIlcid token to change the text displayed based on the site display language." ], "created": "2022-09-19T00:00:00.000Z", "updated": "2022-09-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@UIlcid" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-fontColor-themeDark", "ms-fontColor-neutralSecondary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/multilingual-quotes", "route": "samples/view/multilingual-quotes/", "preview": "generated/previews/view-multilingual-quotes.webp", "previewAlt": "Multilingual Quotes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/multilingual-quotes/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multilingual-quotes.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/multilingual-quotes/multilingual-quotes.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/multilingual-quotes/multilingual-quotes.json", "sha256": "f3def2c8b544abe4ae6f2a7c67f56d1ce91c6cb5493dd8c5967f16045aa76160" } ] }, { "id": "column-samples/number-zero-to-ten-rating", "family": "column", "slug": "number-zero-to-ten-rating", "title": "0 to 10 Rating Scale", "description": "This sample demonstrates the use of the split operator to change the value of a number column to the appearance of a 0 to 10 rating scale.", "longDescription": [ "This sample demonstrates the use of the split operator to change the value of a number column to the appearance of a 0 to 10 rating scale." ], "created": "2022-09-18T00:00:00.000Z", "updated": "2022-09-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "floor", "split" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-font-m-plus", "ms-fontColor-neutralTertiary", "ms-fontColor-white", "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-zero-to-ten-rating", "route": "samples/column/number-zero-to-ten-rating/", "preview": "generated/previews/column-number-zero-to-ten-rating.webp", "previewAlt": "0 to 10 Rating Scale formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-zero-to-ten-rating/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-zero-to-ten-rating.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/forEach must match pattern \"^[^\\]\\$@\\. ]+ in (\\@currentField|\\[\\$.+\\])$\"" ], "download": "generated/definitions/column-samples/number-zero-to-ten-rating/number-zero-to-ten-rating.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-zero-to-ten-rating/number-zero-to-ten-rating.json", "sha256": "401c3b5d9652db213a88ba8f83d39b5d0f7c2d7e0f8c1135d76c4130038bd350" } ] }, { "id": "view-samples/highlight-selected-item-rows", "family": "view", "slug": "highlight-selected-item-rows", "title": "Highlight Selected List Item Rows", "description": "This sample highlights selected list item rows in list view.", "longDescription": [ "This sample highlights selected list item rows in list view." ], "created": "2022-08-24T00:00:00.000Z", "updated": "2022-08-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@isSelected" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "ganesh-sanap" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/highlight-selected-item-rows", "route": "samples/view/highlight-selected-item-rows/", "preview": "generated/previews/view-highlight-selected-item-rows.webp", "previewAlt": "Highlight Selected List Item Rows", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/highlight-selected-item-rows/assets/screenshot.png", "alt": "Highlight Selected List Item Rows" } ], "definitions": [ { "filename": "highlight-selected-item-rows.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/highlight-selected-item-rows/highlight-selected-item-rows.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/highlight-selected-item-rows/highlight-selected-item-rows.json", "sha256": "c2128d26e7899b43748e7c766c1a8800165e2e7bad59c8af2a8ef1bf8a95fc99" } ] }, { "id": "view-samples/travel-requests", "family": "view", "slug": "travel-requests", "title": "Travel Requests", "description": "This sample formats the SharePoint list template Travel requests.", "longDescription": [ "This sample formats the SharePoint list template Travel requests." ], "created": "2022-08-20T00:00:00.000Z", "updated": "2022-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage", "toLocaleDateString", "Number" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "hideColumnHeader", "hideSelection", "rowFormatter", "defaultHoverField" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLight", "ms-bgColor-white", "ms-fontColor-themePrimary", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "miguelverweij", "pictureUrl": "https://github.com/miguelverweij.png", "name": "Miguel Verweij", "key": "miguelverweij" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/travel-requests", "route": "samples/view/travel-requests/", "preview": "generated/previews/view-travel-requests.webp", "previewAlt": "Travel Requests formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/travel-requests/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/travel-requests/assets/listtemplates.png", "alt": "listtemplates" } ], "definitions": [ { "filename": "travel-requests.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/2/children/1/customRowAction/actionInput/Approved must be object", "/rowFormatter/children/2/children/1/customRowAction/actionInput/Approved must be string", "/rowFormatter/children/2/children/1/customRowAction/actionInput/Approved must match a schema in anyOf", "/rowFormatter/children/2/children/1/customRowAction must match a schema in anyOf" ], "download": "generated/definitions/view-samples/travel-requests/travel-requests.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/travel-requests/travel-requests.json", "sha256": "8d6384ccf2c356a3de757e19a9e3d1d822911d199ba4463f8f85a63290b6f2fa" } ] }, { "id": "column-samples/generic-open-file-as-pdf", "family": "column", "slug": "generic-open-file-as-pdf", "title": "Open File as PDF", "description": "This sample can be applied to a column in a Document Library to render a link that will open an Office Document as a pdf.", "longDescription": [ "This sample can be applied to a column in a Document Library to render a link that will open an Office Document as a pdf." ], "created": "2020-10-28T00:00:00.000Z", "updated": "2022-07-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-open-file-as-pdf", "route": "samples/column/generic-open-file-as-pdf/", "preview": "generated/previews/column-generic-open-file-as-pdf.webp", "previewAlt": "Open File as PDF formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-open-file-as-pdf/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-open-file-as-pdf.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-open-file-as-pdf/generic-open-file-as-pdf.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-open-file-as-pdf/generic-open-file-as-pdf.json", "sha256": "16445b48807918d52ba8c5dc14ca3fcec04fa710126f8c775263d15ca4b0c7dd" } ] }, { "id": "column-samples/number-star-rating", "family": "column", "slug": "number-star-rating", "title": "Star Rating", "description": "This sample demonstrates changing the value of a number column to a star rating.", "longDescription": [ "This sample demonstrates changing the value of a number column to a star rating." ], "created": "2022-06-11T00:00:00.000Z", "updated": "2022-06-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralTertiaryAlt", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-star-rating", "route": "samples/column/number-star-rating/", "preview": "generated/previews/column-number-star-rating.webp", "previewAlt": "Star Rating formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-star-rating/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-star-rating/assets/screenshot_heart.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-star-rating-custom-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-star-rating/number-star-rating-custom-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-star-rating/number-star-rating-custom-color.json", "sha256": "4c0a04e8ba9704376dd4e8cec6e243752ca89ca1e20841f8990190bbff825643" }, { "filename": "number-star-rating.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-star-rating/number-star-rating.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-star-rating/number-star-rating.json", "sha256": "788cdaef7ae7587ff65bcecb35a5811df317ab104901a3bff8a3e6320ae17cbc" } ] }, { "id": "column-samples/generic-filepicker", "family": "column", "slug": "generic-filepicker", "title": "File Picker", "description": "This sample demonstrates how to prompt users to copy a file link from a specific library and displays it in the column.", "longDescription": [ "This sample demonstrates how to prompt users to copy a file link from a specific library and displays it in the column." ], "created": "2022-05-27T00:00:00.000Z", "updated": "2022-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-filepicker", "route": "samples/column/generic-filepicker/", "preview": "generated/previews/column-generic-filepicker.webp", "previewAlt": "File Picker formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-filepicker/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-filepicker.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-filepicker/generic-filepicker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-filepicker/generic-filepicker.json", "sha256": "f637714a0f0cd8b8e1ff46afb9b1ad9feb6d2f02fb685d9fd38fc2f7d161a075" } ] }, { "id": "column-samples/location-bing-maps", "family": "column", "slug": "location-bing-maps", "title": "Location Bing Maps", "description": "This sample demonstrates how to use a Location column to display details and a Map from Bing.", "longDescription": [ "This sample demonstrates how to use a Location column to display details and a Map from Bing." ], "created": "2022-05-27T00:00:00.000Z", "updated": "2022-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Location" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-semibold", "ms-fontSize-28", "ms-fontSize-20", "ms-fontSize-18" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/location-bing-maps", "route": "samples/column/location-bing-maps/", "preview": "generated/previews/column-location-bing-maps.webp", "previewAlt": "Location Bing Maps formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/location-bing-maps/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "location-bing-maps.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/location-bing-maps/location-bing-maps.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/location-bing-maps/location-bing-maps.json", "sha256": "2467b1276ec83fa44787c2a558a1a896d522489f5534f251b51638c8426e4e5d" } ] }, { "id": "column-samples/generic-one-point-chart", "family": "column", "slug": "generic-one-point-chart", "title": "One Point Chart", "description": "This sample demonstrates making one point chart with support of 2 numeric fields (x,y) with dialog description.", "longDescription": [ "This sample demonstrates making one point chart with support of 2 numeric fields (x,y) with dialog description." ], "created": "2022-05-27T00:00:00.000Z", "updated": "2022-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-one-point-chart", "route": "samples/column/generic-one-point-chart/", "preview": "generated/previews/column-generic-one-point-chart.webp", "previewAlt": "One Point Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-one-point-chart/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-one-point-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-one-point-chart/generic-one-point-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-one-point-chart/generic-one-point-chart.json", "sha256": "be2da2d7f5bebde4780398fd6824bca88c96056a252aba45cce5f8ffd5e0cb3f" } ] }, { "id": "column-samples/generic-hourglass", "family": "column", "slug": "generic-hourglass", "title": "Display Hourglass", "description": "This sample demonstrates displaying an hourglass.", "longDescription": [ "This sample demonstrates displaying an hourglass. Sand begins to fall when it is time for the `Start` column, and all sand falls when it is time for the `End` column. Also, when you hover the mouse over the sand, the number of days is displayed." ], "created": "2022-05-15T00:00:00.000Z", "updated": "2022-05-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themeDarker", "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover", "ms-fontColor-themeDarker", "ms-fontColor-neutralQuaternaryAlt" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-hourglass", "route": "samples/column/generic-hourglass/", "preview": "generated/previews/column-generic-hourglass.webp", "previewAlt": "Display Hourglass formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-hourglass/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-hourglass.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hourglass/generic-hourglass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hourglass/generic-hourglass.json", "sha256": "2c8ee3581df07a4c3b3dc61f4d97927699d1fb9e0f56d82753233165c706c4f1" } ] }, { "id": "column-samples/number-level-bar", "family": "column", "slug": "number-level-bar", "title": "Number Level Bar", "description": "This sample demonstrates displaying a percentage across a bar. End users are able to edit the values by increasing/decreasing in 25% increments using arrow buttons.", "longDescription": [ "This sample demonstrates displaying a percentage across a bar. End users are able to edit the values by increasing/decreasing in 25% increments using arrow buttons." ], "created": "2022-05-12T00:00:00.000Z", "updated": "2022-05-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-black", "ms-bgColor-yellow", "ms-bgColor-orangeLight", "ms-bgColor-redDark", "ms-bgColor-greenLight", "ms-fontColor-themePrimary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-level-bar", "route": "samples/column/number-level-bar/", "preview": "generated/previews/column-number-level-bar.webp", "previewAlt": "Number Level Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-level-bar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-level-bar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-level-bar/number-level-bar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-level-bar/number-level-bar.json", "sha256": "d8c34194df65349e4622003ce616be1bddde38e6d60d2b42a2be90f31836d60b" } ] }, { "id": "column-samples/number-localization", "family": "column", "slug": "number-localization", "title": "Number Localization", "description": "This sample demonstrates changing text output based on the @lcid token. This allows you to provide localized text within your format ensuring that users in various regions can use your formats without issue.", "longDescription": [ "This sample demonstrates changing text output based on the @lcid token. This allows you to provide localized text within your format ensuring that users in various regions can use your formats without issue." ], "created": "2022-05-12T00:00:00.000Z", "updated": "2022-05-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [ "@lcid" ], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-orange", "ms-fontColor-orangeLight", "ms-fontColor-red", "ms-fontColor-redDark" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-localization", "route": "samples/column/number-localization/", "preview": "generated/previews/column-number-localization.webp", "previewAlt": "Number Localization formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-localization/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-localization.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-localization/number-localization.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-localization/number-localization.json", "sha256": "fd9745fc57ebbdd0bf5a3d22749225b2dddb5317b62a4ab7d50de7d6d46ce4e8" } ] }, { "id": "column-samples/text-course-registration", "family": "column", "slug": "text-course-registration", "title": "Course Registration", "description": "Demonstrates creating a button to register for a course.", "longDescription": [ "Demonstrates creating a button to register for a course. It checks if the course is already full or if the user has already registered for the course and prevents registration when either is true." ], "created": "2021-11-25T00:00:00.000Z", "updated": "2022-05-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Provisioning" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@me", "@now" ], "FORMATTING-OPERATORS": [ "indexOf", "length", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "expiscornovus", "pictureUrl": "https://github.com/expiscornovus.png", "name": "Dennis", "key": "expiscornovus" }, { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-course-registration", "route": "samples/column/text-course-registration/", "preview": "generated/previews/column-text-course-registration.webp", "previewAlt": "Course Registration formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-course-registration/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "text-course-registration.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-course-registration/text-course-registration.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-course-registration/text-course-registration.json", "sha256": "725dc07f3a02aa75172128309487b72971fa065c69e1f2d1a233fe16b23f222d" } ] }, { "id": "column-samples/person-localization", "family": "column", "slug": "person-localization", "title": "Person Localization", "description": "This sample demonstrates changing text output based on the @lcid token. This allows you to provide localized text within your format ensuring that users in various regions can use your formats without issue.", "longDescription": [ "This sample demonstrates changing text output based on the @lcid token. This allows you to provide localized text within your format ensuring that users in various regions can use your formats without issue." ], "created": "2022-04-27T00:00:00.000Z", "updated": "2022-04-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [ "@lcid" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-localization", "route": "samples/column/person-localization/", "preview": "generated/previews/column-person-localization.webp", "previewAlt": "Person Localization formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-localization/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-localization.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-localization/person-localization.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-localization/person-localization.json", "sha256": "db616eec90c831d7a7e92ef88545c8c0c26fb4fd8546408940dd9b240377ddd9" } ] }, { "id": "column-samples/generic-gauge", "family": "column", "slug": "generic-gauge", "title": "Generic Gauge", "description": "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). The values are based on text values (choice or text).", "longDescription": [ "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). The values are based on text values (choice or text)." ], "created": "2022-04-26T00:00:00.000Z", "updated": "2022-04-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "cos", "sin" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-gauge", "route": "samples/column/generic-gauge/", "preview": "generated/previews/column-generic-gauge.webp", "previewAlt": "Generic Gauge formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-gauge/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-gauge.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-gauge/generic-gauge.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-gauge/generic-gauge.json", "sha256": "614ed78d3afc8894fdfb943b6fb5eb6fda5be34b93db9dd1515d1bca2fd4bf52" } ] }, { "id": "view-samples/generic-numeric-card-format", "family": "view", "slug": "generic-numeric-card-format", "title": "Numeric card format", "description": "This sample display formatted number column as playing card.", "longDescription": [ "This sample display formatted number column as playing card." ], "created": "2022-04-22T00:00:00.000Z", "updated": "2022-04-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/generic-numeric-card-format", "route": "samples/view/generic-numeric-card-format/", "preview": "generated/previews/view-generic-numeric-card-format.webp", "previewAlt": "Numeric card format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/generic-numeric-card-format/assets/screenshot.gif", "alt": "Numeric card format" } ], "definitions": [ { "filename": "generic-numeric-card-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/generic-numeric-card-format/generic-numeric-card-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/generic-numeric-card-format/generic-numeric-card-format.json", "sha256": "dc927a3c6871d381d84e4178f4f2930a5455b407f89709ad4e6f634d95780213" } ] }, { "id": "view-samples/percent-chart-format", "family": "view", "slug": "percent-chart-format", "title": "Percent Chart format", "description": "This sample display formatted percent chart row based on icon/emoji/svg and associated result number, used is able to manage to total and used items for percent calculation.", "longDescription": [ "This sample display formatted percent chart row based on icon/emoji/svg and associated result number, used is able to manage to total and used items for percent calculation." ], "created": "2022-04-22T00:00:00.000Z", "updated": "2022-04-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "SVG" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "ceiling" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-neutralTertiary", "ms-fontWeight-bold", "ms-fontSize-68", "ms-fontSize-32", "ms-fontSize-16", "ms-fontSize-14", "ms-fontSize-42" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/percent-chart-format", "route": "samples/view/percent-chart-format/", "preview": "generated/previews/view-percent-chart-format.webp", "previewAlt": "Percent Chart format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/percent-chart-format/assets/screenshot.gif", "alt": "Percent Chart format" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/percent-chart-format/assets/PercentageChart.gif", "alt": "Percent Chart format" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/percent-chart-format/assets/PercentageChart1.gif", "alt": "Percent Chart format" } ], "definitions": [ { "filename": "carsales-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/percent-chart-format/carsales-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/percent-chart-format/carsales-format.json", "sha256": "fba414bbbf7708d75d422c08fef0219aecb96401003f77efc928dd976573412e" }, { "filename": "fishmeat-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/percent-chart-format/fishmeat-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/percent-chart-format/fishmeat-format.json", "sha256": "fe83c9c5a9913d426e5478f2cb2310ee4de3b32bfd79835080e8e60ae84d910b" }, { "filename": "percent-chart-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/percent-chart-format/percent-chart-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/percent-chart-format/percent-chart-format.json", "sha256": "57aba1fa7245e2e9789960f19d0f76b6d7b420e2fb772d46f155356b8bc2729f" } ] }, { "id": "view-samples/content-navigator", "family": "view", "slug": "content-navigator", "title": "Content Navigator", "description": "Demonstrates the use of the id attribute to create linkable anchors.", "longDescription": [ "This sample demonstrates the use of the id attribute to create linkable anchors. The list is intended to have 2 views (Content and Links) using the 2 view formats supplied. Each view can be added to a page as a separate list webpart. No connections are required. Clicking on an item in the links view webpart will navigate to the item in the content view webpart. Additionally, previous and next buttons are included in the content view for internal navigation." ], "created": "2022-04-15T00:00:00.000Z", "updated": "2022-04-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-themePrimary--hover", "ms-fontColor-themeLight", "sp-card-borderHighlight", "sp-card-container", "sp-card-defaultClickButton", "sp-card-subContainer", "sp-card-lastTextColumnContainer", "sp-card-content", "sp-card-highlightedContent" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/content-navigator", "route": "samples/view/content-navigator/", "preview": "generated/previews/view-content-navigator.webp", "previewAlt": "Content Navigator formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/content-navigator/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "content-navigator-links.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/content-navigator/content-navigator-links.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/content-navigator/content-navigator-links.json", "sha256": "eee7416e3fd1f3dca370f8341067430cb5d263f23272cb180303478ed24fe1a3" }, { "filename": "content-navigator.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/content-navigator/content-navigator.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/content-navigator/content-navigator.json", "sha256": "b303b3f006ead3e09f3318f43e8b1410dc9ee88818eefb03a2874cd5faf1ebb4" } ] }, { "id": "column-samples/generic-flow-status", "family": "column", "slug": "generic-flow-status", "title": "Flow Status", "description": "This sample conditionally shows a button to launch a flow. Additional details are provided to customize the flow panel title and button. This provides context to users and is often far more meaningful than the default of 'Run Flow' which generally doesn't mean much to end users.", "longDescription": [ "This sample conditionally shows a button to launch a flow. Additional details are provided to customize the flow panel title and button. This provides context to users and is often far more meaningful than the default of 'Run Flow' which generally doesn't mean much to end users." ], "created": "2022-04-15T00:00:00.000Z", "updated": "2022-04-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Power Automate", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "startsWith" ], "FORMATTING-ACTIONS": [ "executeFlow" ], "FORMATTING-FEATURES": [ "customCardProps" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themePrimary--hover", "ms-bgColor-themeTertiary", "ms-bgColor-themeTertiary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-bgColor-white", "ms-font-xl", "ms-font-l" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-flow-status", "route": "samples/column/generic-flow-status/", "preview": "generated/previews/column-generic-flow-status.webp", "previewAlt": "Flow Status formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-flow-status/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-flow-status/assets/screenshotCustomFlowPanel.png", "alt": "Custom Flow Panel" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-flow-status/assets/screenshotFlowURL.png", "alt": "Flow URL" } ], "definitions": [ { "filename": "generic-flow-status.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-flow-status/generic-flow-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-flow-status/generic-flow-status.json", "sha256": "8f44244855e304dc1e0c8360026b5aa7160a64cd40fa9db41a67abb5e0c32b7a" } ] }, { "id": "view-samples/commandbar-hide-automate", "family": "view", "slug": "commandbar-hide-automate", "title": "Hide Automate Button in the CommandBar", "description": "Hides the Automate button when an item or items are selected.", "longDescription": [ "The Automate button in the CommandBar provides access to Rules as well as associated Power Automate flows for our list/library. However, there are times when we don't want the associated flows to be shown because we are providing flow launch buttons. Maybe we're conditionally picking which flow should run based on properties of an individual item or were customizing the flow run panel and the inclusion of these menu options would undermine that. This sample only hides the Automate button when an item or items are selected. This ensures the Rules option remains available but prevents users from launching flows for a selected item using this menu." ], "created": "2022-04-15T00:00:00.000Z", "updated": "2022-04-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "CommandBar Customization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/commandbar-hide-automate", "route": "samples/view/commandbar-hide-automate/", "preview": "generated/previews/view-commandbar-hide-automate.webp", "previewAlt": "Hide Automate Button in the CommandBar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/commandbar-hide-automate/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/commandbar-hide-automate/assets/screenshotNoSelection.png", "alt": "screenshot no selection" } ], "definitions": [ { "filename": "commandbar-hide-automate.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/commandbar-hide-automate/commandbar-hide-automate.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/commandbar-hide-automate/commandbar-hide-automate.json", "sha256": "c5bf338f9f159d42b79eb808fece9d4e50e0526eecdf669e002accef7e7424d6" } ] }, { "id": "view-samples/random-item", "family": "view", "slug": "random-item", "title": "Random Item", "description": "This sample demonstrates utilizing layering to draw all rows on top of each other and then the z-index is set to a randomized value to determine which row to draw on the very top.", "longDescription": [ "This sample demonstrates utilizing layering to draw all rows on top of each other and then the z-index is set to a randomized value to determine which row to draw on the very top. This can easily be added to a page using the list web part and will act as a miniature application." ], "created": "2022-04-15T00:00:00.000Z", "updated": "2022-04-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Randomization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeDark", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/random-item", "route": "samples/view/random-item/", "preview": "generated/previews/view-random-item.webp", "previewAlt": "Random Item formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/random-item/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/random-item/assets/screenshotOnPage.png", "alt": "screenshot on page" } ], "definitions": [ { "filename": "random-item.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/random-item/random-item.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/random-item/random-item.json", "sha256": "5c258c9fcb935692c2ee63c29c9a2eb5847a40a7a925b62e80aa57e458581d37" } ] }, { "id": "view-samples/chevron-shape-format", "family": "view", "slug": "chevron-shape-format", "title": "Chevron shape format", "description": "This sample how to create chevron style shape with background image. When mouse over image popups and display title and description.", "longDescription": [ "This sample how to create chevron style shape with background image. When mouse over image popups and display title and description." ], "created": "2022-04-14T00:00:00.000Z", "updated": "2022-04-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Board" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-white", "ms-fontWeight-bold", "ms-fontSize-20", "ms-fontSize-18", "ms-fontSize-12" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/chevron-shape-format", "route": "samples/view/chevron-shape-format/", "preview": "generated/previews/view-chevron-shape-format.webp", "previewAlt": "Chevron shape format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/chevron-shape-format/assets/screenshot.gif", "alt": "Chevron shape format" } ], "definitions": [ { "filename": "chevron-shape-format.json", "target": "View formatting", "schemaIssues": [ "/hideColumnHeader must be boolean" ], "download": "generated/definitions/view-samples/chevron-shape-format/chevron-shape-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/chevron-shape-format/chevron-shape-format.json", "sha256": "51125b5470982f12df7927867960707505e360d7a9a175a6507a1bf039d3cf02" } ] }, { "id": "column-samples/number-gradation", "family": "column", "slug": "number-gradation", "title": "Number Gradation", "description": "This sample demonstrates a gradual background color change between the minimum and maximum values.", "longDescription": [ "This sample demonstrates a gradual background color change between the minimum and maximum values." ], "created": "2022-04-08T00:00:00.000Z", "updated": "2022-04-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "abs" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-gradation", "route": "samples/column/number-gradation/", "preview": "generated/previews/column-number-gradation.webp", "previewAlt": "Number Gradation formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-gradation/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-gradation-green-blue.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-gradation/number-gradation-green-blue.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gradation/number-gradation-green-blue.json", "sha256": "c01b227d1a8801f5bbca40ee7edeced4284b98e06b081f455021f979e12c03f5" }, { "filename": "number-gradation-red-blue.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-gradation/number-gradation-red-blue.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gradation/number-gradation-red-blue.json", "sha256": "939e1adf553af984eaae194bf19805d32aaff0c663c7f598887850032584d53c" }, { "filename": "number-gradation.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-gradation/number-gradation.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gradation/number-gradation.json", "sha256": "2f11ea6950af7330a285a585f0620791b89ab3692a3046a89b394547b8dd6590" } ] }, { "id": "view-samples/gauge-aggregate-footer", "family": "view", "slug": "gauge-aggregate-footer", "title": "Gauge Aggregate Footer", "description": "This sample shows a gauge in the list footer (when aggregates are enabled).", "longDescription": [ "This sample shows a gauge in the list footer (when aggregates are enabled)." ], "created": "2022-04-04T00:00:00.000Z", "updated": "2022-04-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@columnAggregate.value" ], "FORMATTING-OPERATORS": [ "toString", "cos", "sin" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "footerFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/gauge-aggregate-footer", "route": "samples/view/gauge-aggregate-footer/", "preview": "generated/previews/view-gauge-aggregate-footer.webp", "previewAlt": "Gauge Aggregate Footer formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/gauge-aggregate-footer/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "gauge-aggregate-footer.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/gauge-aggregate-footer/gauge-aggregate-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/gauge-aggregate-footer/gauge-aggregate-footer.json", "sha256": "c7eb8fa2f3827dce9ce3d67af7e33d20678481483d5a54418cd43e539653bb71" } ] }, { "id": "view-samples/heat-map", "family": "view", "slug": "heat-map", "title": "Heat Map", "description": "This sample demonstrates creating a layered dynamic SVG image in a view format.", "longDescription": [ "This sample demonstrates creating a layered dynamic SVG image in a view format. States are highlighted when they have list items that correspond to them. They get darker the more times a state is mentioned." ], "created": "2022-04-04T00:00:00.000Z", "updated": "2022-04-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-neutralSecondary--hover", "ms-fontColor-neutralTertiary" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/heat-map", "route": "samples/view/heat-map/", "preview": "generated/previews/view-heat-map.webp", "previewAlt": "heat map", "images": [ { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/heat-map/assets/screenshot.png", "alt": "heat map" }, { "type": "image", "order": 105, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/heat-map/assets/screenshotDark.png", "alt": "dark theme heat map" } ], "definitions": [ { "filename": "heat-map.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/heat-map/heat-map.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/heat-map/heat-map.json", "sha256": "f61fa84358d1ed3c44c67bb060194c7bf28373e54781f80eb105eaeda7bdd679" } ] }, { "id": "view-samples/recent-comments", "family": "view", "slug": "recent-comments", "title": "Recent Comments", "description": "This sample shows text from the most recent items by showing them in decresing sizes as they get older.", "longDescription": [ "This sample shows text from the most recent items by showing them in decresing sizes as they get older. This is very helpful for a quick summary view of a list and is great for adding directly to a page." ], "created": "2022-04-04T00:00:00.000Z", "updated": "2022-04-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/recent-comments", "route": "samples/view/recent-comments/", "preview": "generated/previews/view-recent-comments.webp", "previewAlt": "comments", "images": [ { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/recent-comments/assets/screenshot.png", "alt": "comments" } ], "definitions": [ { "filename": "recent-comments.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/recent-comments/recent-comments.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/recent-comments/recent-comments.json", "sha256": "310919ffaabcb6eedbb13d3db861c3cd9730fa1ee7f937fa9a702b77abb96cd4" } ] }, { "id": "column-samples/generic-update-button", "family": "column", "slug": "generic-update-button", "title": "Field Value Update Button", "description": "This sample demonstrates displaying a button to update the fields values of an item.", "longDescription": [ "This sample demonstrates displaying a button to update the fields values of an item." ], "created": "2022-04-02T00:00:00.000Z", "updated": "2022-04-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@me", "@now" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-red--hover", "ms-bgColor-teal--hover", "ms-fontColor-white--hover", "ms-fontColor-red", "ms-fontColor-teal", "ms-fontWeight-bold", "ms-fontSize-12", "ms-bgColor-themePrimary", "ms-bgColor-themeDark--hover", "ms-fontColor-white", "ms-bgColor-red", "ms-bgColor-redDark--hover", "ms-bgColor-tealLight", "ms-fontColor-white", "ms-fontSize-16", "ms-bgColor-themePrimary--hover", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-update-button", "route": "samples/column/generic-update-button/", "preview": "generated/previews/column-generic-update-button.webp", "previewAlt": "Field Value Update Button formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-update-button/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-update-button/assets/screenshot_theme-color.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-update-button/assets/screenshot_OK-NG.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-update-button-OK-NG-border-text.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-OK-NG-border-text.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-OK-NG-border-text.json", "sha256": "fe214fab8fb6eec07bcff5a13cac0b135b6e42f563e757b7b3e43f45b0c08e2a" }, { "filename": "generic-update-button-OK-NG-filled-icon-text.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-OK-NG-filled-icon-text.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-OK-NG-filled-icon-text.json", "sha256": "3a44a01fc2b2dea04cf9ac028398b752a6eac7e7e2e3e0e58065bf0092fefac4" }, { "filename": "generic-update-button-OK-NG-filled-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-OK-NG-filled-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-OK-NG-filled-icon.json", "sha256": "9fc628449df80d070dc389dbb102f2a0ab55c758a58d0a82fd4058b601a87ce1" }, { "filename": "generic-update-button-OK-NG-filled-text.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-OK-NG-filled-text.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-OK-NG-filled-text.json", "sha256": "881c0271d403e3fea185a4d25d2c01f25531f1a8ce0185aed073f0da00784082" }, { "filename": "generic-update-button-theme-color-filled-icon-text.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-theme-color-filled-icon-text.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-theme-color-filled-icon-text.json", "sha256": "757abb5af1c7e66079a07d7639a1c0f1b180110446729093885e46811a79787f" }, { "filename": "generic-update-button-theme-color-filled-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-theme-color-filled-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-theme-color-filled-icon.json", "sha256": "d4f0df3eba3b229d794c045090268f80beede1ea33f23208bc4ecbf40508b17c" }, { "filename": "generic-update-button-theme-color-filled-text.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button-theme-color-filled-text.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button-theme-color-filled-text.json", "sha256": "3a44a01fc2b2dea04cf9ac028398b752a6eac7e7e2e3e0e58065bf0092fefac4" }, { "filename": "generic-update-button.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-update-button/generic-update-button.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-update-button/generic-update-button.json", "sha256": "d4667583d61890bb162c550514c6aca93497eba4f2bca5945fb136966c81b4dd" } ] }, { "id": "column-samples/generic-like-dislike-bar", "family": "column", "slug": "generic-like-dislike-bar", "title": "Like/Dislike Bar", "description": "This sample demonstrates displaying a Like/Dislike bar that visualizes the ratio of Like to Dislike users.", "longDescription": [ "This sample demonstrates displaying a Like/Dislike bar that visualizes the ratio of Like to Dislike users." ], "created": "2022-03-20T00:00:00.000Z", "updated": "2022-03-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-red", "ms-bgColor-redDark--hover", "ms-bgColor-teal--hover", "ms-bgColor-tealLight", "ms-bgColor-sharedGray10", "ms-fontColor-red", "ms-fontColor-tealLight" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-like-dislike-bar", "route": "samples/column/generic-like-dislike-bar/", "preview": "generated/previews/column-generic-like-dislike-bar.webp", "previewAlt": "Like/Dislike Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-like-dislike-bar/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-like-dislike-bar/assets/screenshot_button.gif", "alt": "screen_capture" } ], "definitions": [ { "filename": "generic-like-dislike-bar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-like-dislike-bar/generic-like-dislike-bar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-like-dislike-bar/generic-like-dislike-bar.json", "sha256": "0a61691931f8eb74110e2f21a5a198f5a83bd122d7dfeca4e1529d15ce8d360e" } ] }, { "id": "view-samples/timeline-board", "family": "view", "slug": "timeline-board", "title": "Timeline in Board View", "description": "This sample demonstrates displaying timelines in Board View.", "longDescription": [ "This sample demonstrates displaying timelines in Board View." ], "created": "2022-03-05T00:00:00.000Z", "updated": "2022-03-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Board" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection" ], "CLASSES": [ "ms-bgColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/timeline-board", "route": "samples/view/timeline-board/", "preview": "generated/previews/view-timeline-board.webp", "previewAlt": "Timeline in Board View", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/timeline-board/assets/screenshot.png", "alt": "Timeline in Board View" } ], "definitions": [ { "filename": "timeline-board.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/timeline-board/timeline-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline-board/timeline-board.json", "sha256": "57964a3d419f628fa328b19c959dfaa4b1d438f3ff357dee1258b9b27e5bf264" } ] }, { "id": "column-samples/number-decimal-binary", "family": "column", "slug": "number-decimal-binary", "title": "Decimal to Binary Conversion", "description": "This sample provides decimal conversion to binary using standard List formatting math functions.", "longDescription": [ "This sample provides decimal conversion to binary using standard List formatting math functions." ], "created": "2022-03-04T00:00:00.000Z", "updated": "2022-03-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-fontColor-themePrimary", "ms-fontWeight-bold", "ms-fontSize-18", "sp-field-borderAllSolid" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-decimal-binary", "route": "samples/column/number-decimal-binary/", "preview": "generated/previews/column-number-decimal-binary.webp", "previewAlt": "Decimal to Binary Conversion formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-decimal-binary/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "number-decimal-binary.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-decimal-binary/number-decimal-binary.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-decimal-binary/number-decimal-binary.json", "sha256": "60a4f763844897244a0c99c6accc19ebda6e6c543287304000af81686b1a32fe" } ] }, { "id": "view-samples/to-do", "family": "view", "slug": "to-do", "title": "To-Do List", "description": "This sample formats your SharePoint list view to look like Microsoft To Do.", "longDescription": [ "This sample formats your SharePoint list view to look like Microsoft To Do." ], "created": "2022-03-04T00:00:00.000Z", "updated": "2022-03-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now", "@group.count" ], "FORMATTING-OPERATORS": [ "toLocaleString", "toLocaleDateString", "getUserImage" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "delete" ], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "beakStyle", "directionalHint", "hideSelection", "rowFormatter", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralLight--hover", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "joaoferreira", "pictureUrl": "https://github.com/joaoferreira.png", "name": "João Ferreira", "key": "joaoferreira" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/to-do", "route": "samples/view/to-do/", "preview": "generated/previews/view-to-do.webp", "previewAlt": "Timeline in Board View", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/to-do/assets/screenshot.png", "alt": "Timeline in Board View" } ], "definitions": [ { "filename": "to-do.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/to-do/to-do.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/to-do/to-do.json", "sha256": "2b64b50dbf236e6e5fe9b041ba64b76c898c84f65e18de566e23cb8e377caf4d" } ] }, { "id": "column-samples/generic-calculator", "family": "column", "slug": "generic-calculator", "title": "Calculator", "description": "This sample includes design capabilities and formulas to simulate a simple calculator.", "longDescription": [ "This sample includes design capabilities and formulas to simulate a simple calculator." ], "created": "2022-03-01T00:00:00.000Z", "updated": "2022-03-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "Number", "indexOf", "length", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLight--hover", "ms-bgColor-themeLighter", "ms-bgColor-sharedOrange20--hover", "ms-bgColor-sharedOrange10", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-semibold", "ms-fontSize-16", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-calculator", "route": "samples/column/generic-calculator/", "preview": "generated/previews/column-generic-calculator.webp", "previewAlt": "Calculator formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-calculator/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-calculator.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-calculator/generic-calculator.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-calculator/generic-calculator.json", "sha256": "425ec289797f221e57db0396639530dc5384ff3758bef6a71e6a633475d4abb4" } ] }, { "id": "column-samples/number-volume", "family": "column", "slug": "number-volume", "title": "Volume option", "description": "This sample includes visual selection of volume from 0 to 5.", "longDescription": [ "This sample includes visual selection of volume from 0 to 5." ], "created": "2022-03-01T00:00:00.000Z", "updated": "2022-03-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontWeight-bold", "ms-fontSize-12" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-volume", "route": "samples/column/number-volume/", "preview": "generated/previews/column-number-volume.webp", "previewAlt": "Volume option formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-volume/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "number-volume.json", "target": "Column formatting", "schemaIssues": [ "/children/0/children/0/children/0/style/bottom must be object", "/children/0/children/0/children/0/style/bottom must be string", "/children/0/children/0/children/0/style/bottom must match a schema in anyOf" ], "download": "generated/definitions/column-samples/number-volume/number-volume.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-volume/number-volume.json", "sha256": "d9e3bedf790513749df5e0b544548c9007612fb49c9953d6bc2476187c176865" } ] }, { "id": "view-samples/tabs", "family": "view", "slug": "tabs", "title": "Tabs", "description": "This sample creates tabs with associated content. Users can then navigate between tabs. This sample is intended to display content within a SharePoint page (using the lists webpart) to provide a more interactive and user friendly approach.", "longDescription": [ "This sample creates tabs with associated content. Users can then navigate between tabs. This sample is intended to display content within a SharePoint page (using the lists webpart) to provide a more interactive and user friendly approach." ], "created": "2022-02-17T00:00:00.000Z", "updated": "2022-02-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontWeight-bold", "ms-fontSize-24", "ms-fontSize-18" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/tabs", "route": "samples/view/tabs/", "preview": "generated/previews/view-tabs.webp", "previewAlt": "Tabs formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/tabs/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "tabs.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/tabs/tabs.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/tabs/tabs.json", "sha256": "1ea787009249c30689993517b2650d5ae1060699d2cd8a44454990c01ac38ffd" } ] }, { "id": "view-samples/reorder-expand-board-items", "family": "view", "slug": "reorder-expand-board-items", "title": "Reorder and Expand Board Items", "description": "This sample allow users to manage card order in Board Views and also enables expanding and collapsing images. This sample has the option 'Move to Top' that allows users to move cards to the top of the board view as a way to rearrange card positions.", "longDescription": [ "This sample allow users to manage card order in Board Views and also enables expanding and collapsing images. This sample has the option 'Move to Top' that allows users to move cards to the top of the board view as a way to rearrange card positions." ], "created": "2022-02-15T00:00:00.000Z", "updated": "2022-02-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "columnFormatterReference", "hideSelection" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "sp-card-borderHighlight", "sp-card-container", "sp-card-subContainer", "sp-card-displayColumnContainer", "sp-card-label", "sp-card-content", "sp-card-boldText", "sp-card-highlightedContent", "sp-card-formatterRef", "sp-card-container-noPadding", "sp-card-subContainer-borderRadius" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/reorder-expand-board-items", "route": "samples/view/reorder-expand-board-items/", "preview": "generated/previews/view-reorder-expand-board-items.webp", "previewAlt": "Reorder and Expand Board Items formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/reorder-expand-board-items/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "reorder-expand-board-items.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/reorder-expand-board-items/reorder-expand-board-items.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/reorder-expand-board-items/reorder-expand-board-items.json", "sha256": "d71524a18b3c4c28d6062777fcb000c985982115f0a930c8f078f8bb481ab90e" } ] }, { "id": "column-samples/number-heart-in-heart", "family": "column", "slug": "number-heart-in-heart", "title": "Heart in Heart", "description": "This sample demonstrates how to change the size of a heart by using the percent value of a numeric column.", "longDescription": [ "This sample demonstrates how to change the size of a heart by using the percent value of a numeric column." ], "created": "2022-02-13T00:00:00.000Z", "updated": "2022-02-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-heart-in-heart", "route": "samples/column/number-heart-in-heart/", "preview": "generated/previews/column-number-heart-in-heart.webp", "previewAlt": "Heart in Heart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-heart-in-heart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-heart-in-heart-custom-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-heart-in-heart/number-heart-in-heart-custom-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-heart-in-heart/number-heart-in-heart-custom-color.json", "sha256": "3b5f893b17ed1fcbef8f3833fbaaf8f84751caf1ca74b928ba2f346e1e204834" }, { "filename": "number-heart-in-heart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-heart-in-heart/number-heart-in-heart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-heart-in-heart/number-heart-in-heart.json", "sha256": "f84018c92ee17175efe7d913b43b064b769eee3e733894341aafa962c96ebc4e" } ] }, { "id": "column-samples/number-heart-shading", "family": "column", "slug": "number-heart-shading", "title": "Heart Shading", "description": "This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.", "longDescription": [ "This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG." ], "created": "2022-02-13T00:00:00.000Z", "updated": "2022-02-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-heart-shading", "route": "samples/column/number-heart-shading/", "preview": "generated/previews/column-number-heart-shading.webp", "previewAlt": "Heart Shading formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-heart-shading/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-heart-shading-custom-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-heart-shading/number-heart-shading-custom-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-heart-shading/number-heart-shading-custom-color.json", "sha256": "393981aaac0cc89e17f284c0b0bae0325dbb127ef5bdde35041639476006862c" }, { "filename": "number-heart-shading-rainbow-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-heart-shading/number-heart-shading-rainbow-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-heart-shading/number-heart-shading-rainbow-color.json", "sha256": "7eef5d6512f092bc0c4e466538e16ec0c83b48e21db05fec9bb3c287bd1fee47" }, { "filename": "number-heart-shading.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-heart-shading/number-heart-shading.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-heart-shading/number-heart-shading.json", "sha256": "696930612b75af9228775a827341f3be1a799390dad6993df6e3c8308b43860a" } ] }, { "id": "form-samples/ribbon-header", "family": "form", "slug": "ribbon-header", "title": "Ribbon Header", "description": "This sample demonstrates displaying a ribbon in the header.", "longDescription": [ "This sample demonstrates displaying a ribbon in the header." ], "created": "2022-02-08T00:00:00.000Z", "updated": "2022-02-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-themeSecondary", "ms-fontColor-themeDark", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/ribbon-header", "route": "samples/form/ribbon-header/", "preview": "generated/previews/form-ribbon-header.webp", "previewAlt": "Ribbon Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/ribbon-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "ribbon-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/ribbon-header/ribbon-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/ribbon-header/ribbon-header.json", "sha256": "4eb1316a604354b89e3ab3809e2935a9aad2eec2b0ee02713866a9ef9590765c" } ] }, { "id": "view-samples/sticky-notes-board", "family": "view", "slug": "sticky-notes-board", "title": "Sticky Notes Board", "description": "This sample demonstrates how to display sticky notes in a Board View.", "longDescription": [ "This sample demonstrates how to display sticky notes in a Board View." ], "created": "2022-02-08T00:00:00.000Z", "updated": "2022-02-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Board" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "directionalHint", "hideSelection" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary--hover", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralSecondaryAlt", "ms-fontColor-neutralQuaternary", "sp-css-backgroundColor-BgCoral30", "sp-css-backgroundColor-BgGold60", "sp-css-backgroundColor-BgMintGreen30", "sp-css-backgroundColor-BgLightPurple30" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/sticky-notes-board", "route": "samples/view/sticky-notes-board/", "preview": "generated/previews/view-sticky-notes-board.webp", "previewAlt": "screeshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/sticky-notes-board/assets/screenshot.gif", "alt": "screeshot" } ], "definitions": [ { "filename": "sticky-notes-board.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/sticky-notes-board/sticky-notes-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/sticky-notes-board/sticky-notes-board.json", "sha256": "2934f4de8bf97625aabffe85395771d54e0e950f2892dd8b1d9bcf67ed12782f" } ] }, { "id": "view-samples/praise-cards", "family": "view", "slug": "praise-cards", "title": "Praise Cards", "description": "This sample demonstrates how to display Praise Cards. By creating a Praise Card, you can express your appreciation and admiration to others for their daily cooperation and actions!", "longDescription": [ "This sample demonstrates how to display Praise Cards. By creating a Praise Card, you can express your appreciation and admiration to others for their daily cooperation and actions!" ], "created": "2022-01-23T00:00:00.000Z", "updated": "2022-01-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "length", "getUserImage", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLighter--hover", "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiaryAlt", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/praise-cards", "route": "samples/view/praise-cards/", "preview": "generated/previews/view-praise-cards.webp", "previewAlt": "Praise Card", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/praise-cards/assets/screenshot.png", "alt": "Praise Card" } ], "definitions": [ { "filename": "praise-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/praise-cards/praise-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/praise-cards/praise-cards.json", "sha256": "17f9c6b003814f9d1d0b42f496e0cc3ffbcfb7144d9a8897f1abc0f3c3549f7d" } ] }, { "id": "view-samples/roll-dice", "family": "view", "slug": "roll-dice", "title": "Roll Dice", "description": "This sample format provides a simulation of a game where a random number (between 1 and 6) is generated and displayed as a die. The value makes the progress bar advance with the associated emoji until the value 0 is reached and the winner emoji appears.", "longDescription": [ "This sample format provides a simulation of a game where a random number (between 1 and 6) is generated and displayed as a die. The value makes the progress bar advance with the associated emoji until the value 0 is reached and the winner emoji appears." ], "created": "2022-01-21T00:00:00.000Z", "updated": "2022-01-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number", "length" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-red", "ms-fontColor-white", "ms-fontColor-red", "ms-fontWeight-semibold", "ms-fontSize-32", "ms-fontSize-20", "ms-fontSize-10", "sp-css-backgroundColor-red" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/roll-dice", "route": "samples/view/roll-dice/", "preview": "generated/previews/view-roll-dice.webp", "previewAlt": "Roll Dice formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/roll-dice/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "roll-dice.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/roll-dice/roll-dice.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/roll-dice/roll-dice.json", "sha256": "6dae541e702aa384de1bcf45f173cdbe5b35ded0e37d7f954329df83e66c276a" } ] }, { "id": "view-samples/color-picker", "family": "view", "slug": "color-picker", "title": "Color Picker", "description": "This sample contains pre-defined palettes of color (default matches Power Apps). These palettes are then made available as a color picker setting the value on selection.", "longDescription": [ "This sample contains pre-defined palettes of color (default matches Power Apps). These palettes are then made available as a color picker setting the value on selection." ], "created": "2022-01-17T00:00:00.000Z", "updated": "2022-01-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Power Apps", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLowerCase", "indexOf", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-gray30--hover", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/color-picker", "route": "samples/view/color-picker/", "preview": "generated/previews/view-color-picker.webp", "previewAlt": "Color Picker formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/color-picker/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "color-picker-12sections-palette.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/color-picker/color-picker-12sections-palette.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/color-picker/color-picker-12sections-palette.json", "sha256": "9b692b5bf1cd9f15cf9d6aeeb10f64ce4056122ff658505f4cf763f2f1aae18f" }, { "filename": "color-picker-basic-palette.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/color-picker/color-picker-basic-palette.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/color-picker/color-picker-basic-palette.json", "sha256": "10222132905a86ec41914ef82b843dafc74058d50d6c1e3aebc068f3187896aa" }, { "filename": "color-picker.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/color-picker/color-picker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/color-picker/color-picker.json", "sha256": "e265eccdd7d0411f66ed356fce4de65127235a80870541b7a1d7d47f4763cf8b" } ] }, { "id": "column-samples/number-emoji-progressbar", "family": "column", "slug": "number-emoji-progressbar", "title": "Progress bar using text or emoji", "description": "This sample demonstrates the use of text symbols and emoji to display a progress bar.", "longDescription": [ "This sample demonstrates the use of text symbols and emoji to display a progress bar." ], "created": "2022-01-16T00:00:00.000Z", "updated": "2022-01-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "padStart" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-emoji-progressbar", "route": "samples/column/number-emoji-progressbar/", "preview": "generated/previews/column-number-emoji-progressbar.webp", "previewAlt": "Progress bar using text or emoji formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-emoji-progressbar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-emoji-progressbar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-emoji-progressbar/number-emoji-progressbar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-emoji-progressbar/number-emoji-progressbar.json", "sha256": "281db924b5930847a7e33c294109dc4a7808fa9710439e6383d8fb95895971ec" }, { "filename": "number-text-progressbar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-emoji-progressbar/number-text-progressbar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-emoji-progressbar/number-text-progressbar.json", "sha256": "992f43a516dfb70adee87840751fe00bb6d6c4ee68f5d7ac9b76cafecdf0049f" } ] }, { "id": "view-samples/bar-option-picker", "family": "view", "slug": "bar-option-picker", "title": "Bar Option Picker", "description": "This sample displays a bar with multiple options. When an option on the bar is clicked, the Value column is updated to the corresponding value (0-4) using setValue.", "longDescription": [ "This sample displays a bar with multiple options. When an option on the bar is clicked, the Value column is updated to the corresponding value (0-4) using setValue." ], "created": "2022-01-15T00:00:00.000Z", "updated": "2022-01-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "length" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontSize-42", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-option-picker", "route": "samples/view/bar-option-picker/", "preview": "generated/previews/view-bar-option-picker.webp", "previewAlt": "Bar Option Picker formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bar-option-picker/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "bar-option-picker.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/bar-option-picker/bar-option-picker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bar-option-picker/bar-option-picker.json", "sha256": "559452c85ed141e2dca97683c572abccdd8e40dc6ccf887099ceae66b4982468" } ] }, { "id": "view-samples/wordle", "family": "view", "slug": "wordle", "title": "Wordle", "description": "This sample reproduces the popular word puzzle game Wordle with Microsoft Lists.", "longDescription": [ "This sample reproduces the popular word puzzle game Wordle with Microsoft Lists." ], "created": "2022-01-15T00:00:00.000Z", "updated": "2022-01-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "substring", "toUpperCase" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "directionalHint", "hideSelection" ], "CLASSES": [ "ms-bgColor-neutralSecondaryAlt", "ms-bgColor-white", "ms-bgColor-sharedOrangeYellow10", "ms-bgColor-sharedGreenCyan10", "ms-fontColor-neutralSecondaryAlt", "ms-fontColor-neutralTertiaryAlt", "ms-fontColor-white", "ms-fontColor-sharedOrangeYellow10", "ms-fontColor-sharedGreenCyan10" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/wordle", "route": "samples/view/wordle/", "preview": "generated/previews/view-wordle.webp", "previewAlt": "Microsoft Lists Wordle Game", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/wordle/assets/screenshot.gif", "alt": "Microsoft Lists Wordle Game" } ], "definitions": [ { "filename": "wordle.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/wordle/wordle.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/wordle/wordle.json", "sha256": "05aba4e75a2ae76ec861d137dcead79e5168b169b6e875beee813a8e34ecc4cf" } ] }, { "id": "view-samples/event-registration", "family": "view", "slug": "event-registration", "title": "Event Registration", "description": "This sample provides Event registration with different capabilities such us Start and End dates, Category, Attendees, All Day option, Location, Team URL, and favoriting.", "longDescription": [ "This sample provides Event registration with different capabilities such us Start and End dates, Category, Attendees, All Day option, Location, Team URL, and favoriting." ], "created": "2022-01-12T00:00:00.000Z", "updated": "2022-01-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLocaleDateString", "toLocaleTimeString", "length", "replace", "getUserImage" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "delete" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-orangeLighter", "ms-bgColor-red", "ms-bgColor-purple", "ms-bgColor-blue", "ms-bgColor-green", "ms-bgColor-greenLight", "ms-bgColor-info--hover", "ms-bgColor-sharedYellow10", "ms-fontColor-white", "ms-fontColor-black", "ms-fontColor-blue", "ms-fontColor-gray100", "ms-fontWeight-semibold", "ms-fontSize-24", "ms-fontSize-20", "ms-fontSize-18", "ms-fontSize-16", "ms-fontSize-14", "ms-fontSize-12" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/event-registration", "route": "samples/view/event-registration/", "preview": "generated/previews/view-event-registration.webp", "previewAlt": "Event Registration formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/event-registration/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "event-registration.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/event-registration/event-registration.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/event-registration/event-registration.json", "sha256": "5335143a3870960082490290d9b1b7135d732783a68bf2cf01a9f8195a7d1454" } ] }, { "id": "column-samples/text-expand-collapse-format", "family": "column", "slug": "text-expand-collapse-format", "title": "Expand Collapse Format", "description": "Demonstrates creating a button to register for a course.", "longDescription": [ "Demonstrates creating a button to register for a course. It checks if the course is already full or if the user has already registered for the course and prevents registration when either is true." ], "created": "2022-01-10T00:00:00.000Z", "updated": "2022-01-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontSize-18", "ms-fontColor-black", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-expand-collapse-format", "route": "samples/column/text-expand-collapse-format/", "preview": "generated/previews/column-text-expand-collapse-format.webp", "previewAlt": "Expand Collapse Format formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-expand-collapse-format/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "text-expand-collapse-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-expand-collapse-format/text-expand-collapse-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-expand-collapse-format/text-expand-collapse-format.json", "sha256": "d38871a4e481070fa5e4eba0ecb07c5a3dd70cd8005b383667ce73e0f2fa825b" } ] }, { "id": "view-samples/payments", "family": "view", "slug": "payments", "title": "Payments", "description": "This sample provides a payment list format to register daily expenses, currency, status, rate option, comments and categorization of payment. Solution has 3 formats Desktop, Mobile and Group by Category.", "longDescription": [ "This sample provides a payment list format to register daily expenses, currency, status, rate option, comments and categorization of payment. Solution has 3 formats Desktop, Mobile and Group by Category." ], "created": "2022-01-10T00:00:00.000Z", "updated": "2022-01-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count", "@group.columnDisplayName", "@rowIndex" ], "FORMATTING-OPERATORS": [ "Number", "Date", "toLocaleDateString", "indexOf", "length", "substring", "getDate", "getMonth", "getYear", "toUpperCase" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "delete" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter", "groupProps", "headerFormatter", "hideFooter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-orangeLighter", "ms-bgColor-red", "ms-bgColor-purple", "ms-bgColor-blue", "ms-bgColor-green", "ms-bgColor-gray10--hover", "ms-bgColor-sharedYellow10", "ms-fontColor-white", "ms-fontColor-black", "ms-fontColor-red", "ms-fontColor-gray100", "ms-fontColor-gray90", "ms-fontWeight-semibold", "ms-fontWeight-bold", "ms-fontSize-32", "ms-fontSize-24", "ms-fontSize-20", "ms-fontSize-18", "ms-fontSize-16", "ms-fontSize-14", "ms-fontSize-12", "ms-bgColor-info--hover", "ms-fontColor-themePrimary", "ms-fontSize-28", "sp-css-backgroundColor-neutralLighterAlt", "ms-fontColor-themeTertiary--hover", "ms-fontSize-68", "ms-fontSize-42", "ms-fontSize-10", "sp-css-backgroundColor-neutralLighterAlt", "ms-bgColor-severeWarning", "ms-fontColor-neutralQuaternary" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/payments", "route": "samples/view/payments/", "preview": "generated/previews/view-payments.webp", "previewAlt": "Payments formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/payments/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "payments-grouped.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/payments/payments-grouped.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/payments/payments-grouped.json", "sha256": "03e28e61528afcd8c56c6ccd5fd671c13cf9ed8d63611a81a3de8ba6c0c57f3e" }, { "filename": "payments-mobile.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/payments/payments-mobile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/payments/payments-mobile.json", "sha256": "cdd4ab8311e74f829fd12edda30c11a49856e87add4f8c003e6401625f9a8a7f" }, { "filename": "payments-timeline-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/payments/payments-timeline-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/payments/payments-timeline-format.json", "sha256": "4a3e865bef7f932ad660d4d977d968fb17b692c29ce3be6b7e1fad102d993d77" }, { "filename": "payments.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/payments/payments.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/payments/payments.json", "sha256": "ddef758d9656206f438d602c9d24152966d183d7b03559e4cd8c26c8ec37665a" } ] }, { "id": "view-samples/multi-person-displays", "family": "view", "slug": "multi-person-displays", "title": "Multi-Person Displays", "description": "This sample provides multiple formats illustrating different ways multi-person field display and inline editing can occur. The field is rendered multiple times to show different options.", "longDescription": [ "This sample provides multiple formats illustrating different ways multi-person field display and inline editing can occur. The field is rendered multiple times to show different options." ], "created": "2021-12-31T00:00:00.000Z", "updated": "2021-12-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "loopIndex", "indexOf", "substring", "toUpperCase", "lastIndexOf", "getUserImage", "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "defaultHoverField", "customCardProps", "hideSelection", "hideColumnHeader", "rowFormatter", "hideFooter" ], "CLASSES": [ "ms-bgColor-neutralTertiaryAlt", "ms-bgColor-white", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontColor-black", "ms-fontColor-gray120", "ms-fontWeight-semibold", "ms-fontSize-32", "ms-fontSize-20", "ms-fontSize-16", "ms-fontSize-10" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/multi-person-displays", "route": "samples/view/multi-person-displays/", "preview": "generated/previews/view-multi-person-displays.webp", "previewAlt": "Multi-Person Displays formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/multi-person-displays/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-displays.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/multi-person-displays/multi-person-displays.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/multi-person-displays/multi-person-displays.json", "sha256": "c3e5b34686d3dbacfae1a1be4f47f2b9e4cd5507810deb95e71ec059996c2281" } ] }, { "id": "view-samples/teams-group-chat-links", "family": "view", "slug": "teams-group-chat-links", "title": "Teams Group Chat Links", "description": "This sample uses Microsoft Teams deep links to create Teams chat group based on selected users with associated Group name and message.", "longDescription": [ "This sample uses Microsoft Teams deep links to create Teams chat group based on selected users with associated Group name and message." ], "created": "2021-12-31T00:00:00.000Z", "updated": "2021-12-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Microsoft Teams" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "loopIndex", "length", "replace", "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "defaultHoverField", "customCardProps", "hideSelection", "hideColumnHeader", "rowFormatter", "hideFooter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeTertiary", "ms-bgColor-themeTertiary--hover", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-semibold", "ms-fontSize-32", "ms-fontSize-24", "ms-fontSize-20", "ms-fontSize-16", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/teams-group-chat-links", "route": "samples/view/teams-group-chat-links/", "preview": "generated/previews/view-teams-group-chat-links.webp", "previewAlt": "Teams Group Chat Links formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/teams-group-chat-links/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "teams-group-chat-links.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/teams-group-chat-links/teams-group-chat-links.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/teams-group-chat-links/teams-group-chat-links.json", "sha256": "d693303b0f4714728d6ee0e199c33e7bdbd1413e417b8392ae926a03145435e0" } ] }, { "id": "view-samples/advent-calendar", "family": "view", "slug": "advent-calendar", "title": "Advent Calendar", "description": "This sample demonstrates an advent calendar where you can click on the present box of the day to see the presents.", "longDescription": [ "This sample demonstrates an advent calendar where you can click on the present box of the day to see the presents." ], "created": "2021-12-19T00:00:00.000Z", "updated": "2021-12-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Inline Editing", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "getDate" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [ "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/advent-calendar", "route": "samples/view/advent-calendar/", "preview": "generated/previews/view-advent-calendar.webp", "previewAlt": "Advent Calendar Tile Format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/advent-calendar/assets/screenshot.gif", "alt": "Advent Calendar Tile Format" } ], "definitions": [ { "filename": "advent-calendar.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/advent-calendar/advent-calendar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/advent-calendar/advent-calendar.json", "sha256": "5b2d8b3a6a6cd814e74b12c7f448fa6ecf4cfb6f6ce343fe9f4710d77585d453" } ] }, { "id": "column-samples/person-teams-call-format", "family": "column", "slug": "person-teams-call-format", "title": "Teams Call Format", "description": "This sample uses Microsoft Teams deep links to create links from selected user that allow to make Microsoft Teams calls to user.", "longDescription": [ "This sample uses Microsoft Teams deep links to create links from selected user that allow to make Microsoft Teams calls to user." ], "created": "2021-12-16T00:00:00.000Z", "updated": "2021-12-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Microsoft Teams" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontSize-20", "ms-fontSize-10", "sp-field-quickAction" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-teams-call-format", "route": "samples/column/person-teams-call-format/", "preview": "generated/previews/column-person-teams-call-format.webp", "previewAlt": "teams call format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-teams-call-format/assets/screenshot.png", "alt": "teams call format" } ], "definitions": [ { "filename": "person-teams-call-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-teams-call-format/person-teams-call-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-teams-call-format/person-teams-call-format.json", "sha256": "c630be8c90cec8526278fc76ad24c06a046a9d79f2085e6f6eaa994df92d9f1a" } ] }, { "id": "view-samples/tic-tac-toe", "family": "view", "slug": "tic-tac-toe", "title": "Tic-tac-toe", "description": "This sample demonstrates a version of tic-tac-toe using list formatting. By using the setValue action, the underlying list items are updated and the format is redrawn.", "longDescription": [ "This sample demonstrates a version of tic-tac-toe using list formatting. By using the setValue action, the underlying list items are updated and the format is redrawn." ], "created": "2021-12-16T00:00:00.000Z", "updated": "2021-12-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "length", "appendTo" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLight--hover", "ms-bgColor-sharedRedOrange10", "ms-bgColor-sharedYellow10", "ms-fontColor-themePrimary", "ms-fontColor-themeLight--hover", "ms-fontColor-sharedRedOrange10", "ms-fontColor-sharedYellow10", "ms-fontWeight-semibold", "ms-fontSize-16" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/tic-tac-toe", "route": "samples/view/tic-tac-toe/", "preview": "generated/previews/view-tic-tac-toe.webp", "previewAlt": "Tic-tac-toe formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/tic-tac-toe/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "tic-tac-toe-arrows.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/tic-tac-toe/tic-tac-toe-arrows.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/tic-tac-toe/tic-tac-toe-arrows.json", "sha256": "ce14c55d241b6a38c32cb39af9ef5b7c371a4ad92a52cab727afedebe11e8f14" }, { "filename": "tic-tac-toe.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/tic-tac-toe/tic-tac-toe.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/tic-tac-toe/tic-tac-toe.json", "sha256": "269dcf77d1aaa13e7447c5d4106edfab9b70daa5b55a6187afce66eaa7fc204d" } ] }, { "id": "column-samples/multi-person-mailto", "family": "column", "slug": "multi-person-mailto", "title": "Multi-Person Mail To Link", "description": "This column formatting sample demonstrates how to add a mailto: link for each person in a multiple selection person column.", "longDescription": [ "This column formatting sample demonstrates how to add a mailto: link for each person in a multiple selection person column." ], "created": "2021-12-12T00:00:00.000Z", "updated": "2021-12-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-themePrimary", "sp-field-quickAction" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-mailto", "route": "samples/column/multi-person-mailto/", "preview": "generated/previews/column-multi-person-mailto.webp", "previewAlt": "Multi-Person Mail To Link formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-mailto/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-mailto.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-mailto/multi-person-mailto.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-mailto/multi-person-mailto.json", "sha256": "647270fc192ff2b101ef9518040cca24b38bd193d1f3701623fcb3daa9c7e5ae" } ] }, { "id": "view-samples/search-within-tags", "family": "view", "slug": "search-within-tags", "title": "Search Within Tags", "description": "This sample demonstrates using inlineEditField to enable searching for a word against tags (choice column) within a list item.", "longDescription": [ "This sample demonstrates using inlineEditField to enable searching for a word against tags (choice column) within a list item." ], "created": "2021-12-12T00:00:00.000Z", "updated": "2021-12-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLowerCase", "indexOf", "length", "substring", "lastIndexOf", "appendTo" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "sp-field-severity--good", "sp-field-underline", "sp-field-borderBottomDashed" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/search-within-tags", "route": "samples/view/search-within-tags/", "preview": "generated/previews/view-search-within-tags.webp", "previewAlt": "Search Within Tags formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/search-within-tags/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "search-within-tags.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/search-within-tags/search-within-tags.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/search-within-tags/search-within-tags.json", "sha256": "d414535b853f3de6e8ee6e36331708ba2956ea1be2061049beabc501a1ed9b0f" } ] }, { "id": "column-samples/hyperlink-click-count", "family": "column", "slug": "hyperlink-click-count", "title": "Count the Number of Clicks on a Link", "description": "This sample demonstrates counting the number of clicks on a link.", "longDescription": [ "This sample demonstrates counting the number of clicks on a link. By keeping track of the number of link clicks, you can figure out which links are popular with users." ], "created": "2021-12-11T00:00:00.000Z", "updated": "2021-12-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Hyperlink" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-bgColor-themePrimary", "ms-bgColor-themePrimary--hover", "ms-bgColor-themeLight", "ms-bgColor-themeLighter", "ms-fontColor-white", "ms-fontColor-white--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/hyperlink-click-count", "route": "samples/column/hyperlink-click-count/", "preview": "generated/previews/column-hyperlink-click-count.webp", "previewAlt": "Count the Number of Clicks on a Link formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/hyperlink-click-count/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "hyperlink-click-count.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/hyperlink-click-count/hyperlink-click-count.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/hyperlink-click-count/hyperlink-click-count.json", "sha256": "90e62943506501ef43dac526c13d04a49d5f632c1a6d4a75d0e00f0adc6346f8" } ] }, { "id": "column-samples/yesno-icon-color", "family": "column", "slug": "yesno-icon-color", "title": "Yes/No Icon Color", "description": "This sample demonstrates how to change the color of the icon according to the value of the Yes/No column.", "longDescription": [ "This sample demonstrates how to change the color of the icon according to the value of the Yes/No column." ], "created": "2021-12-11T00:00:00.000Z", "updated": "2021-12-11T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeDark--hover", "ms-fontColor-white", "ms-bgColor-neutralQuaternaryAlt", "ms-bgColor-neutralTertiaryAlt--hover", "ms-fontColor-neutralSecondary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-icon-color", "route": "samples/column/yesno-icon-color/", "preview": "generated/previews/column-yesno-icon-color.webp", "previewAlt": "Yes/No Icon Color formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-icon-color/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-icon-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-icon-color/yesno-icon-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-icon-color/yesno-icon-color.json", "sha256": "3cc71a79ebd6cb3e56cefb2615496fef18279fed10c52fc49e4adeeed4c4a33f" } ] }, { "id": "view-samples/christmas-tree", "family": "view", "slug": "christmas-tree", "title": "Christmas Tree", "description": "This sample draws a tree across rows in 3 different stages 'alt' as top, 'body' as tree and 'wood' as bottom. You can also include icons in the tree. The Title field will appear as a tooltip on the icons.", "longDescription": [ "This sample draws a tree across rows in 3 different stages 'alt' as top, 'body' as tree and 'wood' as bottom. You can also include icons in the tree. The Title field will appear as a tooltip on the icons." ], "created": "2021-12-09T00:00:00.000Z", "updated": "2021-12-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/christmas-tree", "route": "samples/view/christmas-tree/", "preview": "generated/previews/view-christmas-tree.webp", "previewAlt": "Christmas Tree formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/christmas-tree/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/christmas-tree/assets/screenshot-presents.png", "alt": "screenshot with presents" } ], "definitions": [ { "filename": "christmas-tree.json", "target": "View formatting", "schemaIssues": [ "/hideColumnHeader must be boolean" ], "download": "generated/definitions/view-samples/christmas-tree/christmas-tree.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/christmas-tree/christmas-tree.json", "sha256": "0ceef43417381e45a74223becac3259db8085868c46d80451d876f55f5e125d5" } ] }, { "id": "column-samples/date-update-format", "family": "column", "slug": "date-update-format", "title": "Date Update Format", "description": "Demonstrates updating a date value directly from the format.", "longDescription": [ "This sample demonstrates updating a date value directly from the format. This includes setting the date to the current date/time, incremeting/decrementing the date by day (alternate format included to demonstrate incrementing/decrementing by year), and clearing the date." ], "created": "2021-12-09T00:00:00.000Z", "updated": "2021-12-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Date", "toLocaleDateString", "length", "addDays", "addYears" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "inlineEditField" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-update-format", "route": "samples/column/date-update-format/", "preview": "generated/previews/column-date-update-format.webp", "previewAlt": "date update format", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-update-format/assets/screenshot.gif", "alt": "date update format" } ], "definitions": [ { "filename": "date-update-format-years.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-update-format/date-update-format-years.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-update-format/date-update-format-years.json", "sha256": "34acd446294a4d1b93477ffe407dd79c1c739ad8d96a2a1f616c3e9607886a32" }, { "filename": "date-update-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-update-format/date-update-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-update-format/date-update-format.json", "sha256": "08756b344ca1a4e1af6cc8e40f122658e020af504cdb3223f335371289c4fa93" } ] }, { "id": "view-samples/elf-progress-board", "family": "view", "slug": "elf-progress-board", "title": "Elf Progress Board", "description": "Demonstrates multi-level progress bars, randomization, handling image fields, setValue actions, and inlineEditField", "longDescription": [ "Demonstrates multi-level progress bars, randomization, handling image fields, setValue actions, and inlineEditField" ], "created": "2021-12-09T00:00:00.000Z", "updated": "2021-12-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Inline Editing", "Hover Cards", "Gallery", "Randomization" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now", "@rowIndex" ], "FORMATTING-OPERATORS": [ "toString", "Number", "loopIndex", "length", "ceiling", "getUserImage" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-bgColor-neutralLight", "ms-bgColor-neutralLighter", "ms-bgColor-white", "ms-borderColor-neutralPrimary", "ms-borderColor-neutralLight", "ms-borderColor-neutralLighter", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiary", "ms-fontColor-neutralLight", "ms-fontColor-red--hover", "ms-fontColor-greenDark--hover", "sp-card-borderHighlight", "sp-card-personCallout", "sp-card-container", "sp-card-keyboard-focusable", "sp-card-subContainer", "sp-card-displayColumnContainer", "sp-card-previewColumnContainer", "sp-card-imagePreviewBackground", "sp-card-userContainer", "sp-card-userThumbnail", "sp-card-userOthers", "sp-card-userCustomCard", "sp-card-defaultImage", "sp-card-defaultImageOverlay", "sp-card-imagePreview", "sp-card-imageContainer" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/elf-progress-board", "route": "samples/view/elf-progress-board/", "preview": "generated/previews/view-elf-progress-board.webp", "previewAlt": "Progress Board", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/elf-progress-board/assets/screenshot.gif", "alt": "Progress Board" } ], "definitions": [ { "filename": "elf-progress-board.json", "target": "View formatting", "schemaIssues": [ "/formatter/children/0/children/1/children/0/children/0/children/1/children/0/attributes must NOT have additional properties" ], "download": "generated/definitions/view-samples/elf-progress-board/elf-progress-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/elf-progress-board/elf-progress-board.json", "sha256": "9af331e7f0a4c1af82cba858590ab4d51c28b05be71738db80153b679d934603" } ] }, { "id": "column-samples/yesno-roundedfill-format", "family": "column", "slug": "yesno-roundedfill-format", "title": "Rounded Fill Checkbox", "description": "This sample includes custom checkbox rounded styles.", "longDescription": [ "This sample includes custom checkbox rounded styles." ], "created": "2021-12-09T00:00:00.000Z", "updated": "2021-12-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "length" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-white", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-roundedfill-format", "route": "samples/column/yesno-roundedfill-format/", "preview": "generated/previews/column-yesno-roundedfill-format.webp", "previewAlt": "Rounded Fill Checkbox formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-roundedfill-format/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-azure-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-roundedfill-format/yesno-azure-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-roundedfill-format/yesno-azure-format.json", "sha256": "74a1ab335406f35b5866b7d0d9cd56dd6cd54f46ee22226da7dc18748d592251" }, { "filename": "yesno-roundedfill-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-roundedfill-format/yesno-roundedfill-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-roundedfill-format/yesno-roundedfill-format.json", "sha256": "5197b755c000ca483ec68984553e03839d28e1d843da6fa1bc74fd9d169dd694" } ] }, { "id": "view-samples/image-slider", "family": "view", "slug": "image-slider", "title": "Image Slider", "description": "This sample includes format to display images in Lists as slider moving to next clicking the icon on top left of image.", "longDescription": [ "This sample includes format to display images in Lists as slider moving to next clicking the icon on top left of image." ], "created": "2021-12-08T00:00:00.000Z", "updated": "2021-12-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary--hover", "ms-fontColor-white", "ms-fontSize-24" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-slider", "route": "samples/view/image-slider/", "preview": "generated/previews/view-image-slider.webp", "previewAlt": "Image Slider formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-slider/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "image-slider.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/image-slider/image-slider.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/image-slider/image-slider.json", "sha256": "978c459514de89d4f14ce96d6ff3eacff03a3465a6adec60916fcecb5ab59567" } ] }, { "id": "view-samples/clipboards", "family": "view", "slug": "clipboards", "title": "Clipboards", "description": "This sample displays a formatted card in a board view that enables tagging, updating card dates, menu options to reorder cards within their category, sharing links, flaging (focus colors), assigning a user, and minimizing/expaning the card.", "longDescription": [ "This sample displays a formatted card in a board view that enables tagging, updating card dates, menu options to reorder cards within their category, sharing links, flaging (focus colors), assigning a user, and minimizing/expaning the card." ], "created": "2021-12-06T00:00:00.000Z", "updated": "2021-12-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "substring", "getDate", "getMonth", "getYear", "lastIndexOf" ], "FORMATTING-ACTIONS": [ "delete", "defaultClick" ], "FORMATTING-FEATURES": [ "inlineEditField", "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-borderColor-themePrimary", "ms-fontColor-themePrimary", "ms-fontWeight-bold", "ms-fontSize-20", "ms-fontSize-16", "ms-fontSize-10" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/clipboards", "route": "samples/view/clipboards/", "preview": "generated/previews/view-clipboards.webp", "previewAlt": "Clipboards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/clipboards/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "clipboards.json", "target": "View formatting", "schemaIssues": [ "/hideColumnHeader must be boolean" ], "download": "generated/definitions/view-samples/clipboards/clipboards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/clipboards/clipboards.json", "sha256": "5fccebb62523f5f9cc9503a8e3a91bd9fabcc070f5a4154c4a3d53d542decde8" } ] }, { "id": "view-samples/discussion-board", "family": "view", "slug": "discussion-board", "title": "Discussion Board", "description": "This sample transforms your list into a discussion board with title, desription, tags, and votes are available. Additionally, users can react, comment, and perform inline edits!", "longDescription": [ "This sample transforms your list into a discussion board with title, desription, tags, and votes are available. Additionally, users can react, comment, and perform inline edits!" ], "created": "2021-12-06T00:00:00.000Z", "updated": "2021-12-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me", "@rowIndex" ], "FORMATTING-OPERATORS": [ "toString", "Number", "toLocaleDateString", "indexOf", "length", "substring", "lastIndexOf", "replace", "getUserImage", "appendTo", "removeFrom", "toUpperCase", "getDate", "getMonth", "getYear" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "delete", "share" ], "FORMATTING-FEATURES": [ "forEach", "inlineEditField", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter", "columnFormatterReference" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-communicationTint20--hover", "ms-bgColor-communicationTint40", "ms-bgColor-gray30", "ms-bgColor-gray30--hover", "ms-fontColor-white", "ms-fontColor-blueDark", "ms-fontColor-gray100", "ms-fontWeight-semibold", "ms-fontSize-24", "ms-fontSize-20", "ms-fontSize-18", "ms-fontSize-16", "ms-fontSize-14", "ms-fontSize-12", "ms-bgColor-themePrimary", "ms-fontColor-themePrimary", "ms-fontWeight-bold", "sp-field-italic", "ms-bgColor-info--hover", "ms-bgColor-gray60--hover", "ms-fontColor-info", "ms-fontSize-28", "sp-css-backgroundColor-neutralLighterAlt" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/discussion-board", "route": "samples/view/discussion-board/", "preview": "generated/previews/view-discussion-board.webp", "previewAlt": "Discussion Board formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/discussion-board/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "discussion-board-timeline-format.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/discussion-board/discussion-board-timeline-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/discussion-board/discussion-board-timeline-format.json", "sha256": "76be5ee27484d9b65a32c27e43dccb56ef90fdc8287899655ae51bb53d0be4c7" }, { "filename": "discussion-board.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/discussion-board/discussion-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/discussion-board/discussion-board.json", "sha256": "917bfe5cafb43c557ac02b1ef208605edbd6fc80cdcd0c360efff1fa2649e6ea" } ] }, { "id": "view-samples/emoji-reactions", "family": "view", "slug": "emoji-reactions", "title": "Emoji Reactions", "description": "This sample demonstrates reacting with an emoji. Who reacted and the total counts per reaction are stored with the list item.", "longDescription": [ "This sample demonstrates reacting with an emoji. Who reacted and the total counts per reaction are stored with the list item." ], "created": "2021-12-06T00:00:00.000Z", "updated": "2021-12-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Emoji", "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "toString", "Number", "indexOf", "length", "substring", "lastIndexOf", "replace" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-communicationTint20--hover", "ms-bgColor-communicationTint40", "ms-bgColor-gray30--hover", "ms-fontColor-blueDark", "ms-fontSize-24", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/emoji-reactions", "route": "samples/view/emoji-reactions/", "preview": "generated/previews/view-emoji-reactions.webp", "previewAlt": "Emoji Reactions formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/emoji-reactions/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/emoji-reactions/assets/screenshotCount.png", "alt": "screenshot count" } ], "definitions": [ { "filename": "emoji-reactions-count.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/emoji-reactions/emoji-reactions-count.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/emoji-reactions/emoji-reactions-count.json", "sha256": "dd538c6aa7a3d0114c8e97d75ebe534680ba476cc954157995ba0e6aea719c64" }, { "filename": "emoji-reactions.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/emoji-reactions/emoji-reactions.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/emoji-reactions/emoji-reactions.json", "sha256": "5dbbaa6d5caa126ba1779bd79eb9d1c1b1e4381242a58f8bfc2fc59b0bf8e86d" } ] }, { "id": "view-samples/flashcards", "family": "view", "slug": "flashcards", "title": "Flashcards", "description": "This sample creates a set of flashcards from list items. A flashcard is a card bearing information on both sides, which is intended to be used as an aid in memorization. Each flashcard bears a question on one side and an answer on the other. Flashcards are often used to memorize vocabulary, historical dates, formulas or any subject matter that can be learned via a question-and-answer format.", "longDescription": [ "This sample creates a set of flashcards from list items. A flashcard is a card bearing information on both sides, which is intended to be used as an aid in memorization. Each flashcard bears a question on one side and an answer on the other. Flashcards are often used to memorize vocabulary, historical dates, formulas or any subject matter that can be learned via a question-and-answer format." ], "created": "2021-12-06T00:00:00.000Z", "updated": "2021-12-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "hideSelection", "fillHorizontally" ], "CLASSES": [ "ms-bgColor-white", "ms-fontColor-neutralPrimary", "sp-card-subContainer", "sp-card-displayColumnContainer", "sp-card-content", "sp-card-highlightedContent", "sp-row-card", "sp-card-borderHighlight" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/flashcards", "route": "samples/view/flashcards/", "preview": "generated/previews/view-flashcards.webp", "previewAlt": "Flashcards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/flashcards/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "flashcards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/flashcards/flashcards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/flashcards/flashcards.json", "sha256": "82254592293b70d0a85cbdd8fc867766d62d2bc8c799c9e986eaa32d30ccce47" } ] }, { "id": "view-samples/menu-link-tiles", "family": "view", "slug": "menu-link-tiles", "title": "Menu Link Tiles", "description": "This sample includes a Metro tiles style menu with additional features such us configuration of tiles using size and color, option to favorite a tile using setValue, and also includes customCardProps to show a custom hover card with the description of a tile.", "longDescription": [ "This sample includes a Metro tiles style menu with additional features such us configuration of tiles using size and color, option to favorite a tile using setValue, and also includes customCardProps to show a custom hover card with the description of a tile." ], "created": "2021-12-03T00:00:00.000Z", "updated": "2021-12-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-sharedGray10--hover", "ms-fontColor-white--hover", "ms-fontColor-sharedGray10" ] }, "authors": [ { "gitHubAccount": "aaclage", "pictureUrl": "https://github.com/aaclage.png", "name": "André Lage", "key": "aaclage" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/menu-link-tiles", "route": "samples/view/menu-link-tiles/", "preview": "generated/previews/view-menu-link-tiles.webp", "previewAlt": "Menu Link Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-link-tiles/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/menu-link-tiles/assets/screenshot2.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "menu-link-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/menu-link-tiles/menu-link-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/menu-link-tiles/menu-link-tiles.json", "sha256": "f6c3674f64e6bd0be8858bd3f99706a982dd4b056c0ccada1e0d227ef459780a" } ] }, { "id": "view-samples/group-header-user-properties", "family": "view", "slug": "group-header-user-properties", "title": "Display User Properties in the Group Header", "description": "This sample demonstrates showing additional properties for a grouped user field in the group header. The user's picture, email, title, and department are all shown.", "longDescription": [ "This sample demonstrates showing additional properties for a grouped user field in the group header. The user's picture, email, title, and department are all shown." ], "created": "2021-11-28T00:00:00.000Z", "updated": "2021-11-28T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count", "@group.columnDisplayName" ], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-fontWeight-semibold", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-user-properties", "route": "samples/view/group-header-user-properties/", "preview": "generated/previews/view-group-header-user-properties.webp", "previewAlt": "Display User Properties in the Group Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/group-header-user-properties/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "group-header-user-properties.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-user-properties/group-header-user-properties.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-user-properties/group-header-user-properties.json", "sha256": "1deca1a806632ad85984616bce403a56b1c7b67fca0cb646475dd156571754ea" } ] }, { "id": "column-samples/multi-person-unique-reaction", "family": "column", "slug": "multi-person-unique-reaction", "title": "Like / Dislike - Unique reaction", "description": "This sample provides rounded images for each person in a multi-select person field.", "longDescription": [ "This sample provides rounded images for each person in a multi-select person field." ], "created": "2021-11-27T00:00:00.000Z", "updated": "2021-11-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "length", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-unique-reaction", "route": "samples/column/multi-person-unique-reaction/", "preview": "generated/previews/column-multi-person-unique-reaction.webp", "previewAlt": "Like / Dislike - Unique reaction formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-unique-reaction/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-unique-reaction-dislike.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-unique-reaction/multi-person-unique-reaction-dislike.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-unique-reaction/multi-person-unique-reaction-dislike.json", "sha256": "8e8f7f7c16dfb1594671558b6979e5e99aeb392a4370ec7bcb646bd8b40ae9e7" }, { "filename": "multi-person-unique-reaction.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-unique-reaction/multi-person-unique-reaction.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-unique-reaction/multi-person-unique-reaction.json", "sha256": "1341117093f07b39030ef4ccde854610d9673c30804ea956df11e17a5520ec69" } ] }, { "id": "column-samples/generic-like-unlike", "family": "column", "slug": "generic-like-unlike", "title": "Like/Unlike List Item", "description": "Demonstrates how to like/unlike a list item.", "longDescription": [ "This sample demonstrates how to like/unlike a list item. This sample uses the setValue customRowAction to update the number and person field." ], "created": "2021-11-27T00:00:00.000Z", "updated": "2021-11-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-like-unlike", "route": "samples/column/generic-like-unlike/", "preview": "generated/previews/column-generic-like-unlike.webp", "previewAlt": "Like/Unlike List Item formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-like-unlike/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-like-unlike.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-like-unlike/generic-like-unlike.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-like-unlike/generic-like-unlike.json", "sha256": "873796f2588f3fba95b4f792a9eb9f48fe4760b32c72b968574f5df21f4444ed" } ] }, { "id": "view-samples/video-gallery", "family": "view", "slug": "video-gallery", "title": "Video Gallery", "description": "A gallery view of video stored in SharePoint with a card layout showing rich metadata such as title, description, people, tools topics covered, social sharing options like yammer, share and like.", "longDescription": [ "A gallery view of video stored in SharePoint with a card layout showing rich metadata such as title, description, people, tools topics covered, social sharing options like yammer, share and like." ], "created": "2021-11-23T00:00:00.000Z", "updated": "2021-11-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "toString", "loopIndex", "indexOf", "length", "substring", "getUserImage", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "defaultClick", "setValue", "share" ], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField", "customCardProps", "beakStyle", "directionalHint", "hideSelection", "hideColumnHeader" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralLight", "ms-bgColor-purpleDark--hover", "ms-borderColor-neutralLight", "ms-borderColor-blue", "ms-fontColor-neutralSecondary", "ms-fontColor-white", "ms-fontColor-black", "ms-fontWeight-semibold", "ms-font-xl", "ms-fontSize-xl", "ms-fontSize-m", "ms-fontSize-s", "sp-card-personCallout", "sp-card-keyboard-focusable", "sp-card-previewColumnContainer", "sp-card-userEmptyText", "sp-card-userContainer", "sp-card-userThumbnail", "sp-card-userOthers", "sp-card-userCustomCard", "sp-row-listPadding", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "anandragav", "pictureUrl": "https://github.com/anandragav.png", "name": "Anand Ragav", "key": "anandragav" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/video-gallery", "route": "samples/view/video-gallery/", "preview": "generated/previews/view-video-gallery.webp", "previewAlt": "Video Gallery formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/video-gallery/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "video-gallery.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/video-gallery/video-gallery.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/video-gallery/video-gallery.json", "sha256": "27be0a7bc8ae7555928917319ce86950a5e6b5d64fa415d386cfcc3e564e7527" } ] }, { "id": "column-samples/number-countup-countdown", "family": "column", "slug": "number-countup-countdown", "title": "Display Count Up and Count Down Buttons", "description": "This sample demonstrates a button with a number increasing by one and a button with a number decreasing by one.", "longDescription": [ "This sample demonstrates a button with a number increasing by one and a button with a number decreasing by one." ], "created": "2021-11-21T00:00:00.000Z", "updated": "2021-11-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeDark--hover", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-countup-countdown", "route": "samples/column/number-countup-countdown/", "preview": "generated/previews/column-number-countup-countdown.webp", "previewAlt": "Display Count Up and Count Down Buttons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-countup-countdown/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "number-countup-countdown.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-countup-countdown/number-countup-countdown.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-countup-countdown/number-countup-countdown.json", "sha256": "61e42d13bc810d0724ae9a0f0d074fff1c0f50720e4d8427b775c6c177e4e3d0" } ] }, { "id": "column-samples/multi-person-reaction", "family": "column", "slug": "multi-person-reaction", "title": "Reacting and displaying users who have reacted", "description": "This sample demonstrates how to react and display users who have reacted.", "longDescription": [ "This sample demonstrates how to react and display users who have reacted." ], "created": "2021-11-21T00:00:00.000Z", "updated": "2021-11-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Inline Editing", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "length", "getUserImage", "appendTo", "removeFrom" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [ "forEach", "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themeTertiary--hover" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-reaction", "route": "samples/column/multi-person-reaction/", "preview": "generated/previews/column-multi-person-reaction.webp", "previewAlt": "Reacting and displaying users who have reacted formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-reaction/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-reaction.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-reaction/multi-person-reaction.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-reaction/multi-person-reaction.json", "sha256": "639405e8cc756a149f2031fce5aa5d7bb1ef278268eae5408b42f61c6a7140da" } ] }, { "id": "column-samples/yesno-toggle-format", "family": "column", "slug": "yesno-toggle-format", "title": "Yes/No Column Toggle", "description": "This sample demonstrates changing the value of the Yes/No column to a toggle. Three different versions of the sample are provided (Toggle, Icon, Emoji).", "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, Emoji)." ], "created": "2021-04-29T00:00:00.000Z", "updated": "2021-11-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralTertiaryAlt", "ms-bgColor-white", "ms-fontColor-themePrimary", "ms-fontColor-neutralTertiaryAlt" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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 its displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-toggle-format", "route": "samples/column/yesno-toggle-format/", "preview": "generated/previews/column-yesno-toggle-format.webp", "previewAlt": "Yes/No Column Toggle formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-toggle-format/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-toggle-emoji-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-toggle-format/yesno-toggle-emoji-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-toggle-format/yesno-toggle-emoji-format.json", "sha256": "325f9a2c1e3ab20a221c999e7aa8641af20036aca5b91a405d50d535dd6a3ebc" }, { "filename": "yesno-toggle-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-toggle-format/yesno-toggle-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-toggle-format/yesno-toggle-format.json", "sha256": "68509ea1812b9f45e1c297420cbec9d1eb6f5359a04edabc3351f5bf9784a87e" }, { "filename": "yesno-toggle-icon-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-toggle-format/yesno-toggle-icon-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-toggle-format/yesno-toggle-icon-format.json", "sha256": "7c63731a40796b1560abd41a2df413095b3609ab8042aac4e02e8a706b8a002f" } ] }, { "id": "column-samples/approval-buttons-setValue-status-user", "family": "column", "slug": "approval-buttons-setValue-status-user", "title": "Inline Approval", "description": "Creates buttons to approve/reject an item by updating an Approval Status field created using a choice field, and also set the value of a person field to the user who took the action by using the setValue action.", "longDescription": [ "Creates buttons to approve/reject an item by updating an Approval Status field created using a choice field, and also set the value of a person field to the user who took the action by using the setValue action." ], "created": "2021-11-19T00:00:00.000Z", "updated": "2021-11-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Inline Editing" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "toLowerCase" ], "FORMATTING-ACTIONS": [ "setValue" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/approval-buttons-setValue-status-user", "route": "samples/column/approval-buttons-setValue-status-user/", "preview": "generated/previews/column-approval-buttons-setValue-status-user.webp", "previewAlt": "Inline Approval formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/approval-buttons-setValue-status-user/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "approval-buttons-setValue-status-user.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/approval-buttons-setValue-status-user/approval-buttons-setValue-status-user.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/approval-buttons-setValue-status-user/approval-buttons-setValue-status-user.json", "sha256": "a2d234f97f8478804a5dbf5f17ab45965e65aadd24c2cb3fb0262cfc438e9375" } ] }, { "id": "column-samples/number-background-color-shading", "family": "column", "slug": "number-background-color-shading", "title": "Shaded Backgrounds", "description": "This sample demonstrates how to change the shade of the background color according to the value of the number column.", "longDescription": [ "This sample demonstrates how to change the shade of the background color according to the value of the number column." ], "created": "2021-11-16T00:00:00.000Z", "updated": "2021-11-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themeTertiary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-background-color-shading", "route": "samples/column/number-background-color-shading/", "preview": "generated/previews/column-number-background-color-shading.webp", "previewAlt": "Shaded Backgrounds formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-background-color-shading/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-background-color-shading-custom-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-background-color-shading/number-background-color-shading-custom-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-background-color-shading/number-background-color-shading-custom-color.json", "sha256": "56805b094ce5045d5de9bae0771e3ea5197fe748dcdc93f873d073dbea8327b4" }, { "filename": "number-background-color-shading.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-background-color-shading/number-background-color-shading.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-background-color-shading/number-background-color-shading.json", "sha256": "8029cb33d11fcd41ba991d67087b0e5c92fc26ea43a8a66f069dc0e6b960c0be" } ] }, { "id": "column-samples/number-circle-in-circle", "family": "column", "slug": "number-circle-in-circle", "title": "Number Circle in Circle", "description": "This sample shows how the percentage value in a column can be displayed as the area of a circle within another circle.", "longDescription": [ "This sample shows how the percentage value in a column can be displayed as the area of a circle within another circle." ], "created": "2021-11-14T00:00:00.000Z", "updated": "2021-11-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "pow" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themeLight", "ms-fontColor-themePrimary", "ms-bgColor-white", "ms-fontColor-themeDarker" ] }, "authors": [ { "gitHubAccount": "gdk-max", "pictureUrl": "https://github.com/gdk-max.png", "name": "Geert de Kooter", "key": "gdk-max" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-circle-in-circle", "route": "samples/column/number-circle-in-circle/", "preview": "generated/previews/column-number-circle-in-circle.webp", "previewAlt": "Number Circle in Circle formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-circle-in-circle/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-circle-in-circle.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-circle-in-circle/number-circle-in-circle.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-circle-in-circle/number-circle-in-circle.json", "sha256": "51b2e821497bbe7bdb980aa95cd925e9d94af333e69d99f45ddf1963a5b5113a" } ] }, { "id": "column-samples/date-range-rag", "family": "column", "slug": "date-range-rag", "title": "Red-Amber-Green (RAG) Bars Based on Date Ranges", "description": "This example creates colored data bars on the current field based on `DueDate` and `StartDate` fields compared to the current date/time.", "longDescription": [ "This example creates colored data bars on the current field based on `DueDate` and `StartDate` fields compared to the current date/time." ], "created": "2018-06-13T00:00:00.000Z", "updated": "2021-11-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Severity" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number", "Date", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralSecondary", "sp-field-severity--good", "sp-field-severity--warning", "sp-field-severity--severeWarning", "ms-fontColor-neutralSecondary" ] }, "authors": [ { "gitHubAccount": "ChrispyBites", "pictureUrl": "https://github.com/ChrispyBites.png", "name": "Christopher Parker", "key": "chrispybites" }, { "gitHubAccount": "JoeAyre", "pictureUrl": "https://github.com/JoeAyre.png", "name": "Joe Ayre", "key": "joeayre" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-range-rag", "route": "samples/column/date-range-rag/", "preview": "generated/previews/column-date-range-rag.webp", "previewAlt": "Red-Amber-Green (RAG) Bars Based on Date Ranges formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-range-rag/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-range-rag/assets/screenshot-daysleft.png", "alt": "screenshot-daysleft" } ], "definitions": [ { "filename": "date-range-rag-days-left.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-range-rag/date-range-rag-days-left.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-range-rag/date-range-rag-days-left.json", "sha256": "47231bc4948a9c9f150457e4a163d89b981f69592d737d25967dd50e8b38f75a" }, { "filename": "date-range-rag.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-range-rag/date-range-rag.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-range-rag/date-range-rag.json", "sha256": "522b4d561a413e896aa73741bc09d795bc444b73f4790e938858c9238201a758" }, { "filename": "date-range-ragAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-range-rag/date-range-ragAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-range-rag/date-range-ragAST.json", "sha256": "ca35c7cc45c7524db0ba2a1ab6083073dac3a549aace471e69fac24aa7b97975" } ] }, { "id": "view-samples/group-header-status-icon-color", "family": "view", "slug": "group-header-status-icon-color", "title": "Group Header Status Icon and Color", "description": "This is a sample of customizing the group header when grouping by a Status column. This format displays a different color and icon according to the Status.", "longDescription": [ "This is a sample of customizing the group header when grouping by a Status column. This format displays a different color and icon according to the Status." ], "created": "2021-10-26T00:00:00.000Z", "updated": "2021-10-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "groupProps", "headerFormatter" ], "CLASSES": [ "ms-fontWeight-bold", "sp-css-backgroundColor-BgCoral", "sp-css-backgroundColor-BgGold", "sp-css-backgroundColor-BgMintGreen", "sp-css-backgroundColor-BgCornflowerBlue", "sp-field-borderAllRegular", "sp-field-borderAllSolid" ] }, "authors": [ { "gitHubAccount": "michelcarlo", "pictureUrl": "https://github.com/michelcarlo.png", "name": "Michel Mendes", "key": "michelcarlo" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-status-icon-color", "route": "samples/view/group-header-status-icon-color/", "preview": "generated/previews/view-group-header-status-icon-color.webp", "previewAlt": "Group Header Status Icon and Color formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/group-header-status-icon-color/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "group-header-status-icon-color.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/group-header-status-icon-color/group-header-status-icon-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/group-header-status-icon-color/group-header-status-icon-color.json", "sha256": "37b848c39575eb69c681441abc5e9d2434e74aa4bf0395d749bb6fb6c9b3c7ea" } ] }, { "id": "column-samples/generic-likedby", "family": "column", "slug": "generic-likedby", "title": "Liked By Users", "description": "This sample demonstrates showing the users who have liked an item.", "longDescription": [ "This sample demonstrates showing the users who have liked an item." ], "created": "2021-10-22T00:00:00.000Z", "updated": "2021-10-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeTertiary", "ms-bgColor-themeTertiary--hover", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Add a ratings feature to your library", "description": "Add a ratings feature to your library", "url": "https://support.microsoft.com/en-us/office/add-a-ratings-feature-to-your-library-5901fcfd-19ca-4f27-a65f-284654298552" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-likedby", "route": "samples/column/generic-likedby/", "preview": "generated/previews/column-generic-likedby.webp", "previewAlt": "Liked By Users formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-likedby/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-likedby.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-likedby/generic-likedby.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-likedby/generic-likedby.json", "sha256": "1f6fd5cc68db36c4e36f86ef7f5f2da02232c2ec3864bd59ba94070957d437b4" } ] }, { "id": "view-samples/average-rating-rowclass", "family": "view", "slug": "average-rating-rowclass", "title": "Average Rating Row Class", "description": "This sample demonstrates how to change the background color of a row based on Average Rating.", "longDescription": [ "This sample demonstrates how to change the background color of a row based on Average Rating. In this case, the background color of the row is changed when the Average Rating is 4 or higher." ], "created": "2021-10-20T00:00:00.000Z", "updated": "2021-10-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/average-rating-rowclass", "route": "samples/view/average-rating-rowclass/", "preview": "generated/previews/view-average-rating-rowclass.webp", "previewAlt": "Average Rating Row Class", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/average-rating-rowclass/assets/screenshot.png", "alt": "Average Rating Row Class" } ], "definitions": [ { "filename": "average-rating-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/average-rating-rowclass/average-rating-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/average-rating-rowclass/average-rating-rowclass.json", "sha256": "ae328c11fe9e1695f24b6a5cc853eb83a6c6817b2763febe5227917fe6ac314f" } ] }, { "id": "view-samples/currentuser-liked-rowclass", "family": "view", "slug": "currentuser-liked-rowclass", "title": "Current User Liked Row Class", "description": "This sample demonstrates how to change the background color of a row that has been liked by the current user.", "longDescription": [ "This sample demonstrates how to change the background color of a row that has been liked by the current user." ], "created": "2021-10-20T00:00:00.000Z", "updated": "2021-10-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/currentuser-liked-rowclass", "route": "samples/view/currentuser-liked-rowclass/", "preview": "generated/previews/view-currentuser-liked-rowclass.webp", "previewAlt": "Currentuser Liked Row Class", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/currentuser-liked-rowclass/assets/screenshot.gif", "alt": "Currentuser Liked Row Class" } ], "definitions": [ { "filename": "currentuser-liked-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/currentuser-liked-rowclass/currentuser-liked-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/currentuser-liked-rowclass/currentuser-liked-rowclass.json", "sha256": "db67d0185844d6f6d4f8a9116786d09d1fe48d24c1b2efd3760923e8b7d1b4f3" } ] }, { "id": "view-samples/likes-count-rowclass", "family": "view", "slug": "likes-count-rowclass", "title": "Likes Count Row Class", "description": "This sample demonstrates how to change the background color of a row depending on the number of likes.", "longDescription": [ "This sample demonstrates how to change the background color of a row depending on the number of likes. In this case, the background color of the row changes when the number of likes is 2 or more." ], "created": "2021-10-20T00:00:00.000Z", "updated": "2021-10-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/likes-count-rowclass", "route": "samples/view/likes-count-rowclass/", "preview": "generated/previews/view-likes-count-rowclass.webp", "previewAlt": "Likes Count Row Class", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/likes-count-rowclass/assets/screenshot.png", "alt": "Likes Count Row Class" } ], "definitions": [ { "filename": "likes-count-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/likes-count-rowclass/likes-count-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/likes-count-rowclass/likes-count-rowclass.json", "sha256": "fd62b190c821e68f309c2557352b8724b9ee0f9b0bb1c50b78535186a97a74f3" } ] }, { "id": "column-samples/date-monthly-emoji", "family": "column", "slug": "date-monthly-emoji", "title": "Monthly Emoji", "description": "This sample demonstrates how to display a emoji representing the month of the date to the left of the date.", "longDescription": [ "This sample demonstrates how to display a emoji representing the month of the date to the left of the date." ], "created": "2021-10-17T00:00:00.000Z", "updated": "2021-10-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "getMonth" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-monthly-emoji", "route": "samples/column/date-monthly-emoji/", "preview": "generated/previews/column-date-monthly-emoji.webp", "previewAlt": "Monthly Emoji formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-monthly-emoji/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-monthly-emoji.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-monthly-emoji/date-monthly-emoji.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-monthly-emoji/date-monthly-emoji.json", "sha256": "499e7c2bb20cb14f59e99d9f9961b01099f8cc81fe1d509cfcd00257a38b0964" } ] }, { "id": "view-samples/piano", "family": "view", "slug": "piano", "title": "Piano", "description": "This sample formats your SharePoint list view to look like a piano.", "longDescription": [ "This sample formats your SharePoint list view to look like a piano." ], "created": "2021-09-28T00:00:00.000Z", "updated": "2021-09-28T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex", "@window.innerHeight", "@window.innerWidth" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralPrimary", "ms-bgColor-sharedRed10", "ms-bgColor-sharedOrange10", "ms-bgColor-sharedYellow10", "ms-bgColor-sharedYellowGreen10", "ms-bgColor-sharedCyan10", "ms-bgColor-sharedCyanBlue10", "ms-bgColor-sharedBlueMagenta10", "ms-fontColor-white", "ms-bgColor-themePrimary", "ms-bgColor-themeLighter--hover", "ms-bgColor-themeDark--hover", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/piano", "route": "samples/view/piano/", "preview": "generated/previews/view-piano.webp", "previewAlt": "theme-color-piano", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/piano/assets/screenshot.png", "alt": "theme-color-piano" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/piano/assets/screenshot_rainbow-color.png", "alt": "rainbow-color-piano" } ], "definitions": [ { "filename": "piano-rainbow.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/piano/piano-rainbow.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/piano/piano-rainbow.json", "sha256": "360ae4d4d3a982aeafeb636e662b03d09f2247be158992b09293ab4174d0c062" }, { "filename": "piano.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/piano/piano.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/piano/piano.json", "sha256": "bc9aebf8130a96d7ad7b4cc5c0ace3e4e04bb3832ae2ead92e4c3dad49d95ac0" } ] }, { "id": "column-samples/location-weather", "family": "column", "slug": "location-weather", "title": "Display Location Weather Details", "description": "This sample utilizes sub properties of a Location column to build an image that pulls weather from WeatherForYou.com", "longDescription": [ "This sample utilizes sub properties of a Location column to build an image that pulls weather from WeatherForYou.com" ], "created": "2021-09-16T00:00:00.000Z", "updated": "2021-09-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Location" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/location-weather", "route": "samples/column/location-weather/", "preview": "generated/previews/column-location-weather.webp", "previewAlt": "Display Location Weather Details formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/location-weather/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "location-weather.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/location-weather/location-weather.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/location-weather/location-weather.json", "sha256": "d26c4419c9b546ac90e4aeef1fbf69f5d1687303b6b69931f7cef70bfdfc52fa" } ] }, { "id": "form-samples/wave-header-footer", "family": "form", "slug": "wave-header-footer", "title": "Wave Header and Footer", "description": "This sample demonstrates how to display waves in the header and footer of a form. Waves are displayed using SVG.", "longDescription": [ "This sample demonstrates how to display waves in the header and footer of a form. Waves are displayed using SVG." ], "created": "2021-09-14T00:00:00.000Z", "updated": "2021-09-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/wave-header-footer", "route": "samples/form/wave-header-footer/", "preview": "generated/previews/form-wave-header-footer.webp", "previewAlt": "Wave Header and Footer formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/wave-header-footer/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "wave-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/wave-header-footer/wave-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/wave-header-footer/wave-footer.json", "sha256": "6577a37bf1ce5246f5f2546bc3b931f3123d323fd910f189e0f8f9412535ff20" }, { "filename": "wave-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/wave-header-footer/wave-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/wave-header-footer/wave-header.json", "sha256": "d111f438c7203a74a97d97dd88e53cd6f4296f7c67e0084d248cb10dece3fe7e" } ] }, { "id": "view-samples/stat-comparison-chart", "family": "view", "slug": "stat-comparison-chart", "title": "Stat Comparison Chart", "description": "Format a list view into a chart that shows a comparison between two entities against various attributes", "longDescription": [ "Format a list view into a chart that shows a comparison between two entities against various attributes" ], "created": "2021-06-23T00:00:00.000Z", "updated": "2021-06-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "toLowerCase" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-red", "ms-bgColor-redDark--hover", "ms-bgColor-blueDark--hover", "ms-bgColor-blue", "ms-fontColor-white", "ms-fontColor-red", "ms-fontColor-blue", "ms-fontSize-28", "ms-fontSize-20", "ms-bgColor-black", "ms-bgColor-yellow--hover", "ms-fontColor-black", "ms-fontColor-black--hover" ] }, "authors": [ { "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", "name": "Anoop Tatti", "key": "anoopt" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/stat-comparison-chart", "route": "samples/view/stat-comparison-chart/", "preview": "generated/previews/view-stat-comparison-chart.webp", "previewAlt": "Stat Comparison Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/stat-comparison-chart/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/stat-comparison-chart/assets/screenshot_without_images.png", "alt": "screenshot without images" } ], "definitions": [ { "filename": "stat-comparison-chart-without-images.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/stat-comparison-chart/stat-comparison-chart-without-images.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/stat-comparison-chart/stat-comparison-chart-without-images.json", "sha256": "6e7908be1b30692ba0e532f3ac16eda1e9dc61d24b49204296e1638430ea3cb4" }, { "filename": "stat-comparison-chart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/stat-comparison-chart/stat-comparison-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/stat-comparison-chart/stat-comparison-chart.json", "sha256": "ac9cee9326b7cda54f240c8961239e568c9a553eb0c7059596a44255ceff360b" } ] }, { "id": "view-samples/disable-selection", "family": "view", "slug": "disable-selection", "title": "Disable Selection", "description": "This is a very basic sample that disables list item selection within your view.", "longDescription": [ "This is a very basic sample that disables list item selection within your view." ], "created": "2021-06-04T00:00:00.000Z", "updated": "2021-06-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/disable-selection", "route": "samples/view/disable-selection/", "preview": "generated/previews/view-disable-selection.webp", "previewAlt": "Disable Selection formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/disable-selection/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "disable-selection.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/disable-selection/disable-selection.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/disable-selection/disable-selection.json", "sha256": "a77b625e7f02001643386bed9a713820f241259583cc70ab8b0df1ca5027e378" } ] }, { "id": "column-samples/generic-launch-powerapp", "family": "column", "slug": "generic-launch-powerapp", "title": "Launch Power App Button", "description": "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).", "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)." ], "created": "2021-05-27T00:00:00.000Z", "updated": "2021-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Apps", "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-themeDark--hover", "ms-font-xxl" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-launch-powerapp", "route": "samples/column/generic-launch-powerapp/", "preview": "generated/previews/column-generic-launch-powerapp.webp", "previewAlt": "Launch Power App Button formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-launch-powerapp/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-launch-powerapp/assets/CopyPALink.png", "alt": "CopyPALink" } ], "definitions": [ { "filename": "generic-launch-powerapp.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-launch-powerapp/generic-launch-powerapp.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-launch-powerapp/generic-launch-powerapp.json", "sha256": "9d0862495aa1ace23fd63291f4f325425b6a3fcb6f5359cc51818e3bb46d8654" } ] }, { "id": "column-samples/generic-mailto-button", "family": "column", "slug": "generic-mailto-button", "title": "MailTo Button", "description": "This sample demonstrates making a mailto link (opens email with prepopulated values) button that references a different field.", "longDescription": [ "This sample demonstrates making a mailto link (opens email with prepopulated values) button that references a different field." ], "created": "2021-05-27T00:00:00.000Z", "updated": "2021-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-themeDark--hover", "ms-font-xxl" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-mailto-button", "route": "samples/column/generic-mailto-button/", "preview": "generated/previews/column-generic-mailto-button.webp", "previewAlt": "MailTo Button formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-mailto-button/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-mailto-button.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-mailto-button/generic-mailto-button.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-mailto-button/generic-mailto-button.json", "sha256": "8b1f072c39b076c1d01b857f318abcf8c36309d47514f4b49b6e8ec4652c191c" } ] }, { "id": "view-samples/out-of-office", "family": "view", "slug": "out-of-office", "title": "Out of Office", "description": "This sample shows how to format a list to show upcoming employee time away from office.", "longDescription": [ "This sample shows how to format a list to show upcoming employee time away from office." ], "created": "2021-05-14T00:00:00.000Z", "updated": "2021-05-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb", "@now" ], "FORMATTING-OPERATORS": [ "toDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeLighterAlt", "ms-fontColor-themeLighter", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontSize-l", "ms-fontSize-m", "ms-fontSize-s" ] }, "authors": [ { "gitHubAccount": "tomresing", "pictureUrl": "https://github.com/tomresing.png", "name": "Tom Resing", "key": "tomresing" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/out-of-office", "route": "samples/view/out-of-office/", "preview": "generated/previews/view-out-of-office.webp", "previewAlt": "Out of Office formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/out-of-office/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "out-of-office.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/out-of-office/out-of-office.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/out-of-office/out-of-office.json", "sha256": "13716a379873b273e9a6e8b39a54f1198930fc17c02cbf98b6022fd8f377ed24" } ] }, { "id": "column-samples/generic-timeline", "family": "column", "slug": "generic-timeline", "title": "Timeline Format", "description": "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.", "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." ], "created": "2021-05-14T00:00:00.000Z", "updated": "2021-05-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralSecondary", "ms-bgColor-neutralSecondaryAlt" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-timeline", "route": "samples/column/generic-timeline/", "preview": "generated/previews/column-generic-timeline.webp", "previewAlt": "Timeline Format formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-timeline/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-timeline.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-timeline/generic-timeline.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-timeline/generic-timeline.json", "sha256": "fdf0dedc8529791fe6cd6628804fa7e02b58909d9f629f1a9034cb4b4acb57c7" } ] }, { "id": "column-samples/number-battery", "family": "column", "slug": "number-battery", "title": "Number Battery", "description": "This sample changes the appearance of the values in number columns (percent) to look like a battery.", "longDescription": [ "This sample changes the appearance of the values in number columns (percent) to look like a battery." ], "created": "2021-05-02T00:00:00.000Z", "updated": "2021-05-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralPrimary", "ms-bgColor-neutralPrimary", "ms-bgColor-yellow", "ms-bgColor-red", "ms-bgColor-tealLight", "ms-fontColor-themePrimary", "ms-bgColor-themePrimary", "ms-bgColor-themeLight" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-battery", "route": "samples/column/number-battery/", "preview": "generated/previews/column-number-battery.webp", "previewAlt": "Number Battery formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-battery/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-battery-normal-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-battery/number-battery-normal-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-battery/number-battery-normal-color.json", "sha256": "132aba0cfb4c74dff6275d5cb14714ce27d2a30e217ad1a9def02407958f5d51" }, { "filename": "number-battery-unicorn-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-battery/number-battery-unicorn-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-battery/number-battery-unicorn-color.json", "sha256": "d2f33598eb753c09787117c22d297834ea8a90826d2d2da39eb8e52eff683d5f" }, { "filename": "number-battery.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-battery/number-battery.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-battery/number-battery.json", "sha256": "6327be2c920ea7ecfb420f13d98170c9e86d40720fa85e5f09afe27ac9cd7e4a" } ] }, { "id": "view-samples/multi-choice-links", "family": "view", "slug": "multi-choice-links", "title": "Multi-Choice Links", "description": "Demonstrates using a multi-choice column to create multiple links", "longDescription": [ "Rendering multiple links with a list view format cannot be achieved by using a rich text column. This sample solves that problem (rendering multiple links) using a multi choice column." ], "created": "2021-04-14T00:00:00.000Z", "updated": "2021-04-14T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "indexOf", "substring", "lastIndexOf" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeLight", "ms-bgColor-themeLighter--hover", "ms-bgColor-themeLighterAlt", "ms-fontColor-themeDark", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontSize-l", "ms-fontSize-m", "ms-fontSize-sPlus" ] }, "authors": [ { "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", "name": "Anoop Tatti", "key": "anoopt" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/multi-choice-links", "route": "samples/view/multi-choice-links/", "preview": "generated/previews/view-multi-choice-links.webp", "previewAlt": "Multi-Choice Links formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/multi-choice-links/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-links.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/multi-choice-links/multi-choice-links.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/multi-choice-links/multi-choice-links.json", "sha256": "a838a0505f1785f672b83f29c60e9eb3a3943ed2ff7b3286eb16a614517064bd" } ] }, { "id": "view-samples/emoji-link-tiles", "family": "view", "slug": "emoji-link-tiles", "title": "Link Collection using Emojis", "description": "This sample demonstrates a link collection using Emoji and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format.", "longDescription": [ "This sample demonstrates a link collection using Emoji and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format." ], "created": "2021-04-05T00:00:00.000Z", "updated": "2021-04-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery", "Grouped" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@group.count" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "groupProps", "headerFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLighter", "ms-bgColor-white", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralTertiaryAlt", "ms-fontWeight-bold", "ms-fontSize-68" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/emoji-link-tiles", "route": "samples/view/emoji-link-tiles/", "preview": "generated/previews/view-emoji-link-tiles.webp", "previewAlt": "Link Collection using Emojis formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/emoji-link-tiles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "emoji-link-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/emoji-link-tiles/emoji-link-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/emoji-link-tiles/emoji-link-tiles.json", "sha256": "2189aa9f08bdac5b32aee0f4c42c4033117660ec8c5d1af84a1da1876ca6086d" } ] }, { "id": "view-samples/get-video-file-embed-code", "family": "view", "slug": "get-video-file-embed-code", "title": "Video Embed Codes", "description": "If you upload video files to a SharePoint document library, there currently isn't 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. 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.", "longDescription": [ "If you upload video files to a SharePoint document library, there currently isn't 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. 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." ], "created": "2021-03-22T00:00:00.000Z", "updated": "2021-03-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb", "@thumbnail" ], "FORMATTING-OPERATORS": [ "toLocaleString" ], "FORMATTING-ACTIONS": [ "defaultClick", "editProps" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-borderColor-neutralLight", "ms-fontWeight-semibold", "ms-fontSize-m", "ms-fontSize-s", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "MarcMroz", "pictureUrl": "https://github.com/MarcMroz.png", "name": "Marc Mroz", "key": "marcmroz" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/get-video-file-embed-code", "route": "samples/view/get-video-file-embed-code/", "preview": "generated/previews/view-get-video-file-embed-code.webp", "previewAlt": "Video Embed Codes formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/get-video-file-embed-code/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "get-video-file-embed-code.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/get-video-file-embed-code/get-video-file-embed-code.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/get-video-file-embed-code/get-video-file-embed-code.json", "sha256": "57167c97bec4a305ad2417435b3312dc60dc7edbb49328aa71e71a13bf3f7790" } ] }, { "id": "column-samples/comment-count", "family": "column", "slug": "comment-count", "title": "Comment Count", "description": "This sample adds a visual indicator to a list item, showing the number of comments present on it.", "longDescription": [ "This sample adds a visual indicator to a list item, showing the number of comments present on it." ], "created": "2021-03-19T00:00:00.000Z", "updated": "2021-03-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-neutralTertiary" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/comment-count", "route": "samples/column/comment-count/", "preview": "generated/previews/column-comment-count.webp", "previewAlt": "Comment Count formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/comment-count/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "comment-count.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/comment-count/comment-count.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/comment-count/comment-count.json", "sha256": "3b2b6edfd9159200fc878d16aac0f46b88b6ac10a8433f985a59baaad2a1a043" } ] }, { "id": "column-samples/generic-approval-status-hover-card", "family": "column", "slug": "generic-approval-status-hover-card", "title": "Approval Status Hover Card", "description": "Adds a hover card with additional details when using Content Approval", "longDescription": [ "This sample provides more detail on list/library items when the standard Conent Approval flow is enabled. The approval status and a related icon/color are shown with additional details about the overall process visible in a panel on hover." ], "created": "2021-03-08T00:00:00.000Z", "updated": "2021-03-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDarker--hover", "ms-fontColor-black", "ms-fontColor-neutralSecondaryAlt", "ms-fontColor-red", "ms-fontColor-green", "ms-fontColor-orange", "ms-borderColor-green", "ms-borderColor-neutralSecondaryAlt", "ms-fontColor-themeDark", "ms-fontColor-themeDarker" ] }, "authors": [ { "gitHubAccount": "m3ngi3", "pictureUrl": "https://github.com/m3ngi3.png", "name": "Django Lohn", "key": "m3ngi3" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-approval-status-hover-card", "route": "samples/column/generic-approval-status-hover-card/", "preview": "generated/previews/column-generic-approval-status-hover-card.webp", "previewAlt": "Status_hover", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-approval-status-hover-card/assets/screenshot.png", "alt": "Status_hover" } ], "definitions": [ { "filename": "generic-approval-status-hover-card.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-approval-status-hover-card/generic-approval-status-hover-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-approval-status-hover-card/generic-approval-status-hover-card.json", "sha256": "e8420e2e78aba64140834bd2533fb992696dbf6a4286aec1d7f73b16bee2f992" } ] }, { "id": "view-samples/chronological-items", "family": "view", "slug": "chronological-items", "title": "Chronological Items", "description": "This sample formats your view to look like a chronological timeline.", "longDescription": [ "This sample formats your view to look like a chronological timeline." ], "created": "2021-02-23T00:00:00.000Z", "updated": "2021-02-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralQuaternary", "ms-borderColor-themeLighterAlt", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiary", "ms-fontSize-20", "ms-fontSize-16", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "fcatinot", "pictureUrl": "https://github.com/fcatinot.png", "name": "Franck Catinot", "key": "fcatinot" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/chronological-items", "route": "samples/view/chronological-items/", "preview": "generated/previews/view-chronological-items.webp", "previewAlt": "Chronological Items formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/chronological-items/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "chronological-items.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/chronological-items/chronological-items.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/chronological-items/chronological-items.json", "sha256": "ed02d43bfd605b0ca7d5e4abcf2bd9f33f5900da9dd1c349f6e1d8fdeb712178" } ] }, { "id": "column-samples/generic-right-align", "family": "column", "slug": "generic-right-align", "title": "Right-Aligned Content", "description": "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.", "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." ], "created": "2021-02-13T00:00:00.000Z", "updated": "2021-02-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "Mike-Honey", "pictureUrl": "https://github.com/Mike-Honey.png", "name": "Mike Honey", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-right-align", "route": "samples/column/generic-right-align/", "preview": "generated/previews/column-generic-right-align.webp", "previewAlt": "Right-Aligned Content formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-right-align/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-right-align.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-right-align/generic-right-align.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-right-align/generic-right-align.json", "sha256": "0b40c4b522837a0863d950258a7f18b319d2af49c79b201dac68dd54575a8c90" } ] }, { "id": "column-samples/generic-youtube-thumbnail", "family": "column", "slug": "generic-youtube-thumbnail", "title": "YouTube Thumbnail", "description": "This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover.", "longDescription": [ "This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover." ], "created": "2021-02-10T00:00:00.000Z", "updated": "2021-02-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "beakStyle", "directionalHint" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "joaoferreira", "pictureUrl": "https://github.com/joaoferreira.png", "name": "João Ferreira", "key": "joaoferreira" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-youtube-thumbnail", "route": "samples/column/generic-youtube-thumbnail/", "preview": "generated/previews/column-generic-youtube-thumbnail.webp", "previewAlt": "YouTube Thumbnail formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-youtube-thumbnail/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-youtube-thumbnail.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-youtube-thumbnail/generic-youtube-thumbnail.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-youtube-thumbnail/generic-youtube-thumbnail.json", "sha256": "48bb849221bd2b462c17ac29e719c19262a82b8a061cd98e37f10748f5a951c2" } ] }, { "id": "form-samples/dashed-line-header", "family": "form", "slug": "dashed-line-header", "title": "Dashed Line Header", "description": "This sample displays the Title and Description values in the heading and decorates them with dashed lines. If the Description value is empty, it will be hidden.", "longDescription": [ "This sample displays the Title and Description values in the heading and decorates them with dashed lines. If the Description value is empty, it will be hidden." ], "created": "2021-02-07T00:00:00.000Z", "updated": "2021-02-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-bold", "ms-fontSize-28", "ms-fontSize-16" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/dashed-line-header", "route": "samples/form/dashed-line-header/", "preview": "generated/previews/form-dashed-line-header.webp", "previewAlt": "Dashed Line Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/dashed-line-header/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/dashed-line-header/assets/screenshot_align-center.png", "alt": "screenshot_align-center" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/dashed-line-header/assets/screenshot_align-right.png", "alt": "screenshot_align-right" } ], "definitions": [ { "filename": "dashed-line-header-align-center.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/dashed-line-header/dashed-line-header-align-center.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/dashed-line-header-align-center.json", "sha256": "c26968847764ec351c878d66d0d2cf1477fa52cac09d7844bfabd3177356826e" }, { "filename": "dashed-line-header-align-right.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/dashed-line-header/dashed-line-header-align-right.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/dashed-line-header-align-right.json", "sha256": "3d7761a7b11b9c5c5ca01c21ed119ba7984fa0885bcf880fe5361ad9fc06429a" }, { "filename": "dashed-line-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/dashed-line-header/dashed-line-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/dashed-line-header/dashed-line-header.json", "sha256": "baf6259047e3a385fdb5052885045549763f59860324e365f31aff9e5822001e" } ] }, { "id": "view-samples/butterfly-chart", "family": "view", "slug": "butterfly-chart", "title": "Butterfly Chart", "description": "This sample formats a SharePoint list view into a butterfly chart.", "longDescription": [ "This sample formats a SharePoint list view into a butterfly chart." ], "created": "2021-02-05T00:00:00.000Z", "updated": "2021-02-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards", "Charts" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-red", "ms-bgColor-redDark--hover", "ms-bgColor-blueDark--hover", "ms-bgColor-blue", "ms-fontColor-red", "ms-fontColor-blue", "ms-fontSize-42", "ms-fontSize-28", "ms-fontSize-20" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/butterfly-chart", "route": "samples/view/butterfly-chart/", "preview": "generated/previews/view-butterfly-chart.webp", "previewAlt": "Butterfly Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/butterfly-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "butterfly-chart.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/butterfly-chart/butterfly-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/butterfly-chart/butterfly-chart.json", "sha256": "1b3835b511b64b3ee0641175272d741eab533b9ec79bc7bd3bbe83a448ec5304" } ] }, { "id": "form-samples/event-itinerary-header", "family": "form", "slug": "event-itinerary-header", "title": "Event Itinerary Header", "description": "This sample shows a customized header for the item form used in the \"Event itinerary\" list template.", "longDescription": [ "This sample shows a customized header for the item form used in the \"Event itinerary\" list template." ], "created": "2021-01-31T00:00:00.000Z", "updated": "2021-01-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "toLocaleTimeString", "getDate", "getMonth", "getYear" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-white", "ms-borderColor-themePrimary", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-bold", "ms-fontSize-42", "ms-fontSize-28", "ms-fontSize-24", "ms-fontSize-16", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/event-itinerary-header", "route": "samples/form/event-itinerary-header/", "preview": "generated/previews/form-event-itinerary-header.webp", "previewAlt": "Event Itinerary Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/event-itinerary-header/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/event-itinerary-header/assets/listtemplates.png", "alt": "listtemplates" } ], "definitions": [ { "filename": "event-itinerary-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/event-itinerary-header/event-itinerary-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/event-itinerary-header/event-itinerary-header.json", "sha256": "5bdfae4f4cc4c20ac172697cda19c7c1fe174a7f4fbc8557c8bf9144f5afe914" } ] }, { "id": "form-samples/status-header-footer", "family": "form", "slug": "status-header-footer", "title": "Status Header and Footer", "description": "This sample shows a customized header and footer for a form with a Status column with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'. This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.", "longDescription": [ "This sample shows a customized header and footer for a form with a Status column with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'. This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used." ], "created": "2021-01-31T00:00:00.000Z", "updated": "2021-01-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "getYear" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-borderColor-neutralLight", "ms-borderColor-yellow", "ms-borderColor-orangeLight", "ms-borderColor-blueLight", "ms-borderColor-greenLight", "ms-fontColor-neutralPrimary", "ms-bgColor-neutralLight", "ms-bgColor-yellow", "ms-bgColor-orangeLight", "ms-bgColor-blueLight", "ms-bgColor-greenLight" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/status-header-footer", "route": "samples/form/status-header-footer/", "preview": "generated/previews/form-status-header-footer.webp", "previewAlt": "Status Header and Footer formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/status-header-footer/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/status-header-footer/assets/status-done.png", "alt": "status-done" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/status-header-footer/assets/status-nevermind.png", "alt": "status-nevermind" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/status-header-footer/assets/status-workingonit.png", "alt": "status-workingonit" } ], "definitions": [ { "filename": "status-footer.json", "target": "Form footer", "schemaIssues": [], "download": "generated/definitions/form-samples/status-header-footer/status-footer.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/status-header-footer/status-footer.json", "sha256": "aef34c6c8bb68e916505c4af02e85110a72a7ab4fe46c53c8fdb56aaa8f6ad3b" }, { "filename": "status-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/status-header-footer/status-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/status-header-footer/status-header.json", "sha256": "1b6c78286fe51e333df3753e540ed9f846af972fd1337faea6868d5cefb2c52c" } ] }, { "id": "column-samples/generic-scheduling-link", "family": "column", "slug": "generic-scheduling-link", "title": "Scheduling Dialog Links to MS Teams and Outlook", "description": "This sample demonstrates creating deep links to the scheduling dialog in Microsoft Teams and Microsoft Outlook.", "longDescription": [ "This sample demonstrates creating deep links to the scheduling dialog in Microsoft Teams and Microsoft Outlook." ], "created": "2021-01-28T00:00:00.000Z", "updated": "2021-01-28T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Microsoft Teams", "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "Number", "toLocaleTimeString", "indexOf", "substring", "getDate", "getMonth", "getYear", "padStart" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontSize-xxl", "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-scheduling-link", "route": "samples/column/generic-scheduling-link/", "preview": "generated/previews/column-generic-scheduling-link.webp", "previewAlt": "Scheduling Dialog Links to MS Teams and Outlook formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-scheduling-link/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-scheduling-link/assets/screen_capture.gif", "alt": "screen_capture" } ], "definitions": [ { "filename": "generic-scheduling-link-advanced.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-scheduling-link/generic-scheduling-link-advanced.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-scheduling-link/generic-scheduling-link-advanced.json", "sha256": "a191627c47ad353eafc7916296f295734b8fe460a2cbb6526f9ca811a79f9cbc" }, { "filename": "generic-scheduling-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-scheduling-link/generic-scheduling-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-scheduling-link/generic-scheduling-link.json", "sha256": "fad7ed9e0a8d126b766fd9c7ae0fe27bb0193ac810216928e71b51079abc5a8f" } ] }, { "id": "form-samples/blank-header", "family": "form", "slug": "blank-header", "title": "Blank Header", "description": "By default, uncustomized list forms display the Title field at the top. This is generally fine, but sometimes you may not want this (especially since the default is to repeat it as the first column). This very basic format removes the default Title display giving you a cleaner form.", "longDescription": [ "By default, uncustomized list forms display the Title field at the top. This is generally fine, but sometimes you may not want this (especially since the default is to repeat it as the first column). This very basic format removes the default Title display giving you a cleaner form." ], "created": "2021-01-21T00:00:00.000Z", "updated": "2021-01-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/blank-header", "route": "samples/form/blank-header/", "preview": "generated/previews/form-blank-header.webp", "previewAlt": "Blank Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/blank-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "blank-header.json", "target": "Form header", "schemaIssues": [], "download": "generated/definitions/form-samples/blank-header/blank-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/blank-header/blank-header.json", "sha256": "2df251c2c05ea90704244d0c51a931502b8d350bebcd5ec8718e1ecbf0f50ef2" } ] }, { "id": "form-samples/wrapped-body", "family": "form", "slug": "wrapped-body", "title": "Wrapped Form Body", "description": "By default, uncustomized list forms display the fields in a single column. This is generally fine, but sometimes you may want to use more horizontal space and have your fields wrap. This is not technically a format but rather a body layout. No columns or sections are specified meaning that this can be applied to any form and it won't change the order of display or what columns are visible it simply adds the wrapping.", "longDescription": [ "By default, uncustomized list forms display the fields in a single column. This is generally fine, but sometimes you may want to use more horizontal space and have your fields wrap. This is not technically a format but rather a body layout. No columns or sections are specified meaning that this can be applied to any form and it won't change the order of display or what columns are visible it simply adds the wrapping." ], "created": "2021-01-21T00:00:00.000Z", "updated": "2021-01-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Form" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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't 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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/form-samples/wrapped-body", "route": "samples/form/wrapped-body/", "preview": "generated/previews/form-wrapped-body.webp", "previewAlt": "Wrapped Form Body formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/form-samples/wrapped-body/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "wrapped-body.json", "target": "Form body", "schemaIssues": [], "download": "generated/definitions/form-samples/wrapped-body/wrapped-body.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/form-samples/wrapped-body/wrapped-body.json", "sha256": "ab53d34f73410d252c24bf8ec53cb35bc5bcae0faf943f3514ec05eca2a42d92" } ] }, { "id": "view-samples/project-health-dashboard", "family": "view", "slug": "project-health-dashboard", "title": "Project Health Dashboard", "description": "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.", "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." ], "created": "2020-12-29T00:00:00.000Z", "updated": "2020-12-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "loopIndex", "join", "length", "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach", "defaultHoverField", "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLight", "ms-bgColor-yellow", "ms-bgColor-orange", "ms-bgColor-green", "ms-bgColor-sharedRed20", "ms-fontColor-themePrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-white", "ms-fontColor-yellow", "ms-fontColor-orange", "ms-fontColor-green", "ms-fontColor-sharedRed20", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontSize-32", "ms-fontSize-28", "ms-fontSize-20", "ms-fontSize-16", "ms-motion-slideRightIn", "sp-row-card", "sp-field-severity--blocked", "sp-field-severity--good", "sp-field-severity--warning" ] }, "authors": [ { "gitHubAccount": "Riftsan", "pictureUrl": "https://github.com/Riftsan.png", "name": "Andres Ibarra", "key": "riftsan" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/project-health-dashboard", "route": "samples/view/project-health-dashboard/", "preview": "generated/previews/view-project-health-dashboard.webp", "previewAlt": "Project Health Dashboard formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/project-health-dashboard/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "project-health-dashboard.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/project-health-dashboard/project-health-dashboard.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/project-health-dashboard/project-health-dashboard.json", "sha256": "4cce083220b6077ff75823ae5ccfd173ea0b1e3ce73660042569ff512b75cccb" } ] }, { "id": "view-samples/testimonials", "family": "view", "slug": "testimonials", "title": "Testimonials", "description": "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! 🙌", "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! 🙌" ], "created": "2020-12-29T00:00:00.000Z", "updated": "2020-12-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "getUserImage" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-borderColor-themePrimary", "ms-fontColor-neutralPrimary" ] }, "authors": [ { "gitHubAccount": "Riftsan", "pictureUrl": "https://github.com/Riftsan.png", "name": "Andres Ibarra", "key": "riftsan" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/testimonials", "route": "samples/view/testimonials/", "preview": "generated/previews/view-testimonials.webp", "previewAlt": "Testimonials formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/testimonials/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "testimonials.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/testimonials/testimonials.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/testimonials/testimonials.json", "sha256": "b43779e377a7eb862329ea2dace9da7f0d45b927616a4f10ba555e67a6645650" } ] }, { "id": "column-samples/generic-comment-count", "family": "column", "slug": "generic-comment-count", "title": "Display Comment Count", "description": "This sample shows the comment count for a list item.", "longDescription": [ "This sample shows the comment count for a list item." ], "created": "2020-12-03T00:00:00.000Z", "updated": "2020-12-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-comment-count", "route": "samples/column/generic-comment-count/", "preview": "generated/previews/column-generic-comment-count.webp", "previewAlt": "generic-comment-count", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-comment-count/assets/screenshot.png", "alt": "generic-comment-count" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-comment-count/assets/generic-comment-count.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-comment-count.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-comment-count/generic-comment-count.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-comment-count/generic-comment-count.json", "sha256": "9fd733785c50412908faafd5d61f49de661a0986556529b883c91bb46782c5ad" } ] }, { "id": "view-samples/message-chat-bubbles", "family": "view", "slug": "message-chat-bubbles", "title": "Message Chat Bubbles", "description": "This sample formats your SharePoint list view to look like message chat bubbles! If the Author is the current user, the message will be displayed on the right.", "longDescription": [ "This sample formats your SharePoint list view to look like message chat bubbles! If the Author is the current user, the message will be displayed on the right." ], "created": "2020-11-19T00:00:00.000Z", "updated": "2020-11-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeLighter", "ms-bgColor-neutralLighter", "ms-fontWeight-bold", "ms-fontSize-18", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/message-chat-bubbles", "route": "samples/view/message-chat-bubbles/", "preview": "generated/previews/view-message-chat-bubbles.webp", "previewAlt": "Message Chat Bubbles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/message-chat-bubbles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "message-chat-bubbles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/message-chat-bubbles/message-chat-bubbles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/message-chat-bubbles/message-chat-bubbles.json", "sha256": "ffd6216093396b2cc0644219b12924f29ef4c2346b4b197e254d28c1956038de" } ] }, { "id": "view-samples/timeline", "family": "view", "slug": "timeline", "title": "Timeline", "description": "This sample formats your SharePoint list view to look like a timeline.", "longDescription": [ "This sample formats your SharePoint list view to look like a timeline." ], "created": "2020-10-17T00:00:00.000Z", "updated": "2020-11-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-neutralSecondary", "ms-borderColor-neutralSecondary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/timeline", "route": "samples/view/timeline/", "preview": "generated/previews/view-timeline.webp", "previewAlt": "Timeline formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/timeline/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/timeline/assets/screenshot-horizontal.gif", "alt": "screenshot horizontal" } ], "definitions": [ { "filename": "timeline-horizontal.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/timeline/timeline-horizontal.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline/timeline-horizontal.json", "sha256": "4a3ddb48dbcf839655430c3a6d8e99a57b0c7b542ca57ebefc47ba7c8c0c53d4" }, { "filename": "timeline.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/timeline/timeline.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/timeline/timeline.json", "sha256": "1202f89c4970504bb803d9a7e470e06e264a344cece9d786dd041ad871d438b8" } ] }, { "id": "view-samples/horse-crests", "family": "view", "slug": "horse-crests", "title": "Horse Crests", "description": "This sample illustrates some advanced techniques for applying theme colors to SVG elements, box-shadows, and borders. It also demonstrates using custom hover cards on complex elements (elements with children).", "longDescription": [ "This sample illustrates some advanced techniques for applying theme colors to SVG elements, box-shadows, and borders. It also demonstrates using custom hover cards on complex elements (elements with children)." ], "created": "2020-11-12T00:00:00.000Z", "updated": "2020-11-12T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps" ], "CLASSES": [ "ms-borderColor-themePrimary--hover", "ms-borderColor-white", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/horse-crests", "route": "samples/view/horse-crests/", "preview": "generated/previews/view-horse-crests.webp", "previewAlt": "horses", "images": [ { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/horse-crests/assets/screenshot.png", "alt": "horses" } ], "definitions": [ { "filename": "horse-crests.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/horse-crests/horse-crests.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/horse-crests/horse-crests.json", "sha256": "650fa3ecc3ebcf9167b8aa40908d1184f6d9e4b72810192a5e8693112e6092ab" } ] }, { "id": "column-samples/generic-time-schedule", "family": "column", "slug": "generic-time-schedule", "title": "Time Schedule", "description": "This sample demonstrates a time schedule with a filled background from Start time to End time.", "longDescription": [ "This sample demonstrates a time schedule with a filled background from Start time to End time." ], "created": "2020-11-03T00:00:00.000Z", "updated": "2020-11-03T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontWeight-bold" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-time-schedule", "route": "samples/column/generic-time-schedule/", "preview": "generated/previews/column-generic-time-schedule.webp", "previewAlt": "Time Schedule formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-time-schedule/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-time-schedule.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-time-schedule/generic-time-schedule.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-time-schedule/generic-time-schedule.json", "sha256": "1d20e731464f2b2c65e436c7c63787745374470a189859772cf77657aadacafb" } ] }, { "id": "view-samples/employee-onboarding-steps", "family": "view", "slug": "employee-onboarding-steps", "title": "Employee Onboarding: Steps", "description": "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.", "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." ], "created": "2020-10-15T00:00:00.000Z", "updated": "2020-10-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "defaultHoverField", "additionalRowClass" ], "CLASSES": [ "ms-bgColor-neutralPrimary", "ms-bgColor-white", "ms-fontColor-neutralSecondary", "ms-fontColor-white", "ms-fontColor-green", "sp-css-backgroundColor-neutralBackground", "sp-css-backgroundColor-noFill", "sp-css-backgroundColor-blueBackground37", "sp-css-backgroundColor-successBackground50", "sp-css-backgroundColor-warningBackground50", "sp-css-backgroundColor-blockingBackground", "sp-css-backgroundColor-errorBackground", "sp-css-backgroundColor-blueBackground27" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/employee-onboarding-steps", "route": "samples/view/employee-onboarding-steps/", "preview": "generated/previews/view-employee-onboarding-steps.webp", "previewAlt": "Employee Onboarding: Steps formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/employee-onboarding-steps/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "employee-onboarding-steps.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/employee-onboarding-steps/employee-onboarding-steps.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/employee-onboarding-steps/employee-onboarding-steps.json", "sha256": "d97def1070649378aa439767fd6c1f24b92669b7cca530f702671a4ec98868c1" } ] }, { "id": "view-samples/issue-tracker-planner-cards", "family": "view", "slug": "issue-tracker-planner-cards", "title": "Issue Tracker: Planner Cards", "description": "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.", "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." ], "created": "2020-10-15T00:00:00.000Z", "updated": "2020-10-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "toString", "toLocaleDateString", "getYear", "startsWith", "replace" ], "FORMATTING-ACTIONS": [ "defaultClick", "share", "delete", "editProps" ], "FORMATTING-FEATURES": [ "defaultHoverField", "customCardProps", "directionalHint", "hideSelection", "additionalRowClass" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-white", "ms-bgColor-red", "ms-borderColor-neutralLight", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralSecondary--hover", "ms-fontColor-neutralTertiaryAlt", "ms-fontColor-white", "ms-fontColor-red", "sp-css-backgroundColor-errorBackground", "sp-css-backgroundColor-neutralBackground10", "sp-css-backgroundColor-blueBackground17", "sp-css-backgroundColor-blueBackground07", "sp-css-backgroundColor-successBackground40", "sp-css-backgroundColor-warningBackground50", "sp-css-backgroundColor-errorBackground50", "sp-css-color-themeDarker", "sp-css-color-neutralPrimary", "sp-css-color-blue", "sp-css-color-redDark", "sp-css-color-green" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/issue-tracker-planner-cards", "route": "samples/view/issue-tracker-planner-cards/", "preview": "generated/previews/view-issue-tracker-planner-cards.webp", "previewAlt": "Issue Tracker: Planner Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/issue-tracker-planner-cards/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "issue-tracker-planner-cards.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/issue-tracker-planner-cards/issue-tracker-planner-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/issue-tracker-planner-cards/issue-tracker-planner-cards.json", "sha256": "ab115129621d604bf782e246f576a211f90d75c13ececa2c54757c61fa729407" } ] }, { "id": "column-samples/generic-column-chart", "family": "column", "slug": "generic-column-chart", "title": "Inline Column Chart", "description": "This sample demonstrates displaying a column chart using SVG. It uses the `currentColor` for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site's theme.", "longDescription": [ "This sample demonstrates displaying a column chart using SVG. It uses the `currentColor` for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site's theme." ], "created": "2020-10-10T00:00:00.000Z", "updated": "2020-10-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary" ] }, "authors": [ { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-column-chart", "route": "samples/column/generic-column-chart/", "preview": "generated/previews/column-generic-column-chart.webp", "previewAlt": "Inline Column Chart formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-column-chart/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-column-chart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-column-chart/generic-column-chart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-column-chart/generic-column-chart.json", "sha256": "3937b130e4d302765c5fe8c14a6bf002ad507102d49a0bf10422c35033cef7fc" } ] }, { "id": "column-samples/generic-socialpic", "family": "column", "slug": "generic-socialpic", "title": "Social Media Profile Pics", "description": "Social media profile pictures are displayed in a circle and clicking them will open the user's social media page in a new window..", "longDescription": [ "Using the social media handles supported by https://unavatar.now.sh, social media profile pictures are displayed in a circle and clicking them will open the user's social media page in a new window. The handle is also displayed as a tooltip when hovering over the profile image." ], "created": "2018-07-21T00:00:00.000Z", "updated": "2020-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "PopWarner", "pictureUrl": "https://github.com/PopWarner.png", "name": "David Warner II", "key": "popwarner" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-socialpic", "route": "samples/column/generic-socialpic/", "preview": "generated/previews/column-generic-socialpic.webp", "previewAlt": "Social Media Profile Pics formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-socialpic/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-socialpic.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-socialpic/generic-socialpic.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-socialpic/generic-socialpic.json", "sha256": "16db0a63b4d4f18fb4e5c43c04235863c9571ffa02ffc39c2963eb99525b7da9" }, { "filename": "generic-socialpicAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-socialpic/generic-socialpicAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-socialpic/generic-socialpicAST.json", "sha256": "546183a9bc9b050defc63edb3c130208cdbf6a282883e439e8772c1ccfb14592" } ] }, { "id": "column-samples/generic-issuestatus-pill", "family": "column", "slug": "generic-issuestatus-pill", "title": "Issue Status Pill ", "description": "This format demonstrates how you can reproduce the status choices as pills found in the Microsoft Lists Issue Tracker template..", "longDescription": [ "This format demonstrates how you can reproduce the status choices as pills found in the Microsoft Lists Issue Tracker template.." ], "created": "2020-07-30T00:00:00.000Z", "updated": "2020-07-30T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-css-backgroundColor-errorBackground50", "sp-css-backgroundColor-errorBackground", "sp-css-color-redDark", "sp-css-backgroundColor-neutralBackground10", "sp-css-backgroundColor-successBackground40", "sp-css-color-green", "sp-css-backgroundColor-warningBackground50", "sp-css-color-themeDarker", "sp-css-backgroundColor-blueBackground07", "sp-css-backgroundColor-blueBackground17", "sp-css-color-neutralPrimary", "sp-css-color-blue", "sp-css-color-red", "sp-css-backgroundColor-blue", "sp-css-color-themeDark" ] }, "authors": [ { "gitHubAccount": "hugoabernier", "pictureUrl": "https://github.com/hugoabernier.png", "name": "Hugo Bernier", "key": "hugoabernier" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-issuestatus-pill", "route": "samples/column/generic-issuestatus-pill/", "preview": "generated/previews/column-generic-issuestatus-pill.webp", "previewAlt": "Issue Status Pill formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-issuestatus-pill/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-issuestatus-pill.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-issuestatus-pill/generic-issuestatus-pill.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-issuestatus-pill/generic-issuestatus-pill.json", "sha256": "202893aead53f22067444ef8f4dccb9b0dcb9fa5301a95443478d6eeafc0542d" } ] }, { "id": "column-samples/date-check-blank-format", "family": "column", "slug": "date-check-blank-format", "title": "Formatting a column when a date column is blank", "description": "This example populates the text content and applies different classes to the Status field depending on the value inside an item's DueDate field. 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 - `@now`, which resolves to the current date/time, evaluated when the user loads the list view.", "longDescription": [ "This example populates the text content and applies different classes to the Status field depending on the value inside an item's DueDate field. 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 - `@now`, which resolves to the current date/time, evaluated when the user loads the list view." ], "created": "2020-07-18T00:00:00.000Z", "updated": "2020-07-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-severity--good", "sp-field-severity--warning", "sp-field-severity--blocked" ] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-check-blank-format", "route": "samples/column/date-check-blank-format/", "preview": "generated/previews/column-date-check-blank-format.webp", "previewAlt": "Formatting a column when a date column is blank formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-check-blank-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-check-blank-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-check-blank-format/date-check-blank-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-check-blank-format/date-check-blank-format.json", "sha256": "6225bb3eeefe7c90f4c80c287179e44a0b1e771f4ad0c1cf24eb534b81686b7d" } ] }, { "id": "view-samples/event-tiles", "family": "view", "slug": "event-tiles", "title": "Modern Event Tiles", "description": "This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart.", "longDescription": [ "This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart." ], "created": "2020-06-25T00:00:00.000Z", "updated": "2020-06-25T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Gallery", "Hover Cards" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "toLocaleTimeString", "getDate", "getMonth", "toString", "loopIndex", "join", "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "forEach", "defaultHoverField", "customCardProps", "directionalHint", "rowFormatter" ], "CLASSES": [ "ms-bgColor-white", "ms-bgColor-neutralLight", "ms-borderColor-neutralTertiary--hover", "ms-borderColor-neutralLight", "ms-borderColor-black", "ms-fontColor-themePrimary", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-black" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/event-tiles", "route": "samples/view/event-tiles/", "preview": "generated/previews/view-event-tiles.webp", "previewAlt": "Modern Event Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/event-tiles/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/event-tiles/assets/screenshotTiles.png", "alt": "screenshotTiles" } ], "definitions": [ { "filename": "event-tiles-only.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/event-tiles/event-tiles-only.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/event-tiles/event-tiles-only.json", "sha256": "d00b36f307613f2ca3855a2a5415706efea0477b1b7b03ef52789469d011c192" }, { "filename": "event-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/event-tiles/event-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/event-tiles/event-tiles.json", "sha256": "27e69f3df88cda68397c827d3e640ccf98e696f1eb852448e01fa790f680b560" } ] }, { "id": "column-samples/text-wrap-format", "family": "column", "slug": "text-wrap-format", "title": "Multi-line Text with Word Wrap", "description": "With modern document libraries and lists, lengthy multi-line fields no longer show text in full (a fade is provided). This isn't always desired, so this sample demonstrates rending long text to mutilple lines with word wrap, similar to classic mode.", "longDescription": [ "With modern document libraries and lists, lengthy multi-line fields no longer show text in full (a fade is provided). This isn't always desired, so this sample demonstrates rending long text to mutilple lines with word wrap, similar to classic mode." ], "created": "2017-12-13T00:00:00.000Z", "updated": "2020-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaronmi", "pictureUrl": "https://github.com/aaronmi.png", "name": "Aaron Miao", "key": "aaronmi" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-wrap-format", "route": "samples/column/text-wrap-format/", "preview": "generated/previews/column-text-wrap-format.webp", "previewAlt": "Multi-line Text with Word Wrap formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-wrap-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-wrap-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-wrap-format/text-wrap-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-wrap-format/text-wrap-format.json", "sha256": "00100873170b7dfccd6fc7a1c14ebed32219384cbdac72b4771f1d3803b6fdfe" } ] }, { "id": "view-samples/bulletin-board", "family": "view", "slug": "bulletin-board", "title": "Bulletin Board", "description": "Provides an example of creating a simple bulletin board listing. The rowFormatter 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. The large size and use of icons makes this much more attractive than a simple table view and keeps the functionality simple for users.", "longDescription": [ "Provides an example of creating a simple bulletin board listing. The rowFormatter 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. The large size and use of icons makes this much more attractive than a simple table view and keeps the functionality simple for users." ], "created": "2018-08-22T00:00:00.000Z", "updated": "2020-05-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [ "defaultClick", "share", "delete" ], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-bgColor-themeLighter--hover", "ms-bgColor-white", "ms-borderColor-themePrimary", "ms-fontColor-themePrimary", "ms-fontColor-themeLight", "ms-fontColor-themeDark--hover", "ms-fontColor-white", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-font-l", "ms-fontSize-su", "ms-fontSize-l", "ms-bgColor-themeLight--hover" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bulletin-board", "route": "samples/view/bulletin-board/", "preview": "generated/previews/view-bulletin-board.webp", "previewAlt": "Bulletin Board formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bulletin-board/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bulletin-board/assets/BulletinBoardDetails.gif", "alt": "BulletinBoardDetails" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bulletin-board/assets/screenshotWithButtons.png", "alt": "screenshotWithButtons" } ], "definitions": [ { "filename": "bulletin-board-with-buttons.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/children/0/style/padding must be object", "/rowFormatter/children/0/style/padding must be string", "/rowFormatter/children/0/style/padding must match a schema in anyOf" ], "download": "generated/definitions/view-samples/bulletin-board/bulletin-board-with-buttons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bulletin-board/bulletin-board-with-buttons.json", "sha256": "1b78cd4255768fc25b81bdd611e629c3719cdad62bc5f2951d757a0f27b25882" }, { "filename": "bulletin-board.json", "target": "View formatting", "schemaIssues": [ "/rowFormatter/style/padding must be object", "/rowFormatter/style/padding must be string", "/rowFormatter/style/padding must match a schema in anyOf" ], "download": "generated/definitions/view-samples/bulletin-board/bulletin-board.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bulletin-board/bulletin-board.json", "sha256": "618adbd58b76b56e051fda1176b3582baf5417856cf1bc56c87f93d33f7de567" } ] }, { "id": "view-samples/custom-hover-card", "family": "view", "slug": "custom-hover-card", "title": "Custom Hover Card (View)", "description": "A custom card is shown on hover of an item. The hover card shows additional details about an item's status.", "longDescription": [ "A custom card is shown on hover of an item. The hover card shows additional details about an item's status." ], "created": "2020-04-08T00:00:00.000Z", "updated": "2020-04-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Power Automate", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "floor" ], "FORMATTING-ACTIONS": [ "executeFlow", "share", "delete", "editProps" ], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint", "hideSelection" ], "CLASSES": [ "ms-bgColor-themeLight--hover", "ms-bgColor-neutralLighterAlt", "ms-fontColor-green", "ms-fontColor-black", "ms-borderColor-green", "ms-borderColor-neutralSecondaryAlt", "ms-fontColor-neutralSecondaryAlt" ] }, "authors": [ { "gitHubAccount": "NiketJain", "pictureUrl": "https://github.com/NiketJain.png", "name": "Niket Jain", "key": "niketjain" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-hover-card", "route": "samples/view/custom-hover-card/", "preview": "generated/previews/view-custom-hover-card.webp", "previewAlt": "Status_hover", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-hover-card/assets/screenshot.png", "alt": "Status_hover" } ], "definitions": [ { "filename": "custom-hover-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-hover-card/custom-hover-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-hover-card/custom-hover-card.json", "sha256": "6e757c5927737bfb0aafc44d5a5840efd5f6abcaed2851019fe922a6f8be5024" } ] }, { "id": "view-samples/default-hover-card", "family": "view", "slug": "default-hover-card", "title": "Default Hover Card", "description": "This sample demonstrates showing a default hover card in a document library. On hover in a formatted view on a file a file card is displayed. On hover in a formatted view on a person column a profile card is displayed.", "longDescription": [ "This sample demonstrates showing a default hover card in a document library. On hover in a formatted view on a file a file card is displayed. On hover in a formatted view on a person column a profile card is displayed." ], "created": "2020-04-08T00:00:00.000Z", "updated": "2020-04-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Automate", "Hover Cards", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@thumbnail" ], "FORMATTING-OPERATORS": [ "toDateString" ], "FORMATTING-ACTIONS": [ "defaultClick", "executeFlow", "editProps" ], "FORMATTING-FEATURES": [ "defaultHoverField", "hideSelection" ], "CLASSES": [ "ms-fontWeight-semibold", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "NiketJain", "pictureUrl": "https://github.com/NiketJain.png", "name": "Niket Jain", "key": "niketjain" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/default-hover-card", "route": "samples/view/default-hover-card/", "preview": "generated/previews/view-default-hover-card.webp", "previewAlt": "Default Hover Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/default-hover-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "default-hover-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/default-hover-card/default-hover-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/default-hover-card/default-hover-card.json", "sha256": "2d8d1d482de0c319f5e664202378605d68e6814c6434c501e5b1c54c370256a8" } ] }, { "id": "view-samples/in-memoriam-tiles", "family": "view", "slug": "in-memoriam-tiles", "title": "In Memoriam Tiles", "description": "This is a silly sample that shows tombstones for items. It demonstrates custom date formatting, custom tiles (gallery) layout, and safe local image referencing.", "longDescription": [ "This is a silly sample that shows tombstones for items. It demonstrates custom date formatting, custom tiles (gallery) layout, and safe local image referencing." ], "created": "2020-03-31T00:00:00.000Z", "updated": "2020-03-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "getDate", "getMonth", "getYear" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/in-memoriam-tiles", "route": "samples/view/in-memoriam-tiles/", "preview": "generated/previews/view-in-memoriam-tiles.webp", "previewAlt": "In Memoriam Tiles formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/in-memoriam-tiles/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "in-memoriam-tiles.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/in-memoriam-tiles/in-memoriam-tiles.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/in-memoriam-tiles/in-memoriam-tiles.json", "sha256": "e8ccc924f0f13ea062e762ee81d34b03927f1468508735f21f6f7d086879a156" } ] }, { "id": "view-samples/video-navigator", "family": "view", "slug": "video-navigator", "title": "Video Navigator", "description": "Demonstrates the use of dynamic connections in the list webpart while using a custom format. This results in a custom video selection application that changes the embeded video on the page.", "longDescription": [ "This sample demonstrates the use of dynamic connections in the list webpart while using a custom format. The format is applied to a list of YouTube videos with each item containing the shortcode for the video. On a page, the list webpart with the custom view is used. The embed webpart is configured to accept it as a connection. This results in a custom video selection application that changes the embeded video on the page." ], "created": "2020-03-31T00:00:00.000Z", "updated": "2020-03-31T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary--hover", "ms-fontColor-neutralDark" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/video-navigator", "route": "samples/view/video-navigator/", "preview": "generated/previews/view-video-navigator.webp", "previewAlt": "Video Navigator formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/video-navigator/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "video-navigator.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/video-navigator/video-navigator.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/video-navigator/video-navigator.json", "sha256": "aa27bba44bed6f8d9465a026ad18a6add206490e722cdba95d1a86b19b3bf9fd" } ] }, { "id": "view-samples/faqs", "family": "view", "slug": "faqs", "title": "FAQs", "description": "This sample creates a theme-aware format to use when displaying FAQs (Frequently Asked Questions).", "longDescription": [ "This sample creates a theme-aware format to use when displaying FAQs (Frequently Asked Questions)." ], "created": "2020-03-01T00:00:00.000Z", "updated": "2020-03-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Frequently Asked Questions" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toLowerCase", "indexOf", "length", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-borderColor-themeDark", "ms-fontColor-themeSecondary", "ms-fontColor-themeTertiary", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/faqs", "route": "samples/view/faqs/", "preview": "generated/previews/view-faqs.webp", "previewAlt": "FAQs formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/faqs/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/faqs/assets/screenshotWithKeywords.png", "alt": "screenshotWithKeywords" } ], "definitions": [ { "filename": "faqs-with-keywords.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/faqs/faqs-with-keywords.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/faqs/faqs-with-keywords.json", "sha256": "f9a0f5c45eaa57f6ead756fb3b987478af276284610f3a909a630931d5225b41" }, { "filename": "faqs.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/faqs/faqs.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/faqs/faqs.json", "sha256": "093d0e20ddeb2705254e6e5548e09ab09006c059ca0f470a6ce74eff0113361b" } ] }, { "id": "view-samples/custom-header", "family": "view", "slug": "custom-header", "title": "Custom Header", "description": "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 `display` style attribute to `none` (hidden) whenever the `@rowIndex` is not 0 (first row).", "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 `display` style attribute to `none` (hidden) whenever the `@rowIndex` is not 0 (first row)." ], "created": "2020-02-20T00:00:00.000Z", "updated": "2020-02-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-borderColor-neutralQuaternary", "ms-fontColor-white", "ms-fontColor-redDark" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-header", "route": "samples/view/custom-header/", "preview": "generated/previews/view-custom-header.webp", "previewAlt": "Custom Header formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/custom-header/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "custom-header-repeating.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-header/custom-header-repeating.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-header/custom-header-repeating.json", "sha256": "94775433cb76d3b3b7a8fd0669b6731391349c12e5d9a3969465b0a4461d23d7" }, { "filename": "custom-header.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/custom-header/custom-header.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/custom-header/custom-header.json", "sha256": "22f604ae6b2d28de8fbac10df5780de8289d1a2ca4c5e709c15159a4298f90fa" } ] }, { "id": "column-samples/generic-rowIndex-drawing", "family": "column", "slug": "generic-rowIndex-drawing", "title": "Row Index Drawing", "description": "This is a silly format that draws a picture in your view using the @rowIndex token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up.", "longDescription": [ "This is a silly format that draws a picture in your view using the @rowIndex token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up." ], "created": "2020-02-20T00:00:00.000Z", "updated": "2020-02-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "SVG" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralPrimary", "ms-fontColor-yellow" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-rowIndex-drawing", "route": "samples/column/generic-rowIndex-drawing/", "preview": "generated/previews/column-generic-rowIndex-drawing.webp", "previewAlt": "Row Index Drawing formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-rowIndex-drawing/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-rowIndex-drawing.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-rowIndex-drawing/generic-rowIndex-drawing.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-rowIndex-drawing/generic-rowIndex-drawing.json", "sha256": "83f9647253b054fab790ce66a850a779fd0a791e45683a0704e6df4c3f0990aa" } ] }, { "id": "column-samples/generic-substring-status", "family": "column", "slug": "generic-substring-status", "title": "Substring Status", "description": "This format demonstrates using a combination of the substring and indexOf operations to 'split' a value and make style decisions based on portions of the value.", "longDescription": [ "This format demonstrates using a combination of the substring and indexOf operations to 'split' a value and make style decisions based on portions of the value. In this case the status values are separated with a colon (:). 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." ], "created": "2020-02-06T00:00:00.000Z", "updated": "2020-02-06T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "substring" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-redDark", "ms-fontColor-yellow", "ms-fontColor-green" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-substring-status", "route": "samples/column/generic-substring-status/", "preview": "generated/previews/column-generic-substring-status.webp", "previewAlt": "Substring Status formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-substring-status/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-substring-status.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-substring-status/generic-substring-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-substring-status/generic-substring-status.json", "sha256": "c660e09fe930ca4b8f1d2f7363a16a7c3c299bf705f6291248b54e895f094cfa" } ] }, { "id": "view-samples/budget-tracker", "family": "view", "slug": "budget-tracker", "title": "Budget Tracker Sample", "description": "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. ", "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." ], "created": "2020-01-29T00:00:00.000Z", "updated": "2020-01-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Provisioning" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb", "@window.innerWidth" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "TBag", "pictureUrl": "https://github.com/TBag.png", "name": "Todd Baginski", "key": "tbag" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/budget-tracker", "route": "samples/view/budget-tracker/", "preview": "generated/previews/view-budget-tracker.webp", "previewAlt": "Budget Tracker Sample formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/budget-tracker/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "budget-tracker-activity-milestone.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/budget-tracker/budget-tracker-activity-milestone.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/budget-tracker/budget-tracker-activity-milestone.json", "sha256": "31fa23f835c6a738801f07a5168841f8a03d50009931019653c8a28f27f3507d" }, { "filename": "budget-tracker.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/budget-tracker/budget-tracker.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/budget-tracker/budget-tracker.json", "sha256": "99be8315f072162a61c7735c36b5856c1de44846b8e06a33c5c3ed4ab4711996" } ] }, { "id": "view-samples/product-catalog", "family": "view", "slug": "product-catalog", "title": "Product Catalog", "description": "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.", "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." ], "created": "2020-01-29T00:00:00.000Z", "updated": "2020-01-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Provisioning" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@window.innerWidth" ], "FORMATTING-OPERATORS": [ "toString", "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "TBag", "pictureUrl": "https://github.com/TBag.png", "name": "Todd Baginski", "key": "tbag" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/product-catalog", "route": "samples/view/product-catalog/", "preview": "generated/previews/view-product-catalog.webp", "previewAlt": "Product Catalog formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/product-catalog/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "product-catalog-library.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/product-catalog/product-catalog-library.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/product-catalog-library.json", "sha256": "105c8c651161e0be13e1f86eb111841414053455dbb9c45ff7828f8ec902ff6f" }, { "filename": "product-catalog.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/product-catalog/product-catalog.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-catalog/product-catalog.json", "sha256": "63e530ad801b065c0359de0053e63891d11d0d43e99e4c596e91ef3c86b92360" } ] }, { "id": "column-samples/multi-person-teams-chat-link", "family": "column", "slug": "multi-person-teams-chat-link", "title": "Multi-Person Teams Chat Link", "description": "This sample demonstrates creating a deep link to a Microsoft Teams chat. This format works both within Microsoft Teams and within SharePoint Online.", "longDescription": [ "This sample demonstrates creating a deep link to a Microsoft Teams chat. This format works both within Microsoft Teams and within SharePoint Online." ], "created": "2020-01-23T00:00:00.000Z", "updated": "2020-01-23T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Microsoft Teams" ], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "join" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark--hover" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-teams-chat-link", "route": "samples/column/multi-person-teams-chat-link/", "preview": "generated/previews/column-multi-person-teams-chat-link.webp", "previewAlt": "Multi-Person Teams Chat Link formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-teams-chat-link/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-teams-chat-link/assets/screenshotTeams.png", "alt": "screenshotTeams" } ], "definitions": [ { "filename": "multi-person-teams-chat-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-teams-chat-link/multi-person-teams-chat-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-teams-chat-link/multi-person-teams-chat-link.json", "sha256": "ff33bf93fadca034a9ca51d5bc5a2e1c2512d5002d58f7895736077aa36cf7d2" } ] }, { "id": "column-samples/multi-person-facepile", "family": "column", "slug": "multi-person-facepile", "title": "Multi-Person Facepile", "description": "This sample provides rounded images for each person in a multi-select person field.", "longDescription": [ "This sample provides rounded images for each person in a multi-select person field." ], "created": "2019-04-04T00:00:00.000Z", "updated": "2020-01-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "toString", "loopIndex", "join", "length" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-fontColor-neutralSecondary", "ms-bgColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-facepile", "route": "samples/column/multi-person-facepile/", "preview": "generated/previews/column-multi-person-facepile.webp", "previewAlt": "Multi-Person Facepile formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-facepile/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-facepile.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-facepile/multi-person-facepile.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-facepile/multi-person-facepile.json", "sha256": "ffdd38cb92d904799e11b7c9c7ce6a6ca359f1417592c76e3f628c1681cdb654" } ] }, { "id": "column-samples/generic-icon-overlay", "family": "column", "slug": "generic-icon-overlay", "title": "Icon Overlays", "description": "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.", "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." ], "created": "2020-01-09T00:00:00.000Z", "updated": "2020-01-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-black", "ms-fontColor-yellow", "ms-fontColor-themePrimary", "ms-fontColor-green", "ms-fontColor-blue", "ms-fontColor-magentaLight", "ms-fontColor-redDark", "ms-fontColor-red" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Live Preview", "description": "View sample live on Microsoft Lists", "url": "https://lists.live.com/:l:/g/personal/9a047f63f4e26abf/FJtVGK9R4VVIvJszNCR4OtgBYrCAzX_f6rra6dACxzKQmQ?e=fYH1aF" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-icon-overlay", "route": "samples/column/generic-icon-overlay/", "preview": "generated/previews/column-generic-icon-overlay.webp", "previewAlt": "screenshotOverlay", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-icon-overlay/assets/screenshot.png", "alt": "screenshotOverlay" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-icon-overlay/assets/screenshotOverlayMultiple.png", "alt": "screenshotOverlayMultiple" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-icon-overlay/assets/screenshotSimple.png", "alt": "screenshotSimple" } ], "definitions": [ { "filename": "generic-icon-overlay-multiple.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-icon-overlay/generic-icon-overlay-multiple.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/generic-icon-overlay-multiple.json", "sha256": "ccf94f2c7494078e31346d679b22b6e11647d0061c32721b9763cf32d4ef7ff2" }, { "filename": "generic-icon-overlay.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-icon-overlay/generic-icon-overlay.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/generic-icon-overlay.json", "sha256": "841a8689fbe34d44a97dbf0977dfce5fb19c5f392f41d297e20c771d3b071a8b" }, { "filename": "simple-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-icon-overlay/simple-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-icon-overlay/simple-icon.json", "sha256": "49ee86f3e4903192cd60a24c0a2a935f84a8e599d1b414084bd0f7a6549f6965" } ] }, { "id": "view-samples/person-cards", "family": "view", "slug": "person-cards", "title": "Person Cards", "description": "This sample demonstrates creating a basic person card. You can use this as a quick contact list.", "longDescription": [ "This sample demonstrates creating a basic person card. You can use this as a quick contact list." ], "created": "2019-11-01T00:00:00.000Z", "updated": "2019-11-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-neutralLighterAlt", "ms-fontColor-themePrimary--hover" ] }, "authors": [ { "gitHubAccount": "DRamalho92", "pictureUrl": "https://github.com/DRamalho92.png", "name": "David Ramalho", "key": "dramalho92" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/person-cards", "route": "samples/view/person-cards/", "preview": "generated/previews/view-person-cards.webp", "previewAlt": "Person Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/person-cards/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/person-cards/person-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/person-cards/person-cards.json", "sha256": "57055b6e21fb543d72493ac0ffae512d164b36a294a539289c1783e21c481da4" } ] }, { "id": "view-samples/document-library-gallery-card", "family": "view", "slug": "document-library-gallery-card", "title": "Custom Document Library Gallery Card", "description": "This sample uses tileProps element to format the tile layout for document libraries.", "longDescription": [ "This sample uses tileProps element to format the tile layout for document libraries." ], "created": "2019-10-15T00:00:00.000Z", "updated": "2019-10-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Power Automate", "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@thumbnail" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick", "executeFlow", "editProps" ], "FORMATTING-FEATURES": [ "forEach", "hideSelection" ], "CLASSES": [ "ms-fontWeight-semibold", "ms-fontSize-14" ] }, "authors": [ { "gitHubAccount": "NiketJain", "pictureUrl": "https://github.com/NiketJain.png", "name": "Niket Jain", "key": "niketjain" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/document-library-gallery-card", "route": "samples/view/document-library-gallery-card/", "preview": "generated/previews/view-document-library-gallery-card.webp", "previewAlt": "Custom Document Library Gallery Card formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/document-library-gallery-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "document-library-gallery-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/document-library-gallery-card/document-library-gallery-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/document-library-gallery-card/document-library-gallery-card.json", "sha256": "3c1d409eb2f5b93cbd8f6e2ad38e3dfe67be97ce655c783d6048b5ed439aed99" } ] }, { "id": "view-samples/current-year-rowclass", "family": "view", "slug": "current-year-rowclass", "title": "Current Year Row Class", "description": "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.", "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." ], "created": "2019-10-02T00:00:00.000Z", "updated": "2019-10-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "getYear" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeTertiary" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/current-year-rowclass", "route": "samples/view/current-year-rowclass/", "preview": "generated/previews/view-current-year-rowclass.webp", "previewAlt": "Current Year Row Class formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/current-year-rowclass/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "current-year-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/current-year-rowclass/current-year-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/current-year-rowclass/current-year-rowclass.json", "sha256": "3d5e837237141dd9b80da1564b4bfe713083515d6083ef407296757cb642bda8" } ] }, { "id": "column-samples/date-difference", "family": "column", "slug": "date-difference", "title": "Date Difference", "description": "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.", "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." ], "created": "2019-10-02T00:00:00.000Z", "updated": "2019-10-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number", "floor" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-difference", "route": "samples/column/date-difference/", "preview": "generated/previews/column-date-difference.webp", "previewAlt": "Date Difference formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-difference/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-difference.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-difference/date-difference.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-difference/date-difference.json", "sha256": "9b38cc38e3dee45e38c410ac9c42a68f2b275550a51b4c5ef3f547f572a75fb1" } ] }, { "id": "view-samples/product-gallery", "family": "view", "slug": "product-gallery", "title": "Product Gallery", "description": "This sample uses tileProps element to format the tile layout of the view.", "longDescription": [ "This sample uses tileProps element to format the tile layout of the view." ], "created": "2019-09-09T00:00:00.000Z", "updated": "2019-09-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Gallery" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-neutralLighterAlt" ] }, "authors": [ { "gitHubAccount": "rk-menon", "pictureUrl": "https://github.com/rk-menon.png", "name": "Rk Menon", "key": "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/product-gallery", "route": "samples/view/product-gallery/", "preview": "generated/previews/view-product-gallery.webp", "previewAlt": "Product Gallery formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/product-gallery/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "product-gallery.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/product-gallery/product-gallery.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/product-gallery/product-gallery.json", "sha256": "2a1b5bf2e293c41542f913e6435525371e22b640e73bbdf3413509aabb49b9c7" } ] }, { "id": "view-samples/bar-graph", "family": "view", "slug": "bar-graph", "title": "Bar Graph", "description": "This sample shows how to format a list to show the data as a bar graph.", "longDescription": [ "This sample shows how to format a list to show the data as a bar graph." ], "created": "2019-09-02T00:00:00.000Z", "updated": "2019-09-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Charts" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-themeLighterAlt", "ms-bgColor-themeDarker", "ms-fontColor-themeDark", "ms-fontColor-white", "ms-fontColor-white--hover", "ms-font-m" ] }, "authors": [ { "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", "name": "Anoop Tatti", "key": "anoopt" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-graph", "route": "samples/view/bar-graph/", "preview": "generated/previews/view-bar-graph.webp", "previewAlt": "bargraph", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bar-graph/assets/screenshot.png", "alt": "bargraph" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/bar-graph/assets/bargraph.gif", "alt": "bargraph animated" } ], "definitions": [ { "filename": "bar-graph.json", "target": "View formatting", "schemaIssues": [ "/hideSelection must be boolean" ], "download": "generated/definitions/view-samples/bar-graph/bar-graph.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/bar-graph/bar-graph.json", "sha256": "d0edfc1117d55fd2cb1811eb7d043d39f818296cb34c87b207a52ee6f07ac190" } ] }, { "id": "column-samples/location-address", "family": "column", "slug": "location-address", "title": "Display Location Address Details", "description": "Location columns provide several properties that can be accessed to provide more information to users. This sample pulls out sub properties to turn the standard Display Name only to a full address and provides a link to Bing Maps for a given location.", "longDescription": [ "Location columns provide several properties that can be accessed to provide more information to users. This sample pulls out sub properties to turn the standard Display Name only to a full address and provides a link to Bing Maps for a given location." ], "created": "2019-08-21T00:00:00.000Z", "updated": "2019-08-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Location" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/location-address", "route": "samples/column/location-address/", "preview": "generated/previews/column-location-address.webp", "previewAlt": "Display Location Address Details formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/location-address/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "location-address.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/location-address/location-address.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/location-address/location-address.json", "sha256": "31ebf1dbdd281c6e7004044deec47e19ad9ee1b2a71a8f7bcf8a7e5be76f4a48" } ] }, { "id": "view-samples/column-graph", "family": "view", "slug": "column-graph", "title": "Column Graph", "description": "This sample shows how to format a list to show the data as a column graph.", "longDescription": [ "This sample shows how to format a list to show the data as a column graph." ], "created": "2019-08-15T00:00:00.000Z", "updated": "2019-08-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Charts" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-themeLighterAlt", "ms-bgColor-themeDarker", "ms-fontColor-themeDark", "ms-fontColor-white", "ms-fontColor-white--hover", "ms-font-m", "sp-field-dataBars" ] }, "authors": [ { "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", "name": "Anoop Tatti", "key": "anoopt" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/column-graph", "route": "samples/view/column-graph/", "preview": "generated/previews/view-column-graph.webp", "previewAlt": "Column Graph formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/column-graph/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/column-graph/assets/columngraph_with_title.png", "alt": "columngraph_with_title" } ], "definitions": [ { "filename": "column-graph.json", "target": "View formatting", "schemaIssues": [ "/hideSelection must be boolean" ], "download": "generated/definitions/view-samples/column-graph/column-graph.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/column-graph/column-graph.json", "sha256": "495ad8429519b82d57bea6a43faff01b4c1ddde5f15155178bfccae3fe6122cd" } ] }, { "id": "view-samples/twitter-timeline", "family": "view", "slug": "twitter-timeline", "title": "Twitter Timeline", "description": "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.", "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." ], "created": "2019-08-02T00:00:00.000Z", "updated": "2019-08-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-borderColor-neutralLight", "ms-fontColor-black", "ms-fontWeight-semibold", "ms-font-xl", "ms-font-m" ] }, "authors": [ { "gitHubAccount": "aprildunnam", "pictureUrl": "https://github.com/aprildunnam.png", "name": "April Dunham", "key": "aprildunnam" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-timeline", "route": "samples/view/twitter-timeline/", "preview": "generated/previews/view-twitter-timeline.webp", "previewAlt": "twitterFormat", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/twitter-timeline/assets/screenshot.png", "alt": "twitterFormat" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/twitter-timeline/assets/SPTwitter.gif", "alt": "SPTwitter" } ], "definitions": [ { "filename": "twitter-timeline.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/twitter-timeline/twitter-timeline.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/twitter-timeline/twitter-timeline.json", "sha256": "d22b3f428b63b2a6437855024629092471e5c86510fe7b6678eddb7c9a713fef" } ] }, { "id": "view-samples/planner-inspired-task-card", "family": "view", "slug": "planner-inspired-task-card", "title": "Planner Inspired Task Cards", "description": "Formats Task List Items in a Planner Inspired Card View. Uses Fluent UI Icons to designate In Progress, Completed, and Delayed Statuses. Automatically strikes out text for Completed items.", "longDescription": [ "Formats Task List Items in a Planner Inspired Card View. Uses Fluent UI Icons to designate In Progress, Completed, and Delayed Statuses. Automatically strikes out text for Completed items." ], "created": "2019-07-26T00:00:00.000Z", "updated": "2019-07-26T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [ "defaultClick", "delete" ], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themePrimary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-red--hover" ] }, "authors": [ { "gitHubAccount": "aprildunnam", "pictureUrl": "https://github.com/aprildunnam.png", "name": "April Dunham", "key": "aprildunnam" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/planner-inspired-task-card", "route": "samples/view/planner-inspired-task-card/", "preview": "generated/previews/view-planner-inspired-task-card.webp", "previewAlt": "Planner Inspired Task Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/planner-inspired-task-card/assets/screenshot.gif", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/planner-inspired-task-card/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "planner-inspired-task-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/planner-inspired-task-card/planner-inspired-task-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/planner-inspired-task-card/planner-inspired-task-card.json", "sha256": "1ba33a99f71b8aa5b960fd54151950421131c7a57e9710a867b6582918201f80" } ] }, { "id": "column-samples/number-gauge", "family": "column", "slug": "number-gauge", "title": "Number Gauge", "description": "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive.", "longDescription": [ "This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive." ], "created": "2019-07-10T00:00:00.000Z", "updated": "2019-07-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "cos", "sin" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-gauge", "route": "samples/column/number-gauge/", "preview": "generated/previews/column-number-gauge.webp", "previewAlt": "Number Gauge formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-gauge/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-gauge/assets/screenshotReversed.png", "alt": "screenshotReversed" } ], "definitions": [ { "filename": "number-gauge-reversed.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-gauge/number-gauge-reversed.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gauge/number-gauge-reversed.json", "sha256": "a286657efb99fbdbbc3fd953a09a57a3be4e97c03d589f2e8e73c34d956c5b3b" }, { "filename": "number-gauge.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-gauge/number-gauge.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-gauge/number-gauge.json", "sha256": "9f8f1664d48c80bc3748ee5fe4de9094c2929e59c3848e6e87cf099674b22eb7" } ] }, { "id": "column-samples/color-based-smiley-face", "family": "column", "slug": "color-based-smiley-face", "title": "Color Based Emojis", "description": "This sample displays smiley faces (emojis) based on color. The format will add a smiley face (icon) which comes from Fluent UI.", "longDescription": [ "This sample displays smiley faces (emojis) based on color. The format will add a smiley face (icon) which comes from Fluent UI." ], "created": "2019-06-16T00:00:00.000Z", "updated": "2019-06-16T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Status / Progress" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "siddharth-vaghasia", "pictureUrl": "https://github.com/siddharth-vaghasia.png", "name": "Siddharth Vaghasia", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/color-based-smiley-face", "route": "samples/column/color-based-smiley-face/", "preview": "generated/previews/column-color-based-smiley-face.webp", "previewAlt": "display", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/color-based-smiley-face/assets/screenshot.png", "alt": "display" } ], "definitions": [ { "filename": "color-based-smiley-face.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/color-based-smiley-face/color-based-smiley-face.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/color-based-smiley-face/color-based-smiley-face.json", "sha256": "b28f4519dbdf8d9755c698da59b09268ad865fe2da5f1ea2b2cf990cec12e36a" }, { "filename": "color-based-smiley-faceAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/color-based-smiley-face/color-based-smiley-faceAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/color-based-smiley-face/color-based-smiley-faceAST.json", "sha256": "f20b7ed7ffeb78f8019cde7b7da88eede68bf5fb79fd58d550235c6bb2f67e00" } ] }, { "id": "column-samples/file-thumbnail", "family": "column", "slug": "file-thumbnail", "title": "File Thumbnails", "description": "Utilizes the @thumbnail placeholder token to create an inline preview for document libraries.", "longDescription": [ "This sample utilizes the @thumbnail placeholder token to create an inline preview for document libraries. Folders and filetypes where previews are not available will not display at all." ], "created": "2019-05-27T00:00:00.000Z", "updated": "2019-05-27T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Document Library", "Hover Cards" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@thumbnail" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "customCardProps", "directionalHint" ], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" }, { "gitHubAccount": "tecchan1107", "pictureUrl": "https://github.com/tecchan1107.png", "name": "Tetsuya Kawahara", "key": "tecchan1107" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/file-thumbnail", "route": "samples/column/file-thumbnail/", "preview": "generated/previews/column-file-thumbnail.webp", "previewAlt": "File Thumbnails formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/file-thumbnail/assets/screenshot.gif", "alt": "screenshot" } ], "definitions": [ { "filename": "file-thumbnail-lightbox.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/file-thumbnail/file-thumbnail-lightbox.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/file-thumbnail/file-thumbnail-lightbox.json", "sha256": "3a71eae43f21496c2e647fd31d1e55e4c2f79c17cd36dc883bd2d0fe6e0e9a3a" }, { "filename": "file-thumbnail.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/file-thumbnail/file-thumbnail.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/file-thumbnail/file-thumbnail.json", "sha256": "b08909a9b08874f1ae1ed5051ed97703bab3cf81da6590ad91c13a95c731609a" } ] }, { "id": "column-samples/number-data-bar", "family": "column", "slug": "number-data-bar", "title": "Data Bar", "description": "These formats apply background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. These styles are applied using the special column formatting class sp-field-dataBars. The bars are sized differently for different values based on the way the width attribute of the main div is set.", "longDescription": [ "These formats apply background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. These styles are applied using the special column formatting class sp-field-dataBars. The bars are sized differently for different values based on the way the width attribute of the main div is set." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2019-05-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-dataBars" ] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" }, { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-data-bar", "route": "samples/column/number-data-bar/", "preview": "generated/previews/column-number-data-bar.webp", "previewAlt": "Data Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-data-bar/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-data-bar/assets/screenshot-percent.png", "alt": "screenshot-percent" } ], "definitions": [ { "filename": "number-data-bar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-data-bar/number-data-bar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-bar/number-data-bar.json", "sha256": "2c861683e17274e17e4395fc92d4c27c1e15d2bbc0dbebc5cdf4296d19698e14" }, { "filename": "number-data-barAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-data-bar/number-data-barAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-bar/number-data-barAST.json", "sha256": "ec68dd7f25f58fca3c701594617ed17ab3b713daa7ba26caec2eb899c8f8c77c" }, { "filename": "percent-data-bar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-data-bar/percent-data-bar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-bar/percent-data-bar.json", "sha256": "12660ad519f9742d9c6fbaacd7bedcf295bf41e448b21e4f3341059ec8428cf3" }, { "filename": "percent-data-barAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-data-bar/percent-data-barAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-bar/percent-data-barAST.json", "sha256": "f0adf53dc4faca9b7561bcac42268502d4f8f2789bda427827af3f2bcf61dcf8" } ] }, { "id": "column-samples/number-data-bar-multi-color", "family": "column", "slug": "number-data-bar-multi-color", "title": "Multi-Colored Databars", "description": "This column formatting sample demonstrates how to show the number column as data bars with multiple colors.", "longDescription": [ "This column formatting sample demonstrates how to show the number column as data bars with multiple colors." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2019-05-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "ganesh-sanap", "pictureUrl": "https://github.com/ganesh-sanap.png", "name": "Ganesh Sanap", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-data-bar-multi-color", "route": "samples/column/number-data-bar-multi-color/", "preview": "generated/previews/column-number-data-bar-multi-color.webp", "previewAlt": "Multi-Colored Databars formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-data-bar-multi-color/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-data-bar-multi-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-data-bar-multi-color/number-data-bar-multi-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-data-bar-multi-color/number-data-bar-multi-color.json", "sha256": "405db6dbe4b565f4e522e5f1b0ed80b0371d638456b978411cdcd72517222c34" } ] }, { "id": "column-samples/generic-hyperlink-thumbnail", "family": "column", "slug": "generic-hyperlink-thumbnail", "title": "File Thumbnails or Hyperlinks", "description": "This example uses a column to generate a hyperlink to the Item Thumbnail for a document library.", "longDescription": [ "This example uses a column to generate a hyperlink to the Item Thumbnail for a document library." ], "created": "2018-07-17T00:00:00.000Z", "updated": "2019-04-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Document Library" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "josy1024", "pictureUrl": "https://github.com/josy1024.png", "name": "Josef Lahmer", "key": "josy1024" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-hyperlink-thumbnail", "route": "samples/column/generic-hyperlink-thumbnail/", "preview": "generated/previews/column-generic-hyperlink-thumbnail.webp", "previewAlt": "File Thumbnails or Hyperlinks formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-hyperlink-thumbnail/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-hyperlink-thumbnail/assets/screenshot2.png", "alt": "screenshot2" } ], "definitions": [ { "filename": "generic-hyperlink-thumbnail.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnail.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnail.json", "sha256": "3fd585f34c79aab5b88ac1f11c5f3f0e116ea535d16f73fc1f93220c03960923" }, { "filename": "generic-hyperlink-thumbnailAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnailAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnailAST.json", "sha256": "397861c01e8823c4d1eeae5c253561679d6b3e53f81145be1cebed13a7670f38" }, { "filename": "generic-image-thumbnail.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hyperlink-thumbnail/generic-image-thumbnail.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hyperlink-thumbnail/generic-image-thumbnail.json", "sha256": "66b4489504a06669d1ec1b9edd74de0966d579f3a336e2deed6205c4702e408a" } ] }, { "id": "column-samples/multi-choice-foreach", "family": "column", "slug": "multi-choice-foreach", "title": "Multi-Choice forEach", "description": "This sample demonstrates usage of the forEach property to create template elements applied to each choice in a multi-select choice field.", "longDescription": [ "This sample demonstrates usage of the forEach property to create template elements applied to each choice in a multi-select choice field." ], "created": "2019-04-04T00:00:00.000Z", "updated": "2019-04-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "forEach" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-foreach", "route": "samples/column/multi-choice-foreach/", "preview": "generated/previews/column-multi-choice-foreach.webp", "previewAlt": "Multi-Choice forEach formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-foreach/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-foreach.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-foreach/multi-choice-foreach.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-foreach/multi-choice-foreach.json", "sha256": "813182f0399ce71a47c41c13f65cd6ed33b7bcac3008510ed31b47656830e06d" } ] }, { "id": "column-samples/generic-start-flow-conditionally", "family": "column", "slug": "generic-start-flow-conditionally", "title": "Conditionally Launch Flow for Item", "description": "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 sample.", "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 sample." ], "created": "2019-03-15T00:00:00.000Z", "updated": "2019-03-15T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Power Automate" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "executeFlow" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-orangeLight", "ms-fontColor-teal", "ms-fontColor-redDark" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-start-flow-conditionally", "route": "samples/column/generic-start-flow-conditionally/", "preview": "generated/previews/column-generic-start-flow-conditionally.webp", "previewAlt": "Screen Capture", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-start-flow-conditionally/assets/Screenshot.gif", "alt": "Screen Capture" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-start-flow-conditionally/assets/screenshot.png", "alt": "Screenshot" } ], "definitions": [ { "filename": "generic-start-flow-conditionally.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-start-flow-conditionally/generic-start-flow-conditionally.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-start-flow-conditionally/generic-start-flow-conditionally.json", "sha256": "0980357903e4ae2c91553f725501663ff61f140485fbb736de7e7a9d844bfb9d" } ] }, { "id": "view-samples/profile-card", "family": "view", "slug": "profile-card", "title": "User Profile Card", "description": "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.", "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." ], "created": "2019-03-13T00:00:00.000Z", "updated": "2019-03-13T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLight--hover", "ms-bgColor-neutralLighterAlt", "ms-fontColor-themePrimary--hover", "ms-fontColor-magentaLight" ] }, "authors": [ { "gitHubAccount": "ejazhussain", "pictureUrl": "https://github.com/ejazhussain.png", "name": "Ejaz Hussain", "key": "ejazhussain" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/profile-card", "route": "samples/view/profile-card/", "preview": "generated/previews/view-profile-card.webp", "previewAlt": "profile-card", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/profile-card/assets/screenshot.png", "alt": "profile-card" } ], "definitions": [ { "filename": "profile-card.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/profile-card/profile-card.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/profile-card/profile-card.json", "sha256": "7816ee13396082141dfa7a01500572a001aecde5c82ca052db134dd707c6bb75" } ] }, { "id": "column-samples/number-abs-tolerance-comparison", "family": "column", "slug": "number-abs-tolerance-comparison", "title": "Tolerance Comparison", "description": "Display if a value is within the expected tolerance.", "longDescription": [ "Display if a value is within the expected tolerance." ], "created": "2019-03-08T00:00:00.000Z", "updated": "2019-03-08T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "abs" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-trending--up", "sp-field-trending--down" ] }, "authors": [ { "gitHubAccount": "PopWarner", "pictureUrl": "https://github.com/PopWarner.png", "name": "David Warner II", "key": "popwarner" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-abs-tolerance-comparison", "route": "samples/column/number-abs-tolerance-comparison/", "preview": "generated/previews/column-number-abs-tolerance-comparison.webp", "previewAlt": "Tolerance Comparison formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-abs-tolerance-comparison/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-abs-tolerance-comparison.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-abs-tolerance-comparison/number-abs-tolerance-comparison.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-abs-tolerance-comparison/number-abs-tolerance-comparison.json", "sha256": "8ab63fdef02bea28529896d635e0aa4f7fbc99265825c68f40b63f724ae5b0e4" } ] }, { "id": "view-samples/rota-css-table", "family": "view", "slug": "rota-css-table", "title": "Staff Rota Shifts with CSS Table", "description": "This sample demonstrates creating a Rota Shifts table using CSS Table layout by using rowFormatter to customise the entire display of a row.", "longDescription": [ "This sample demonstrates creating a Rota Shifts table using CSS Table layout by using rowFormatter to customise the entire display of a row." ], "created": "2019-03-07T00:00:00.000Z", "updated": "2019-03-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "join" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary", "ms-fontColor-white", "ms-font-m", "sp-row-card" ] }, "authors": [ { "gitHubAccount": "arielkropp", "pictureUrl": "https://github.com/arielkropp.png", "name": "Ariel Kropp", "key": "arielkropp" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/rota-css-table", "route": "samples/view/rota-css-table/", "preview": "generated/previews/view-rota-css-table.webp", "previewAlt": "Staff Rota Shifts with CSS Table formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/rota-css-table/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "rota-css-table.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/rota-css-table/rota-css-table.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/rota-css-table/rota-css-table.json", "sha256": "388320416b4f7b54db1d1439279b7496de97f0e49b7538f9670ea3e74bba7cec" } ] }, { "id": "column-samples/number-icon-progressbar", "family": "column", "slug": "number-icon-progressbar", "title": "Icon Progress Bar", "description": "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.", "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." ], "created": "2019-03-01T00:00:00.000Z", "updated": "2019-03-01T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-green", "ms-fontColor-greenLight", "ms-fontColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "", "pictureUrl": "https://pbs.twimg.com/profile_images/1420442939797409794/dl6xyLe3_400x400.jpg", "name": "Julien Seguin", "key": "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-icon-progressbar", "route": "samples/column/number-icon-progressbar/", "preview": "generated/previews/column-number-icon-progressbar.webp", "previewAlt": "Icon Progress Bar formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-icon-progressbar/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-icon-progressbar.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-icon-progressbar/number-icon-progressbar.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-icon-progressbar/number-icon-progressbar.json", "sha256": "a2b0b4b77624f3cc751728b1e04990fb9ad2466b95235fb24ee8b27463a2dd2a" } ] }, { "id": "view-samples/birthdays", "family": "view", "slug": "birthdays", "title": "Birthdays", "description": "This sample shows how to format a list to show upcoming employee birthdays.", "longDescription": [ "This sample shows how to format a list to show upcoming employee birthdays." ], "created": "2019-02-20T00:00:00.000Z", "updated": "2019-02-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb", "@now" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themeLighterAlt", "ms-fontColor-themePrimary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiary", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontWeight-semilight", "ms-fontSize-l", "ms-fontSize-m", "ms-fontSize-s", "ms-fontSize-xs" ] }, "authors": [ { "gitHubAccount": "aprildunnam", "pictureUrl": "https://github.com/aprildunnam.png", "name": "April Dunham", "key": "aprildunnam" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/birthdays", "route": "samples/view/birthdays/", "preview": "generated/previews/view-birthdays.webp", "previewAlt": "Birthdays formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/birthdays/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "birthdays.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/birthdays/birthdays.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/birthdays/birthdays.json", "sha256": "c6ae0567a4d21f029fc363954d52f4ed58219dc7977582345f44a13f961737ad" } ] }, { "id": "view-samples/alternating-rows", "family": "view", "slug": "alternating-rows", "title": "Alternating Rows", "description": "Highlights every other row using theme colors.", "longDescription": [ "Highlights every other row using theme colors." ], "created": "2019-02-19T00:00:00.000Z", "updated": "2019-02-19T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@rowIndex" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLight--hover", "ms-bgColor-themeLighter" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/alternating-rows", "route": "samples/view/alternating-rows/", "preview": "generated/previews/view-alternating-rows.webp", "previewAlt": "Alternating Rows formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/alternating-rows/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/alternating-rows/assets/screenshotCombined.png", "alt": "screenshotCombined" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/alternating-rows/assets/screenshotFiltered.png", "alt": "screenshotFiltered" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/alternating-rows/assets/screenshotSorted.png", "alt": "screenshotSorted" } ], "definitions": [ { "filename": "alternating-rows.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/alternating-rows/alternating-rows.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/alternating-rows/alternating-rows.json", "sha256": "060bacf2b9a2dc2110e9e916fb1b4b5f8a48df5476d9c19518a6ea9f44e72be8" } ] }, { "id": "column-samples/multi-person-currentuser", "family": "column", "slug": "multi-person-currentuser", "title": "Highlight the Current User (Using a Multi-Person Column)", "description": "This sample uses the @me 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.", "longDescription": [ "This sample uses the @me 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." ], "created": "2019-02-05T00:00:00.000Z", "updated": "2019-02-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "join" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontWeight-semibold" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-currentuser", "route": "samples/column/multi-person-currentuser/", "preview": "generated/previews/column-multi-person-currentuser.webp", "previewAlt": "Highlight the Current User (Using a Multi-Person Column) formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-currentuser/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-currentuser.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-person-currentuser/multi-person-currentuser.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-person-currentuser/multi-person-currentuser.json", "sha256": "5d9cdffd1d65aa502fb8f93881f1b0ff93ff82a34dff47b2dcd9ad05120bb305" } ] }, { "id": "column-samples/multi-choice-icons", "family": "column", "slug": "multi-choice-icons", "title": "Multi-Choice Icons", "description": "This sample demonstrates using the indexOf and join 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't suffer from varying item order or text formatting issues.", "longDescription": [ "This sample demonstrates using the indexOf and join 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't suffer from varying item order or text formatting issues." ], "created": "2019-02-05T00:00:00.000Z", "updated": "2019-02-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Multi-Choice" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "join" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themeDark", "ms-fontColor-neutralLight" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-choice-icons", "route": "samples/column/multi-choice-icons/", "preview": "generated/previews/column-multi-choice-icons.webp", "previewAlt": "Multi-Choice Icons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-choice-icons/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-choice-icons.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/multi-choice-icons/multi-choice-icons.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/multi-choice-icons/multi-choice-icons.json", "sha256": "2527e1fe114ab70d2125b4e3db7dfc87d3918e8af89a9c24adafeb7e9bf8b405" } ] }, { "id": "column-samples/text-contains", "family": "column", "slug": "text-contains", "title": "Text Contains", "description": "This sample demonstrates using the indexOf function (O365 only) to test if text contains a given value. The sample also uses the toLowerCase function to ensure the contains condition is case-insensitive. In this sample, if the text of the current field contains the word 'dead' a class is applied to turn the text red.", "longDescription": [ "This sample demonstrates using the indexOf function (O365 only) to test if text contains a given value. The sample also uses the toLowerCase function to ensure the contains condition is case-insensitive. In this sample, if the text of the current field contains the word 'dead' a class is applied to turn the text red." ], "created": "2019-02-05T00:00:00.000Z", "updated": "2019-02-05T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "indexOf", "toLowerCase" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-redDark" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-contains", "route": "samples/column/text-contains/", "preview": "generated/previews/column-text-contains.webp", "previewAlt": "Text Contains formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-contains/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-contains.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-contains/text-contains.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-contains/text-contains.json", "sha256": "5fbd12f341be581e35d68520375f208961f4f27be671ac222f3d893939531e62" } ] }, { "id": "column-samples/text-bing-map", "family": "column", "slug": "text-bing-map", "title": "Display a Bing Maps Image for a Location", "description": "This template uses Bing Maps staticmap API 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", "longDescription": [ "This template uses Bing Maps staticmap API 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" ], "created": "2019-02-04T00:00:00.000Z", "updated": "2019-02-04T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-borderColor-neutralLighter" ] }, "authors": [ { "gitHubAccount": "aprildunnam", "pictureUrl": "https://github.com/aprildunnam.png", "name": "April Dunham", "key": "aprildunnam" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Microsoft Bing Maps", "description": "Microsoft Bing Maps", "url": "https://docs.microsoft.com/en-us/bingmaps" }, { "name": "Microsoft Bing Static Map API Documentation", "description": "Microsoft Bing Static Map API Documentation", "url": "https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-bing-map", "route": "samples/column/text-bing-map/", "preview": "generated/previews/column-text-bing-map.webp", "previewAlt": "text-bing-map-Screenshot", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-bing-map/assets/screenshot.png", "alt": "text-bing-map-Screenshot" } ], "definitions": [ { "filename": "text-bing-map.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-bing-map/text-bing-map.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-bing-map/text-bing-map.json", "sha256": "63336ca7185c760665dfa6969ff5bdbbbda8726ff9965328b1f8980a6c4ab130" } ] }, { "id": "view-samples/document-library-thumbnails", "family": "view", "slug": "document-library-thumbnails", "title": "Document Library Thumbnails", "description": "This sample demonstrates showing files in a document libary as preview images.", "longDescription": [ "This sample demonstrates showing files in a document libary as preview images." ], "created": "2019-02-02T00:00:00.000Z", "updated": "2019-02-02T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "ContentType" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-themePrimary--hover", "ms-bgColor-themeLighterAlt", "ms-borderColor-neutralLight", "ms-fontColor-neutralSecondary", "ms-fontColor-white--hover", "ms-fontWeight-regular", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "Ravikadri", "pictureUrl": "https://github.com/Ravikadri.png", "name": "Ravi Chandra", "key": "ravikadri" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/document-library-thumbnails", "route": "samples/view/document-library-thumbnails/", "preview": "generated/previews/view-document-library-thumbnails.webp", "previewAlt": "document-library-thumbnails", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/document-library-thumbnails/assets/screenshot.png", "alt": "document-library-thumbnails" } ], "definitions": [ { "filename": "document-library-thumbnails.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/document-library-thumbnails/document-library-thumbnails.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/document-library-thumbnails/document-library-thumbnails.json", "sha256": "ee691cd98cb9a5df5d414f64c47ffdb472faccf28f82523e08cb02f5c2664265" } ] }, { "id": "view-samples/multi-person-currentuser-rowclass", "family": "view", "slug": "multi-person-currentuser-rowclass", "title": "Current User's Rows (Using a Multi-Person Column)", "description": "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 `[$AssignedTo]` portion of the expression.", "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 `[$AssignedTo]` portion of the expression." ], "created": "2019-01-29T00:00:00.000Z", "updated": "2019-01-29T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Multi-Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [ "indexOf", "join" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLight", "ms-bgColor-themeLighterAlt--hover" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/multi-person-currentuser-rowclass", "route": "samples/view/multi-person-currentuser-rowclass/", "preview": "generated/previews/view-multi-person-currentuser-rowclass.webp", "previewAlt": "Current User's Rows (Using a Multi-Person Column) formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/multi-person-currentuser-rowclass/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-person-currentuser-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/multi-person-currentuser-rowclass/multi-person-currentuser-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/multi-person-currentuser-rowclass/multi-person-currentuser-rowclass.json", "sha256": "8e3e8fdb67029f7a28083d2da3a37ce868cb31474a1b756cbf7d87595e1d46ce" } ] }, { "id": "view-samples/status-blocks", "family": "view", "slug": "status-blocks", "title": "Status Blocks", "description": "This sample demonstrates basic row display with conditional logic to adjust the background-color based on a Status field.", "longDescription": [ "This sample demonstrates basic row display with conditional logic to adjust the background-color based on a Status field." ], "created": "2019-01-18T00:00:00.000Z", "updated": "2019-01-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "sp-row-card", "sp-row-listPadding", "sp-row-title" ] }, "authors": [ { "gitHubAccount": "skaggej", "pictureUrl": "https://github.com/skaggej.png", "name": "Eric Skaggs", "key": "skaggej" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/status-blocks", "route": "samples/view/status-blocks/", "preview": "generated/previews/view-status-blocks.webp", "previewAlt": "Status Blocks formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/status-blocks/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "status-blocks.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/status-blocks/status-blocks.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/status-blocks/status-blocks.json", "sha256": "0bff98c8ed806b0af76939691d816dca675297d74f85bc18ea1a93d84bc460bb" } ] }, { "id": "view-samples/contenttype-variations", "family": "view", "slug": "contenttype-variations", "title": "ContentType Variations", "description": "Provides an example of customizing your format based on the item's content type. When an item's ContentType is Apple and the apple type is Green then green is used in the format. If it's Apple with a different type, red is used. Otherwise, orange is used.", "longDescription": [ "Provides an example of customizing your format based on the item's content type. When an item's ContentType is Apple and the apple type is Green then green is used in the format. If it's Apple with a different type, red is used. Otherwise, orange is used." ], "created": "2018-12-19T00:00:00.000Z", "updated": "2019-01-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Provisioning" ], "LIST-COLUMN-TYPE": [ "ContentType" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-white", "ms-bgColor-orangeLighter--hover", "ms-bgColor-red--hover", "ms-bgColor-greenLight--hover", "ms-borderColor-orangeLight", "ms-borderColor-redDark", "ms-borderColor-green", "ms-fontColor-white--hover", "ms-fontColor-orangeLight", "ms-fontColor-redDark", "ms-fontColor-green", "ms-fontWeight-regular", "ms-fontWeight-semibold", "ms-fontSize-xl", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/contenttype-variations", "route": "samples/view/contenttype-variations/", "preview": "generated/previews/view-contenttype-variations.webp", "previewAlt": "ContentType Variations formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/contenttype-variations/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "contenttype-variations.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/contenttype-variations/contenttype-variations.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/contenttype-variations/contenttype-variations.json", "sha256": "a97d68c3779789ba288850549abebce653c8d579ccf079af05b85142afc592b0" } ] }, { "id": "view-samples/generic-numeric-average-comparison", "family": "view", "slug": "generic-numeric-average-comparison", "title": "Numeric Average Comparison", "description": "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.", "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." ], "created": "2018-11-07T00:00:00.000Z", "updated": "2018-11-07T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "sp-row-card" ] }, "authors": [ { "gitHubAccount": "PopWarner", "pictureUrl": "https://github.com/PopWarner.png", "name": "David Warner II", "key": "popwarner" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/generic-numeric-average-comparison", "route": "samples/view/generic-numeric-average-comparison/", "preview": "generated/previews/view-generic-numeric-average-comparison.webp", "previewAlt": "Numeric Average Comparison formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/generic-numeric-average-comparison/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-numeric-average-comparison.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison.json", "sha256": "5c3c379c1fbb9355d89d6e2995b1f6dcc890b9871d28a0fcc5da0a99297f9aa9" } ] }, { "id": "view-samples/request-sign-off", "family": "view", "slug": "request-sign-off", "title": "Request Sign-off", "description": "This sample provides a custom view to focus on files within a document library that need to be approved. A Power Automate flow is included to request sign-off (and to launch that flow directly from the view). This format provides a better visual indication of where documents are in the approval process.", "longDescription": [ "This sample provides a custom view to focus on files within a document library that need to be approved. A Power Automate flow is included to request sign-off (and to launch that flow directly from the view). This format provides a better visual indication of where documents are in the approval process." ], "created": "2018-10-09T00:00:00.000Z", "updated": "2018-10-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Provisioning", "Icons", "Power Automate" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [ "toLocaleString", "toLocaleDateString" ], "FORMATTING-ACTIONS": [ "defaultClick", "executeFlow", "editProps" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-bgColor-yellow", "ms-bgColor-redDark", "ms-bgColor-green", "ms-borderColor-neutralLight", "ms-borderColor-redDark", "ms-fontColor-neutralPrimary", "ms-fontColor-redDark", "ms-fontWeight-semibold", "ms-fontWeight-bold", "ms-fontSize-xl", "ms-fontSize-l", "ms-fontSize-s", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" }, { "gitHubAccount": "TBag", "pictureUrl": "https://github.com/TBag.png", "name": "Todd Baginski", "key": "tbag" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/request-sign-off", "route": "samples/view/request-sign-off/", "preview": "generated/previews/view-request-sign-off.webp", "previewAlt": "Request Sign-off formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/request-sign-off/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/request-sign-off/assets/document-library-mobile.jpg", "alt": "screenshot mobile" } ], "definitions": [ { "filename": "request-sign-off.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/request-sign-off/request-sign-off.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/request-sign-off/request-sign-off.json", "sha256": "9ce9785b8d1bc3dd6704d710cc5334fda2f0d866741404b2d0cdd865c3504188" } ] }, { "id": "view-samples/resource-catalog", "family": "view", "slug": "resource-catalog", "title": "Resource Catalog Sample", "description": "SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to implement a marketing resources catalog. This sample defines a custom view to bring focus to the status of items in the resource catalog. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and profile pictures.", "longDescription": [ "SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to implement a marketing resources catalog. This sample defines a custom view to bring focus to the status of items in the resource catalog. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and profile pictures." ], "created": "2018-10-09T00:00:00.000Z", "updated": "2018-10-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [ "toLocaleDateString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-borderColor-neutralLight", "ms-fontWeight-semibold", "ms-font-xl", "ms-font-m", "ms-fontSize-sPlus" ] }, "authors": [ { "gitHubAccount": "TBag", "pictureUrl": "https://github.com/TBag.png", "name": "Todd Baginski", "key": "tbag" }, { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/resource-catalog", "route": "samples/view/resource-catalog/", "preview": "generated/previews/view-resource-catalog.webp", "previewAlt": "Resource Catalog Sample formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/resource-catalog/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "resource-catalog.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/resource-catalog/resource-catalog.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/resource-catalog/resource-catalog.json", "sha256": "03cfdc24a19addd211b8def5be3afb6cd95f7c35ae1ee699490429b9051da169" } ] }, { "id": "view-samples/retail-accounts", "family": "view", "slug": "retail-accounts", "title": "Retail Accounts", "description": "SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to manage retail stores. This sample defines a custom view to bring focus to the status of store locations. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and Bing maps.", "longDescription": [ "SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to manage retail stores. This sample defines a custom view to bring focus to the status of store locations. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and Bing maps." ], "created": "2018-10-09T00:00:00.000Z", "updated": "2018-10-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "Number" ], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-bgColor-redDark", "ms-bgColor-green", "ms-borderColor-neutralLight", "ms-borderColor-neutralLighter", "ms-fontColor-themePrimary", "ms-fontColor-white", "ms-fontWeight-bold", "ms-fontWeight-light", "ms-fontSize-su", "ms-fontSize-xl", "ms-fontSize-mPlus", "ms-fontSize-m" ] }, "authors": [ { "gitHubAccount": "TBag", "pictureUrl": "https://github.com/TBag.png", "name": "Todd Baginski", "key": "tbag" }, { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/retail-accounts", "route": "samples/view/retail-accounts/", "preview": "generated/previews/view-retail-accounts.webp", "previewAlt": "Retail Accounts formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/retail-accounts/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "retail-accounts.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/retail-accounts/retail-accounts.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/retail-accounts/retail-accounts.json", "sha256": "3c48558c8f5408bd4c68edb0043997495d753b89513b2d4b8c49fe4560dba0be" } ] }, { "id": "view-samples/risk-score-rowclass", "family": "view", "slug": "risk-score-rowclass", "title": "Risk Score Indicator", "description": "A number column is evaluated against tiers of values to provide colors corresponding to score ranges. ", "longDescription": [ "A number column is evaluated against tiers of values to provide colors corresponding to score ranges. " ], "created": "2018-09-09T00:00:00.000Z", "updated": "2018-09-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-yellow", "ms-bgColor-orangeLighter", "ms-bgColor-red", "ms-bgColor-green", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "sohailmerchant", "pictureUrl": "https://github.com/sohailmerchant.png", "name": "S Merchant", "key": "sohailmerchant" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/risk-score-rowclass", "route": "samples/view/risk-score-rowclass/", "preview": "generated/previews/view-risk-score-rowclass.webp", "previewAlt": "risk-score", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/risk-score-rowclass/assets/screenshot.png", "alt": "risk-score" } ], "definitions": [ { "filename": "risk-score-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/risk-score-rowclass/risk-score-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/risk-score-rowclass/risk-score-rowclass.json", "sha256": "59c5284a5ada55782bb4ac3895e7699f36188b6784761095a2136391392e2fdd" } ] }, { "id": "view-samples/ryg-status-rowclass", "family": "view", "slug": "ryg-status-rowclass", "title": "RYG Status", "description": "A status column is evaluated to provide colors corresponding to status. This format uses the values Red, Yellow, Green, and Amber but you could easily extend this to fit your own color-coded system by adding or removing nested conditions.", "longDescription": [ "A status column is evaluated to provide colors corresponding to status. This format uses the values Red, Yellow, Green, and Amber but you could easily extend this to fit your own color-coded system by adding or removing nested conditions." ], "created": "2018-09-09T00:00:00.000Z", "updated": "2018-09-09T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-yellow", "ms-bgColor-orangeLighter", "ms-bgColor-red", "ms-bgColor-green", "ms-fontColor-white" ] }, "authors": [ { "gitHubAccount": "sohailmerchant", "pictureUrl": "https://github.com/sohailmerchant.png", "name": "S Merchant", "key": "sohailmerchant" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/ryg-status-rowclass", "route": "samples/view/ryg-status-rowclass/", "preview": "generated/previews/view-ryg-status-rowclass.webp", "previewAlt": "ryg-status", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/ryg-status-rowclass/assets/screenshot.png", "alt": "ryg-status" } ], "definitions": [ { "filename": "ryg-status-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/ryg-status-rowclass/ryg-status-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/ryg-status-rowclass/ryg-status-rowclass.json", "sha256": "0ef4de68dff24f31c646d64b9b19bb08e7480b51ec18cec89ab14b5a4a2c0685" } ] }, { "id": "column-samples/generic-centered-content", "family": "column", "slug": "generic-centered-content", "title": "Centered Content", "description": "Demonstrates making your content be both vertically and horizontally centered (in the middle) within the cell.", "longDescription": [ "This is a basic sample that demonstrates making your content be both vertically and horizontally centered (in the middle) within the cell." ], "created": "2018-08-24T00:00:00.000Z", "updated": "2018-08-24T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-centered-content", "route": "samples/column/generic-centered-content/", "preview": "generated/previews/column-generic-centered-content.webp", "previewAlt": "Centered Content formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-centered-content/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-centered-content.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-centered-content/generic-centered-content.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-centered-content/generic-centered-content.json", "sha256": "41163a9f20bf0895fe74ead1c501d9422a59085937151b33f5c6ff27d5ece4f8" } ] }, { "id": "view-samples/contact-cards", "family": "view", "slug": "contact-cards", "title": "Contact Cards", "description": "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:", "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:" ], "created": "2018-08-22T00:00:00.000Z", "updated": "2018-08-22T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick", "share", "delete", "editProps" ], "FORMATTING-FEATURES": [ "hideSelection", "rowFormatter" ], "CLASSES": [ "ms-bgColor-neutralLighter", "ms-fontColor-themePrimary", "ms-fontColor-themePrimary--hover", "ms-fontColor-neutralPrimary", "ms-fontColor-neutralSecondary", "ms-fontColor-neutralTertiary", "ms-fontColor-red--hover", "ms-fontWeight-semibold", "ms-fontWeight-regular", "ms-fontWeight-semilight", "ms-fontSize-l", "ms-fontSize-m", "ms-fontSize-sPlus", "ms-fontSize-s", "ms-fontSize-xs" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/contact-cards", "route": "samples/view/contact-cards/", "preview": "generated/previews/view-contact-cards.webp", "previewAlt": "Contact Cards formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/contact-cards/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/contact-cards/assets/screenshotResponsive.png", "alt": "screenshotResponsive" } ], "definitions": [ { "filename": "contact-cards.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/contact-cards/contact-cards.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/contact-cards/contact-cards.json", "sha256": "0640db697d6cc8fdadf027163f5d8e8f07947f34814daa651893a7d19483c956" } ] }, { "id": "view-samples/person-currentuser-rowclass", "family": "view", "slug": "person-currentuser-rowclass", "title": "Current User's Rows", "description": "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 [$AssignedTo] portion of the expression.", "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 [$AssignedTo] portion of the expression." ], "created": "2018-08-21T00:00:00.000Z", "updated": "2018-08-21T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "ms-bgColor-themeLight", "ms-bgColor-themeLighterAlt--hover" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/person-currentuser-rowclass", "route": "samples/view/person-currentuser-rowclass/", "preview": "generated/previews/view-person-currentuser-rowclass.webp", "previewAlt": "Current User's Rows formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/person-currentuser-rowclass/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/person-currentuser-rowclass/assets/screenshotCombined.png", "alt": "screenshotCombined" } ], "definitions": [ { "filename": "person-currentuser-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/person-currentuser-rowclass/person-currentuser-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/person-currentuser-rowclass/person-currentuser-rowclass.json", "sha256": "ef3f340741dfd280bab25a764d3a6b9c641faaa8dd86a366721c49333577afb3" } ] }, { "id": "column-samples/currency-symbol-concatenation", "family": "column", "slug": "currency-symbol-concatenation", "title": "Concatenate Currency Symbol", "description": "This sample will allow the users to concatenate a currency symbol(£, $ ... 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.", "longDescription": [ "Currency column is currently not supported, hence this sample will allow the users to concatenate a currency symbol(£, $ ... 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." ], "created": "2018-01-15T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Currency" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "sohailmerchant", "pictureUrl": "https://github.com/sohailmerchant.png", "name": "S Merchant", "key": "sohailmerchant" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/currency-symbol-concatenation", "route": "samples/column/currency-symbol-concatenation/", "preview": "generated/previews/column-currency-symbol-concatenation.webp", "previewAlt": "budgetcolumnformating", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/currency-symbol-concatenation/assets/screenshot.png", "alt": "budgetcolumnformating" } ], "definitions": [ { "filename": "addsymbolonly.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/currency-symbol-concatenation/addsymbolonly.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/currency-symbol-concatenation/addsymbolonly.json", "sha256": "533ca449f7b0c58186e16b1e0ca5a397f9783ee592f71d54b69af2923963b999" }, { "filename": "currency-symbol-concatenation.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/currency-symbol-concatenation/currency-symbol-concatenation.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/currency-symbol-concatenation/currency-symbol-concatenation.json", "sha256": "154c674e7e42bfc6017d9f1fc9fadf55fc8fa7da3c1087a9989fed33f158833d" }, { "filename": "currency-symbol-concatenationAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/currency-symbol-concatenation/currency-symbol-concatenationAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/currency-symbol-concatenation/currency-symbol-concatenationAST.json", "sha256": "55d24e99a1e16ea87131d7aa203beebdb28b131fcb83b8db9b0950ddce2caa5d" } ] }, { "id": "column-samples/number-conditional-progress-color", "family": "column", "slug": "number-conditional-progress-color", "title": "Conditional Progress Color", "description": "This sample demonstrates displaying progress bar with conditional color based on the value.", "longDescription": [ "This sample demonstrates displaying progress bar with conditional color based on the value." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-alert", "sp-css-backgroundColor-errorBackground40", "sp-css-borderTop-errorBorder", "ms-fontColor-sharedOrange20", "ms-fontColor-sharedGreenCyan10", "sp-css-backgroundColor-warningBackground40", "sp-css-borderTop-warningBorder", "sp-css-backgroundColor-successBackground40", "sp-css-borderTop-successBorder" ] }, "authors": [ { "gitHubAccount": "AriGunawan", "pictureUrl": "https://github.com/AriGunawan.png", "name": "Ari Gunawan", "key": "arigunawan" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-conditional-progress-color", "route": "samples/column/number-conditional-progress-color/", "preview": "generated/previews/column-number-conditional-progress-color.webp", "previewAlt": "Conditional Progress Color formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-conditional-progress-color/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-conditional-progress-color.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-conditional-progress-color/number-conditional-progress-color.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-conditional-progress-color/number-conditional-progress-color.json", "sha256": "6b1e2088ea8bba8ebacffe286afb5a70d25858e19a254d3d3c5eebda964c93c3" } ] }, { "id": "column-samples/text-conditional-format", "family": "column", "slug": "text-conditional-format", "title": "Conditional Text Formatting (Severity)", "description": "You can apply conditional formatting to text or choice fields that might contain a fixed set of values. This sample applies different classes depending on whether the value of the field is Done, In Review, Blocked, or another value.", "longDescription": [ "You can apply conditional formatting to text or choice fields that might contain a fixed set of values. This sample applies different classes depending on whether the value of the field is Done, In Review, Blocked, or another value." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralSecondary", "sp-field-severity--good", "sp-field-severity--low", "sp-field-severity--warning", "sp-field-severity--severeWarning", "sp-field-severity--blocked" ] }, "authors": [ { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-conditional-format", "route": "samples/column/text-conditional-format/", "preview": "generated/previews/column-text-conditional-format.webp", "previewAlt": "Conditional Text Formatting (Severity) formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-conditional-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-conditional-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-conditional-format/text-conditional-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-conditional-format/text-conditional-format.json", "sha256": "5b52ec471993df5dc9ff8b4ff7dab38e3439afdf6eb4c3fb33fb329e760056bb" }, { "filename": "text-conditional-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-conditional-format/text-conditional-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-conditional-format/text-conditional-formatAST.json", "sha256": "8351c0acf5e7e65d1b8372362d2d3d6ad5a2391f608ed6eb810fbdb2d083c728" } ] }, { "id": "column-samples/generic-staticmap", "family": "column", "slug": "generic-staticmap", "title": "Display a Google Maps Image for a Location", "description": "This template takes advantage of Google Maps' staticmap API which generates an image using a parameterized URL.", "longDescription": [ "This template takes advantage of Google Maps' staticmap API which generates an image using a parameterized URL." ], "created": "2018-03-21T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-staticmap", "route": "samples/column/generic-staticmap/", "preview": "generated/previews/column-generic-staticmap.webp", "previewAlt": "Display a Google Maps Image for a Location formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-staticmap/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-staticmap.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-staticmap/generic-staticmap.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-staticmap/generic-staticmap.json", "sha256": "1a5347efa285f0867e59bb90e7d24f28867606910e919d99eeabd44f73feab6e" }, { "filename": "generic-staticmapAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-staticmap/generic-staticmapAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-staticmap/generic-staticmapAST.json", "sha256": "0fb2972a4682ac3ed80e406e973c68bd582dbcb14c21a725e5bcb662683aff9d" } ] }, { "id": "column-samples/person-roundimage-format", "family": "column", "slug": "person-roundimage-format", "title": "Display a Person's Profile Picture in a Circle", "description": "This sample applies styles to a parent div element and a child img element to show a person's profile picture in a circle.", "longDescription": [ "This sample applies styles to a parent div element and a child img element to show a person's profile picture in a circle." ], "created": "2018-03-21T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-roundimage-format", "route": "samples/column/person-roundimage-format/", "preview": "generated/previews/column-person-roundimage-format.webp", "previewAlt": "Display a Person's Profile Picture in a Circle formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-roundimage-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-roundimage-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-roundimage-format/person-roundimage-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-roundimage-format/person-roundimage-format.json", "sha256": "a73e334d357fdecc0ec29c415632e4185344db194f82b471e523c8f27f120d52" }, { "filename": "person-roundimage-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-roundimage-format/person-roundimage-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-roundimage-format/person-roundimage-formatAST.json", "sha256": "0857f2511786fd87d2e24645abffecd3a6cb2f47636ba9b8999f9e7975d46309" } ] }, { "id": "column-samples/picture-roundimage-format", "family": "column", "slug": "picture-roundimage-format", "title": "Display a Picture Column in a Circle", "description": "This sample applies styles to a parent div element and a child img element to show a picture column in a circle.", "longDescription": [ "This sample applies styles to a parent div element and a child img element to show a picture column in a circle." ], "created": "2018-03-21T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Picture" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/picture-roundimage-format", "route": "samples/column/picture-roundimage-format/", "preview": "generated/previews/column-picture-roundimage-format.webp", "previewAlt": "Display a Picture Column in a Circle formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/picture-roundimage-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "picture-roundimage-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/picture-roundimage-format/picture-roundimage-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/picture-roundimage-format/picture-roundimage-format.json", "sha256": "6e324f3afe2e13d1fc031736153b67ab8220d6bd0b4e234b0f2835d003dc9e7a" } ] }, { "id": "column-samples/generic-hyperlink-values", "family": "column", "slug": "generic-hyperlink-values", "title": "Dynamic Links", "description": "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 + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. 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.", "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 + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. 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." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-hyperlink-values", "route": "samples/column/generic-hyperlink-values/", "preview": "generated/previews/column-generic-hyperlink-values.webp", "previewAlt": "Dynamic Links formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-hyperlink-values/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-hyperlink-values.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hyperlink-values/generic-hyperlink-values.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hyperlink-values/generic-hyperlink-values.json", "sha256": "60d3e5633ba3def708b31c6e9d033390785bb436f0bd96b09068d8cd8109c7ce" }, { "filename": "generic-hyperlink-valuesAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-hyperlink-values/generic-hyperlink-valuesAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-hyperlink-values/generic-hyperlink-valuesAST.json", "sha256": "9abd383b39fca7ed0be09036b7ecb3bda277218ea11e36fd6d9f459e5c0f04b0" } ] }, { "id": "column-samples/text-isbn-image", "family": "column", "slug": "text-isbn-image", "title": "ISBN to Book Cover Image", "description": "This example retrieves book cover images based on their ISBN numbers by utilizing the Open Library Covers API. The API works by building a cover image URL with the ISBN.", "longDescription": [ "This example retrieves book cover images based on their ISBN numbers by utilizing the Open Library Covers API. The API works by building a cover image URL with the ISBN." ], "created": "2017-11-27T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "aaronmi", "pictureUrl": "https://github.com/aaronmi.png", "name": "Aaron Miao", "key": "aaronmi" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Open Library Covers API", "description": "Open Library Covers API", "url": "https://openlibrary.org/dev/docs/api/covers" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-isbn-image", "route": "samples/column/text-isbn-image/", "preview": "generated/previews/column-text-isbn-image.webp", "previewAlt": "text-isbn-image", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-isbn-image/assets/screenshot.png", "alt": "text-isbn-image" } ], "definitions": [ { "filename": "text-isbn-image.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-isbn-image/text-isbn-image.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-isbn-image/text-isbn-image.json", "sha256": "6a88736b481df0641a69e10179f905cab5f811c305d22b003afa160b64af4180" }, { "filename": "text-isbn-imageAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-isbn-image/text-isbn-imageAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-isbn-image/text-isbn-imageAST.json", "sha256": "62d98f1ea5072a7222c18c04a20768379e2d200fc10c9b87370e22d7364f1304" } ] }, { "id": "column-samples/number-conditional-format", "family": "column", "slug": "number-conditional-format", "title": "Minimum Value Highlight", "description": "This example uses the conditional operator ? to apply a class (sp-field-severity--warning) to the parent div 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's greater than 70.", "longDescription": [ "This example uses the conditional operator ? to apply a class (sp-field-severity--warning) to the parent div 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's greater than 70." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-severity--warning" ] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-conditional-format", "route": "samples/column/number-conditional-format/", "preview": "generated/previews/column-number-conditional-format.webp", "previewAlt": "Minimum Value Highlight formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-conditional-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-conditional-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-conditional-format/number-conditional-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-conditional-format/number-conditional-format.json", "sha256": "e1d0a217b7b4cfe66481911eb134a1fc19f080540f72a42e5471ffdeb4513e85" }, { "filename": "number-conditional-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-conditional-format/number-conditional-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-conditional-format/number-conditional-formatAST.json", "sha256": "05b366e0195905c7e38d02e3070637cd210951b3c8817bed5154537561aa373d" } ] }, { "id": "column-samples/number-piechart", "family": "column", "slug": "number-piechart", "title": "Pie Chart", "description": "This example renders whole pie in neutralLight with radius 50 and the number% (column value) as a slice of the pie in blue using `` with `` tags. The number% displayed at the bottom of the pie in neutralPrimary.", "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 `` with `` tags. The number% displayed at the bottom of the pie in neutralPrimary." ], "created": "2017-12-13T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString", "sin", "cos" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralPrimary", "ms-bgColor-neutralLight", "ms-fontWeight-light", "ms-fontSize-xl" ] }, "authors": [ { "gitHubAccount": "aaronmi", "pictureUrl": "https://github.com/aaronmi.png", "name": "Aaron Miao", "key": "aaronmi" }, { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-piechart", "route": "samples/column/number-piechart/", "preview": "generated/previews/column-number-piechart.webp", "previewAlt": "number-piechart", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-piechart/assets/screenshot.png", "alt": "number-piechart" } ], "definitions": [ { "filename": "number-piechart.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-piechart/number-piechart.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-piechart/number-piechart.json", "sha256": "aac325aa285a4b1b19ce2be912cda3287700e8104ea2eadefe9c18db8e890f4e" }, { "filename": "number-piechartAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-piechart/number-piechartAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-piechart/number-piechartAST.json", "sha256": "9cd9842263e3c9feda80872d8be546c95a77da40521137c1455863c174aa9005" } ] }, { "id": "column-samples/generic-project-management", "family": "column", "slug": "generic-project-management", "title": "Project Indicator Formats", "description": "Three related formats for use in project management.", "longDescription": [ "Three related formats for use in project management." ], "created": "2017-11-10T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-white", "ms-bgColor-yellow", "ms-bgColor-orange", "ms-bgColor-orangeLight", "ms-bgColor-orangeLighter", "ms-bgColor-red", "ms-bgColor-green", "sp-field-trending--up", "sp-field-trending--down" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-project-management", "route": "samples/column/generic-project-management/", "preview": "generated/previews/column-generic-project-management.webp", "previewAlt": "Project Indicator Formats formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-project-management/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-project-management/assets/screenshot2.png", "alt": "screenshot2" }, { "type": "image", "order": 102, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-project-management/assets/screenshot3.png", "alt": "screenshot3" }, { "type": "image", "order": 103, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-project-management/assets/screenshot4.png", "alt": "screenshot4" } ], "definitions": [ { "filename": "generic-project-management.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/generic-project-management.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/generic-project-management.json", "sha256": "1ab1dfc45c70340a4438e7c3d3e12a56d5ef45c0755f7264208589a69ef8efc9" }, { "filename": "generic-project-managementAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/generic-project-managementAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/generic-project-managementAST.json", "sha256": "b6a9f169626db5a7b282b26cc0cd953529c8e2a70da15f20c24858bb659a253c" }, { "filename": "risk-level-change-status.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/risk-level-change-status.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/risk-level-change-status.json", "sha256": "36a746a7b0ca68fc96f070e92dcb820e015475fa72ed54cf92bc27aaa703c80a" }, { "filename": "risk-level-change-statusAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/risk-level-change-statusAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/risk-level-change-statusAST.json", "sha256": "910fe7f7f6ff03fe0a3c9a89ba78a33ff3075b9cb9d4cf04c12df138028f0ce3" }, { "filename": "risk-score.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/risk-score.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/risk-score.json", "sha256": "a0206c39b9e4a063fbd9c95f61b50bbc50a541c58ba591d4c94538dd52c7ad32" }, { "filename": "risk-scoreAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-project-management/risk-scoreAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-project-management/risk-scoreAST.json", "sha256": "7ef05e63fb9dca2756379888914584ad4928301f0c5ba6835f9c164abdd1cbe0" } ] }, { "id": "column-samples/number-trending-icon", "family": "column", "slug": "number-trending-icon", "title": "Show trending up/trending down icons ", "description": "These formats rely on two number fields, Before and After, for which the values can be compared. They show the appropriate trending icon next to the value of the After field, depending on that field's value compared to the value in Before. The sp-field-trending--up class is used when After's value is higher; the sp-field-trending--down class is used when After's value is lower. No icon is shown when they are equal (padding is added to keep consistent alignment).", "longDescription": [ "These formats rely on two number fields, Before and After, for which the values can be compared. They show the appropriate trending icon next to the value of the After field, depending on that field's value compared to the value in Before. The sp-field-trending--up class is used when After's value is higher; the sp-field-trending--down class is used when After's value is lower. No icon is shown when they are equal (padding is added to keep consistent alignment)." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [ "toString" ], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-trending--up", "sp-field-trending--down" ] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" }, { "gitHubAccount": "PopWarner", "pictureUrl": "https://github.com/PopWarner.png", "name": "David Warner II", "key": "popwarner" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-trending-icon", "route": "samples/column/number-trending-icon/", "preview": "generated/previews/column-number-trending-icon.webp", "previewAlt": "Show trending up/trending down icons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-trending-icon/assets/screenshot.png", "alt": "screenshot" }, { "type": "image", "order": 101, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-trending-icon/assets/screenshotWithDifference.png", "alt": "screenshotWithDifference" } ], "definitions": [ { "filename": "number-trending-icon-with-difference.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-trending-icon/number-trending-icon-with-difference.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-trending-icon/number-trending-icon-with-difference.json", "sha256": "040e7f72c935a1df5b14f013038b56b793496bd0069e194856ec63a1952f1c05" }, { "filename": "number-trending-icon-with-differenceAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-trending-icon/number-trending-icon-with-differenceAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-trending-icon/number-trending-icon-with-differenceAST.json", "sha256": "82f44f78b1cb631987299f52af7233c2e56cfa5c4a2a80bfc723573d68f5df00" }, { "filename": "number-trending-icon.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-trending-icon/number-trending-icon.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-trending-icon/number-trending-icon.json", "sha256": "005ca804df51a30fbebe2f476141152578c072e45c0c28917c81254a52a65062" }, { "filename": "number-trending-iconAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-trending-icon/number-trending-iconAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-trending-icon/number-trending-iconAST.json", "sha256": "e4a5ad535d73d8faea778f891397b81706814617b4e6cc18ef561400203514c4" } ] }, { "id": "column-samples/generic-svgicon-format", "family": "column", "slug": "generic-svgicon-format", "title": "SVG icons", "description": "The Fluent UI icons are easy to use in column formatting by simply specifying the name in the iconName attribute. However, the available selection of icons may not always meet your needs. Fortunately, you can use inline SVG elements with custom paths. This means you can use icons from sources like Font Awesome that provide SVG versions of their icons!", "longDescription": [ "The Fluent UI icons are easy to use in column formatting by simply specifying the name in the iconName attribute. However, the available selection of icons may not always meet your needs. Fortunately, you can use inline SVG elements with custom paths. This means you can use icons from sources like Font Awesome that provide SVG versions of their icons! This sample uses the value of the current field to show a custom icon and color. The icon is specified through the d attribute of the path element. The paths have been scaled and extracted from Font Awesome icons. This sample uses gender and provides a default display when neither Male nor Female is selected." ], "created": "2018-03-26T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "SVG", "Icons" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" }, { "name": "Use Font Awesome icons in Column Formatting", "description": "Use Font Awesome icons in Column Formatting", "url": "https://thechriskent.com/2018/03/25/use-font-awesome-icons-in-column-formatting/" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-svgicon-format", "route": "samples/column/generic-svgicon-format/", "preview": "generated/previews/column-generic-svgicon-format.webp", "previewAlt": "SVG icons formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-svgicon-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-svgicon-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-svgicon-format/generic-svgicon-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-svgicon-format/generic-svgicon-format.json", "sha256": "584bfca4f0db66946186f835c527769475331a31f181160d1a4145fc7162e466" }, { "filename": "generic-svgicon-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-svgicon-format/generic-svgicon-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-svgicon-format/generic-svgicon-formatAST.json", "sha256": "2146918d183a7120925c0cca76f87845834827eb1641d1e13eb009ebc5919905" } ] }, { "id": "column-samples/text-ryg-status-indicator", "family": "column", "slug": "text-ryg-status-indicator", "title": "Traffic Light (Red-Yellow-Green) Status Indicator", "description": "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 `@currentField` to `@currentField.lookupValue`).", "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 `@currentField` to `@currentField.lookupValue`)." ], "created": "2017-11-27T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Status / Progress" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-bgColor-yellow", "ms-bgColor-red", "ms-bgColor-green" ] }, "authors": [ { "gitHubAccount": "Travis-Constellation", "pictureUrl": "https://github.com/Travis-Constellation.png", "name": "Travis Lingenfelder", "key": "travis-constellation" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-ryg-status-indicator", "route": "samples/column/text-ryg-status-indicator/", "preview": "generated/previews/column-text-ryg-status-indicator.webp", "previewAlt": "Traffic Light (Red-Yellow-Green) Status Indicator formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-ryg-status-indicator/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-ryg-status-indicator.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-ryg-status-indicator/text-ryg-status-indicator.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-ryg-status-indicator/text-ryg-status-indicator.json", "sha256": "36b08b2ce3435fa96e8df743d4637a54a235a35cd57f55741c74fe0dcb941947" }, { "filename": "text-ryg-status-indicatorAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-ryg-status-indicator/text-ryg-status-indicatorAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-ryg-status-indicator/text-ryg-status-indicatorAST.json", "sha256": "c040c1798786ac4dd6c1321953e02254c1aae06ae56e7c33cc770d9ee9b62164" } ] }, { "id": "column-samples/generic-twitterpic", "family": "column", "slug": "generic-twitterpic", "title": "Twitter Profile Pics", "description": "Using just the Twitter handle, Twitter profile pictures are displayed in a circle and clicking them will open the user's Twitter page in a new window. The handle is also displayed as a tooltip when hovering over the profile image.", "longDescription": [ "Using just the Twitter handle, Twitter profile pictures are displayed in a circle and clicking them will open the user's Twitter page in a new window. The handle is also displayed as a tooltip when hovering over the profile image." ], "created": "2018-03-21T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-twitterpic", "route": "samples/column/generic-twitterpic/", "preview": "generated/previews/column-generic-twitterpic.webp", "previewAlt": "Twitter Profile Pics formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-twitterpic/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-twitterpic.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-twitterpic/generic-twitterpic.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-twitterpic/generic-twitterpic.json", "sha256": "74f9d3e5b437a33ee0c65c5377745cdbe6a76f0da77218e3d2705a6503cf64cb" }, { "filename": "generic-twitterpicAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-twitterpic/generic-twitterpicAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-twitterpic/generic-twitterpicAST.json", "sha256": "592f711ecfc3648793e096d8c61316b82e1746dcb98a282d68bef570e00d9655" } ] }, { "id": "column-samples/yesno-checkmark-format", "family": "column", "slug": "yesno-checkmark-format", "title": "Yes/No Checkmark", "description": "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 (sp-field-severity--good, sp-field-severity--low, or sp-field-severity--blocked) to the root
based on the field's value. This is what determines the element's background color. A class of `ms-fontColor-neutralSecondary` is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a element with an iconName attribute that shows a Fluent UI icon inside that element.", "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 (sp-field-severity--good, sp-field-severity--low, or sp-field-severity--blocked) to the root
based on the field's value. This is what determines the element's background color. A class of `ms-fontColor-neutralSecondary` is always applied to ensure the text color is legible in both light and dark themes. Then, it outputs a element with an iconName attribute that shows a Fluent UI icon inside that element." ], "created": "2017-11-22T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralSecondary", "sp-field-severity--good", "sp-field-severity--low", "sp-field-severity--blocked" ] }, "authors": [ { "gitHubAccount": "aaronmi", "pictureUrl": "https://github.com/aaronmi.png", "name": "Aaron Miao", "key": "aaronmi" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-checkmark-format", "route": "samples/column/yesno-checkmark-format/", "preview": "generated/previews/column-yesno-checkmark-format.webp", "previewAlt": "Yes/No Checkmark formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-checkmark-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-checkmark-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkmark-format/yesno-checkmark-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkmark-format/yesno-checkmark-format.json", "sha256": "ff0c0233cce36334c8afdeb72d05fd9c335f19393a38f2df92da62451c1b97e3" }, { "filename": "yesno-checkmark-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkmark-format/yesno-checkmark-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkmark-format/yesno-checkmark-formatAST.json", "sha256": "0992b8acca6170c1aab9baf7de9bec9d38ec593a53cfdc33687c394ff6b6caf0" } ] }, { "id": "column-samples/yesno-checkmark", "family": "column", "slug": "yesno-checkmark", "title": "Yes/No Column Check Mark", "description": "This example displays a check mark when the value of a Yes/No column is equal to Yes. This field uses the iconName attribute to display the CheckMark Fluent UI icon.", "longDescription": [ "This example displays a check mark when the value of a Yes/No column is equal to Yes. This field uses the iconName attribute to display the CheckMark Fluent UI icon." ], "created": "2017-11-27T00:00:00.000Z", "updated": "2018-08-20T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Yes/No" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "Travis-Constellation", "pictureUrl": "https://github.com/Travis-Constellation.png", "name": "Travis Lingenfelder", "key": "travis-constellation" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-checkmark", "route": "samples/column/yesno-checkmark/", "preview": "generated/previews/column-yesno-checkmark.webp", "previewAlt": "Yes/No Column Check Mark formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/yesno-checkmark/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "yesno-checkmark.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkmark/yesno-checkmark.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkmark/yesno-checkmark.json", "sha256": "d48e2108f19756645cf46aebf5ab86d3ead6c67c33dbbc77d84c29e4c9ede5de" }, { "filename": "yesno-checkmarkAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/yesno-checkmark/yesno-checkmarkAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/yesno-checkmark/yesno-checkmarkAST.json", "sha256": "236d334c2abdf976d3253d548e13ad7ca83abc506de4526176ff79104e9f8532" } ] }, { "id": "column-samples/person-currentuser", "family": "column", "slug": "person-currentuser", "title": "Highlight the Current User", "description": "This sample uses the @me 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.", "longDescription": [ "This sample uses the @me 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." ], "created": "2018-03-20T00:00:00.000Z", "updated": "2018-08-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontWeight-semibold" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-currentuser", "route": "samples/column/person-currentuser/", "preview": "generated/previews/column-person-currentuser.webp", "previewAlt": "Highlight the Current User formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-currentuser/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-currentuser.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-currentuser/person-currentuser.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-currentuser/person-currentuser.json", "sha256": "0cf935924c96e1d6c5566fc2d7e49cf73b0a8832a3a7933e4808e2c19e56f48a" }, { "filename": "person-currentuserAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-currentuser/person-currentuserAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-currentuser/person-currentuserAST.json", "sha256": "4054cb9a767d729239162a2fb4b02cb70c7532ac7beb3e88b799e1ca9593f591" } ] }, { "id": "column-samples/generic-start-flow", "family": "column", "slug": "generic-start-flow", "title": "Launch a Flow for a Selected Item", "description": "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.", "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." ], "created": "2017-11-25T00:00:00.000Z", "updated": "2018-08-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons", "Power Automate" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "executeFlow" ], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-themePrimary", "ms-fontColor-themeDark", "ms-fontColor-themeDarker", "ms-fontColor-themeDarker--hover" ] }, "authors": [ { "gitHubAccount": "yborghmans", "pictureUrl": "https://github.com/yborghmans.png", "name": "Yannick Borghmans", "key": "yborghmans" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-start-flow", "route": "samples/column/generic-start-flow/", "preview": "generated/previews/column-generic-start-flow.webp", "previewAlt": "Launch a Flow for a Selected Item formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/generic-start-flow/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "generic-start-flow.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/generic-start-flow/generic-start-flow.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/generic-start-flow/generic-start-flow.json", "sha256": "b72445a7cf92f5a2657fcf690d192fffef34289331e798e1eeccdb234f47c909" } ] }, { "id": "column-samples/person-mailto", "family": "column", "slug": "person-mailto", "title": "Person Mail To Link", "description": "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 `
` element:", "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 `
` element:" ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Person" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "sp-field-quickAction" ] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/person-mailto", "route": "samples/column/person-mailto/", "preview": "generated/previews/column-person-mailto.webp", "previewAlt": "Person Mail To Link formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/person-mailto/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "person-mailto.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-mailto/person-mailto.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-mailto/person-mailto.json", "sha256": "0b7df34879b52d500251992848dca11be6ffb13cd50d05acf2e84bd3d7d4b944" }, { "filename": "person-mailtoAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/person-mailto/person-mailtoAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/person-mailto/person-mailtoAST.json", "sha256": "edee839df09492b603910bf265b17e9cda3e873acf15fc5476845017351f7ff2" } ] }, { "id": "column-samples/number-quiz-smiley-face", "family": "column", "slug": "number-quiz-smiley-face", "title": "Quiz Results with Emoji", "description": "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 (`Emoji`), above 75 regular smile (`Emoji2`), above 60 neutral smiley (`EmojiNeutral`), below 60 a frown (`EmojiDisappointed`), and anything else gets an `Unknown`.", "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 (`Emoji`), above 75 regular smile (`Emoji2`), above 60 neutral smiley (`EmojiNeutral`), below 60 a frown (`EmojiDisappointed`), and anything else gets an `Unknown`." ], "created": "2017-12-01T00:00:00.000Z", "updated": "2018-08-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Icons" ], "LIST-COLUMN-TYPE": [ "Number" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "Maher256", "pictureUrl": "https://github.com/Maher256.png", "name": "Matt Maher", "key": "maher256" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-quiz-smiley-face", "route": "samples/column/number-quiz-smiley-face/", "preview": "generated/previews/column-number-quiz-smiley-face.webp", "previewAlt": "Quiz Results with Emoji formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/number-quiz-smiley-face/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "number-quiz-smiley-face.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-quiz-smiley-face/number-quiz-smiley-face.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-quiz-smiley-face/number-quiz-smiley-face.json", "sha256": "03ac62d350fe12296b34eb639403c1823229501e18704a29106a006059be14e0" }, { "filename": "number-quiz-smiley-faceAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/number-quiz-smiley-face/number-quiz-smiley-faceAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-quiz-smiley-face/number-quiz-smiley-faceAST.json", "sha256": "778e1cae038d0096fe152ce8213b1195e7ff6686428181d625fd33d60ab82ded" } ] }, { "id": "column-samples/text-strikethrough", "family": "column", "slug": "text-strikethrough", "title": "Strikethrough on Completion", "description": "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.", "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." ], "created": "2018-08-18T00:00:00.000Z", "updated": "2018-08-18T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Status / Progress" ], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-neutralPrimary" ] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-strikethrough", "route": "samples/column/text-strikethrough/", "preview": "generated/previews/column-text-strikethrough.webp", "previewAlt": "Strikethrough on Completion formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-strikethrough/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-strikethrough.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-strikethrough/text-strikethrough.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-strikethrough/text-strikethrough.json", "sha256": "9feedacb74bebf52b1fcfc819ca0f770f603a381ba90958cf3a4ed42827f8cc6" }, { "filename": "text-strikethroughAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-strikethrough/text-strikethroughAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-strikethrough/text-strikethroughAST.json", "sha256": "6f87e79512f8b6bd25cc8241fda609f2917715b0c11bf5cea427e821d64bad1a" } ] }, { "id": "column-samples/date-range-format", "family": "column", "slug": "date-range-format", "title": "Overdue Date", "description": "This example colors the current field red when the value inside an item's 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 - `@now`, which resolves to the current date/time, evaluated when the user loads the list view.", "longDescription": [ "This example colors the current field red when the value inside an item's 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 - `@now`, which resolves to the current date/time, evaluated when the user loads the list view." ], "created": "2017-11-02T00:00:00.000Z", "updated": "2018-08-17T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint 2019", "SharePoint Online" ], "SAMPLE-CATEGORIES": [ "Status / Progress" ], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [ "ms-fontColor-redDark", "ms-fontWeight-semibold" ] }, "authors": [ { "gitHubAccount": "VesaJuvonen", "pictureUrl": "https://github.com/VesaJuvonen.png", "name": "Vesa Juvonen", "key": "vesajuvonen" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/date-range-format", "route": "samples/column/date-range-format/", "preview": "generated/previews/column-date-range-format.webp", "previewAlt": "Overdue Date formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/date-range-format/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "date-range-format.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-range-format/date-range-format.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-range-format/date-range-format.json", "sha256": "e56d305e073b681bc73d3076459169c22ed0a255c9f61da91ab2ce4ba5bef455" }, { "filename": "date-range-formatAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/date-range-format/date-range-formatAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/date-range-format/date-range-formatAST.json", "sha256": "6186bdee5f59e513882550f7f89dea053121eeeaca4a1fabf30a041853150b32" } ] }, { "id": "view-samples/multi-line-view", "family": "view", "slug": "multi-line-view", "title": "Multi-line View", "description": "This sample demonstrates showing fields on separate rows, conditionally showing a button based on the current user, and how to use the defaultClick rowaction.", "longDescription": [ "This sample demonstrates showing fields on separate rows, conditionally showing a button based on the current user, and how to use the defaultClick rowaction." ], "created": "2018-08-10T00:00:00.000Z", "updated": "2018-08-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [ "@me" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [ "defaultClick" ], "FORMATTING-FEATURES": [ "hideSelection", "hideColumnHeader", "rowFormatter" ], "CLASSES": [ "sp-row-card", "sp-row-listPadding", "sp-row-title", "sp-row-button" ] }, "authors": [ { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/multi-line-view", "route": "samples/view/multi-line-view/", "preview": "generated/previews/view-multi-line-view.webp", "previewAlt": "Multi-line View formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/multi-line-view/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "multi-line-view.json", "target": "View formatting", "schemaIssues": [], "download": "generated/definitions/view-samples/multi-line-view/multi-line-view.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/multi-line-view/multi-line-view.json", "sha256": "1747a3fc3cead8dc51d75cbe9b532f6eb011588a56f8e913e8dd29bd46fbefda" } ] }, { "id": "view-samples/overdue-rowclass", "family": "view", "slug": "overdue-rowclass", "title": "Overdue Row Class", "description": "This sample applies a class to any row where the DueDate column is overdue (earlier than @now).", "longDescription": [ "This sample applies a class to any row where the DueDate column is overdue (earlier than @now)." ], "created": "2018-08-10T00:00:00.000Z", "updated": "2018-08-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "Date" ], "FORMATTING-TOKENS": [ "@now" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "sp-field-severity--severeWarning" ] }, "authors": [ { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/overdue-rowclass", "route": "samples/view/overdue-rowclass/", "preview": "generated/previews/view-overdue-rowclass.webp", "previewAlt": "Overdue Row Class formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/overdue-rowclass/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "overdue-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/overdue-rowclass/overdue-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/overdue-rowclass/overdue-rowclass.json", "sha256": "784810f4aebe73624e5a24545d77a5049dc3ed5622cbe34dd4573e500ec90df2" } ] }, { "id": "view-samples/status-rowclass", "family": "view", "slug": "status-rowclass", "title": "Status Row Class", "description": "This sample applies a class to the entire row based on the value of a choice field using additionalRowClass to conditionally apply the severity classes.", "longDescription": [ "This sample applies a class to the entire row based on the value of a choice field using additionalRowClass to conditionally apply the severity classes." ], "created": "2018-08-10T00:00:00.000Z", "updated": "2018-08-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "View" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [], "FORMATTING-TOKENS": [], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [ "additionalRowClass" ], "CLASSES": [ "sp-field-severity--blocked", "sp-field-severity--good", "sp-field-severity--low", "sp-field-severity--warning" ] }, "authors": [ { "gitHubAccount": "ldemaris", "pictureUrl": "https://github.com/ldemaris.png", "name": "Lincoln DeMaris", "key": "ldemaris" } ], "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" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/view-samples/status-rowclass", "route": "samples/view/status-rowclass/", "preview": "generated/previews/view-status-rowclass.webp", "previewAlt": "Status Row Class formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/status-rowclass/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "status-rowclass.json", "target": "View formatting", "schemaIssues": [ "/additionalRowClass must be object" ], "download": "generated/definitions/view-samples/status-rowclass/status-rowclass.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/view-samples/status-rowclass/status-rowclass.json", "sha256": "6cbe48c9e01c78f44afb21fbde5cbad151838a4674bc7ef7323ac545a31a0037" } ] }, { "id": "column-samples/text-local-link", "family": "column", "slug": "text-local-link", "title": "Linking to a Local Resource", "description": "This sample provides multiple formats to illustrate the options available to link to local resources. The primary purpose is to demonstrate the usage of `@currentWeb` (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.", "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 `@currentWeb` (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." ], "created": "2018-01-10T00:00:00.000Z", "updated": "2018-01-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-local-link", "route": "samples/column/text-local-link/", "preview": "generated/previews/column-text-local-link.webp", "previewAlt": "Linking to a Local Resource formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-local-link/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-hardcoded-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-link/text-hardcoded-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-link/text-hardcoded-link.json", "sha256": "e57c8bd52a0539162c9e12dcecace2c8edaa863f496fcde75d77f5bac2d6fe25" }, { "filename": "text-hardcoded-linkAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-link/text-hardcoded-linkAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-link/text-hardcoded-linkAST.json", "sha256": "9ecf76757bb2155edbfd0ef49756aad1f1524f74baa7449c902cc9d36c2fd277" }, { "filename": "text-local-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-link/text-local-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-link/text-local-link.json", "sha256": "03c6f0872495bcef126aef20c18e7e7395684d26abc7a16a002eca90223c4fb8" }, { "filename": "text-relative-link.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-link/text-relative-link.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-link/text-relative-link.json", "sha256": "066faa3f034795bc4511db313505a1ef2535a6b320d48325758c9150883fa971" }, { "filename": "text-relative-linkAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-link/text-relative-linkAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-link/text-relative-linkAST.json", "sha256": "da05f8290432708584a39abdae2796631572f8340c8b4fd037dacacda37c0f7e" } ] }, { "id": "column-samples/text-local-image", "family": "column", "slug": "text-local-image", "title": "Reference a Local Image", "description": "This sample provides multiple formats to illustrate the options available to reference local image files. The primary purpose is to demonstrate the usage of `@currentWeb` (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view.", "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 `@currentWeb` (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view." ], "created": "2018-01-10T00:00:00.000Z", "updated": "2018-01-10T00:00:00.000Z", "products": [ "SharePoint", "Microsoft Lists" ], "fields": { "LIST-SAMPLE-TYPE": [ "Column" ], "SHAREPOINT-COMPATIBILITY": [ "SharePoint Online" ], "SAMPLE-CATEGORIES": [], "LIST-COLUMN-TYPE": [ "General" ], "FORMATTING-TOKENS": [ "@currentWeb" ], "FORMATTING-OPERATORS": [], "FORMATTING-ACTIONS": [], "FORMATTING-FEATURES": [], "CLASSES": [] }, "authors": [ { "gitHubAccount": "thechriskent", "pictureUrl": "https://github.com/thechriskent.png", "name": "Chris Kent", "key": "thechriskent" } ], "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’s displayed to users who browse the list.", "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting" } ], "sourceUrl": "https://github.com/pnp/List-Formatting/tree/master/column-samples/text-local-image", "route": "samples/column/text-local-image/", "preview": "generated/previews/column-text-local-image.webp", "previewAlt": "Reference a Local Image formatting preview", "images": [ { "type": "image", "order": 100, "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/text-local-image/assets/screenshot.png", "alt": "screenshot" } ], "definitions": [ { "filename": "text-hardcoded-image.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-image/text-hardcoded-image.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-image/text-hardcoded-image.json", "sha256": "07af0dac4538812bf244f2cb981179b17b5361e64602ce5258f985f3a89e0f19" }, { "filename": "text-hardcoded-imageAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-image/text-hardcoded-imageAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-image/text-hardcoded-imageAST.json", "sha256": "4438ad59aaffbce1fb883a425ae4b1a00cc5c02cf46c8215a141f108ea611e3c" }, { "filename": "text-local-image.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-image/text-local-image.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-image/text-local-image.json", "sha256": "409945269c87ceac66d5d94706dd94216714516448422bac05f36e3ad7572958" }, { "filename": "text-relative-image.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-image/text-relative-image.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-image/text-relative-image.json", "sha256": "2ebb0a853a78b5e6de4df6bc077ac53c7a013013eb75e14f6f678fe37b77d8cc" }, { "filename": "text-relative-imageAST.json", "target": "Column formatting", "schemaIssues": [], "download": "generated/definitions/column-samples/text-local-image/text-relative-imageAST.json", "sourceUrl": "https://github.com/pnp/List-Formatting/blob/master/column-samples/text-local-image/text-relative-imageAST.json", "sha256": "a269e353e89eb69bbaec1d2bca225946c84d8a9feb7adb5c616293bfa33611ee" } ] } ] }