├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── ---bug.md │ ├── ---sample-request.md │ ├── ---suggestion.md │ ├── --question.md │ └── config.yml └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── LICENSE ├── README.md ├── column-samples ├── README-template.md ├── color-based-smiley-face │ ├── README.md │ ├── color-based-smiley-face.json │ ├── color-based-smiley-faceAST.json │ └── display.png ├── currency-symbol-concatenation │ ├── README.md │ ├── addsymbolonly.json │ ├── budgetcolumnformating.png │ ├── currency-symbol-concatenation.json │ └── currency-symbol-concatenationAST.json ├── custom-hover-cards │ ├── README.md │ ├── Status_hover.png │ └── custom-hover-card.json ├── date-check-blank-format │ ├── README.md │ ├── date-check-blank-format.json │ └── screenshot.png ├── date-difference │ ├── README.md │ ├── date-difference.json │ └── screenshot.png ├── date-range-format │ ├── README.md │ ├── date-range-format.json │ ├── date-range-formatAST.json │ └── screenshot.png ├── date-range-rag │ ├── README.MD │ ├── date-range-rag-days-left.json │ ├── date-range-rag.json │ ├── date-range-ragAST.json │ ├── screenshot-daysleft.png │ └── screenshot.png ├── default-hover-cards │ ├── People_hover.png │ ├── Person-hover-card.json │ └── README.md ├── file-thumbnail │ ├── README.md │ ├── file-thumbnail.json │ └── screenshot.gif ├── generic-centered-content │ ├── README.md │ ├── generic-centered-content.json │ └── screenshot.png ├── generic-file-preview │ ├── README.md │ ├── generic-file-preview.json │ ├── screenshot.png │ └── screenshotFilePreview.png ├── generic-hyperlink-thumbnail │ ├── generic-hyperlink-thumbnail.json │ ├── generic-hyperlink-thumbnailAST.json │ ├── generic-image-thumbnail.json │ ├── readme.md │ ├── screenshot.png │ └── screenshot2.png ├── generic-hyperlink-values │ ├── README.md │ ├── generic-hyperlink-values.json │ ├── generic-hyperlink-valuesAST.json │ └── screenshot.png ├── generic-icon-overlay │ ├── README.md │ ├── generic-icon-overlay-multiple.json │ ├── generic-icon-overlay.json │ ├── screenshotOverlay.png │ ├── screenshotOverlayMultiple.png │ ├── screenshotSimple.png │ └── simple-icon.json ├── generic-issuestatus-pill │ ├── README.md │ ├── generic-issuestatus-pill.json │ └── screenshot.png ├── generic-project-management │ ├── README.md │ ├── risk-level-change-status.json │ ├── risk-level-change-statusAST.json │ ├── risk-score.json │ ├── risk-scoreAST.json │ ├── ryg-status.json │ ├── ryg-statusAST.json │ ├── screenshot.png │ ├── screenshot2.png │ ├── screenshot3.png │ └── screenshot4.png ├── generic-rowIndex-drawing │ ├── AquaticAssetsGenerator.ps1 │ ├── README.md │ ├── generic-rowIndex-drawing.json │ └── screenshot.gif ├── generic-rowactions │ ├── README.md │ ├── defaultClick.json │ ├── delete.json │ ├── editProps.json │ ├── executeFlow.json │ ├── screenshot.png │ └── share.json ├── generic-socialpic │ ├── README.md │ ├── generic-socialpic.json │ ├── generic-socialpicAST.json │ └── screenshot.png ├── generic-start-flow-conditionally │ ├── FlowID.png │ ├── README.md │ ├── Screenshot.gif │ ├── generic-start-flow-conditionally.json │ └── screenshot.png ├── generic-start-flow │ ├── README.md │ ├── screenshot.png │ └── start-flow-button.json ├── generic-staticmap │ ├── README.md │ ├── generic-staticmap.json │ ├── generic-staticmapAST.json │ └── screenshot.png ├── generic-substring-status │ ├── README.md │ ├── generic-substring-status.json │ └── screenshot.png ├── generic-svgicon-format │ ├── README.md │ ├── generic-svgicon-format.json │ ├── generic-svgicon-formatAST.json │ └── screenshot.png ├── generic-twitterpic │ ├── README.md │ ├── generic-twitterpic.json │ ├── generic-twitterpicAST.json │ └── screenshot.png ├── location-address │ ├── README.md │ ├── location-address.json │ └── screenshot.png ├── multi-choice-foreach │ ├── README.md │ ├── multi-choice-foreach.json │ └── screenshot.png ├── multi-choice-icons │ ├── README.md │ ├── multi-choice-icons.json │ └── screenshot.png ├── multi-choice-workcategory-pill │ ├── README.md │ ├── multi-choice-workcategory-pill.json │ └── screenshot.png ├── multi-person-currentuser │ ├── README.md │ ├── multi-person-currentuser.json │ └── screenshot.png ├── multi-person-facepile │ ├── README.md │ ├── multi-person-facepile.json │ └── screenshot.png ├── multi-person-teams-chat-link │ ├── README.md │ ├── multi-person-teams-chat-link.json │ ├── screenshotList.png │ └── screenshotTeams.png ├── number-abs-tolerance-comparison │ ├── number-abs-tolerance-comparison.json │ ├── readME.md │ └── screenshot.jpg ├── number-conditional-format │ ├── README.md │ ├── number-conditional-format.json │ ├── number-conditional-formatAST.json │ └── screenshot.png ├── number-data-bar │ ├── README.md │ ├── number-data-bar.json │ ├── number-data-barAST.json │ ├── percent-data-bar.json │ ├── percent-data-barAST.json │ ├── screenshot-percent.png │ └── screenshot.png ├── number-gauge │ ├── README.md │ ├── number-gauge-reversed.json │ ├── number-gauge.json │ ├── screenshot.png │ └── screenshotReversed.png ├── number-icon-progressbar │ ├── README.md │ ├── number-icon-progressbar.json │ └── screenshot.png ├── number-piechart │ ├── README.md │ ├── number-piechart.PNG │ ├── number-piechart.json │ └── number-piechartAST.json ├── number-quiz-smiley-face │ ├── README.md │ ├── number-quiz-smiley-face.json │ ├── number-quiz-smiley-faceAST.json │ └── screenshot.png ├── number-trending-icon │ ├── README.md │ ├── number-trending-icon-with-difference.json │ ├── number-trending-icon-with-differenceAST.json │ ├── number-trending-icon.json │ ├── number-trending-iconAST.json │ ├── screenshot.png │ └── screenshotWithDifference.png ├── number-using-modulo-publish │ ├── README.md │ ├── example-after.jpg │ ├── example-before.jpg │ └── publish-status-with-description.json ├── person-currentuser │ ├── README.md │ ├── person-currentuser.json │ ├── person-currentuserAST.json │ └── screenshot.png ├── person-mailto │ ├── README.md │ ├── person-mailto.json │ ├── person-mailtoAST.json │ └── screenshot.png ├── person-roundimage-format │ ├── README.md │ ├── person-roundimage-format.json │ ├── person-roundimage-formatAST.json │ └── screenshot.png ├── picture-roundimage-format │ ├── README.md │ ├── picture-roundimage-format.json │ └── screenshot.png ├── readme.md ├── text-bing-map │ ├── README.md │ ├── text-bing-map-Screenshot.png │ └── text-bing-map.json ├── text-conditional-format │ ├── README.md │ ├── screenshot.png │ ├── text-conditional-format.json │ └── text-conditional-formatAST.json ├── text-contains │ ├── README.md │ ├── screenshot.png │ └── text-contains.json ├── text-isbn-image │ ├── README.md │ ├── text-isbn-image.json │ ├── text-isbn-image.png │ └── text-isbn-imageAST.json ├── text-local-image │ ├── README.md │ ├── screenshot.png │ ├── text-hardcoded-image.json │ ├── text-hardcoded-imageAST.json │ ├── text-local-image.json │ ├── text-relative-image.json │ └── text-relative-imageAST.json ├── text-local-link │ ├── README.md │ ├── screenshot.png │ ├── text-hardcoded-link.json │ ├── text-hardcoded-linkAST.json │ ├── text-local-link.json │ ├── text-relative-link.json │ └── text-relative-linkAST.json ├── text-ryg-status-indicator │ ├── README.md │ ├── screenshot.png │ ├── text-ryg-status-indicator.json │ └── text-ryg-status-indicatorAST.json ├── text-startswith-callingcodes │ ├── README.md │ ├── screenshot.png │ └── text-startswith-callingcodes.json ├── text-strikethrough │ ├── README.md │ ├── screenshot.png │ ├── text-strikethrough.json │ └── text-strikethroughAST.json ├── text-wrap-format │ ├── README.md │ ├── screenshot.png │ └── text-wrap-format.json ├── yesno-checkbox │ ├── README.md │ ├── screenshot.png │ ├── yesno-checkbox.json │ └── yesno-checkboxAST.json ├── yesno-checkmark-format │ ├── README.md │ ├── yesno-checkmark-format.PNG │ ├── yesno-checkmark-format.json │ └── yesno-checkmark-formatAST.json └── yesno-checkmark │ ├── README.md │ ├── screenshot.png │ ├── yesno-checkmark.json │ └── yesno-checkmarkAST.json ├── docs ├── README.md ├── columnsamples.md ├── contributing │ ├── docs.md │ ├── forking.md │ ├── index.md │ ├── issues.md │ ├── pullrequest.md │ └── sample.md ├── css │ └── extra.css ├── gettingstarted │ ├── columnformats.md │ ├── index.md │ └── viewformats.md ├── groupings │ ├── SP2019.md │ ├── action.md │ ├── author.md │ ├── category.md │ ├── columntype.md │ ├── operator.md │ └── token.md ├── img │ ├── CopyFromGithub.gif │ ├── DesignMode.png │ ├── FieldSetting.png │ ├── FormatColumnPanel.png │ ├── FormatMenu.png │ ├── FormatViewMenu.png │ ├── FormatViewPanel.png │ ├── LFAnimation.gif │ └── pnp-samples-white.svg ├── index.md └── viewsamples.md ├── mkdocs.yml ├── tools └── general-dynamic-deployment-with-vscode │ ├── README.md │ ├── o365cli │ ├── .vscode │ │ └── tasks.json │ ├── CLI │ │ ├── ListFormatting.Deployment.ListColumn.sh │ │ └── ListFormatting.Deployment.ListView.sh │ └── JSON Definitions │ │ ├── ListFormatting.ColumnDefinition.ColumnName.json │ │ └── ListFormatting.ViewDefinition.ViewName.json │ └── powershell │ ├── .vscode │ └── tasks.json │ ├── JSON Definitions │ ├── ListFormatting.ColumnDefinition.ColumnName.json │ └── ListFormatting.ViewDefinition.ViewName.json │ └── PowerShell │ ├── ListFormatting.Deployment.ListColumn.ps1 │ ├── ListFormatting.Deployment.ListView.ps1 │ └── ListFormatting.Deployment.SiteColumn.ps1 └── view-samples ├── README-template.md ├── alternating-rowclass ├── README.md ├── alternating-rowclass.json ├── screenshot.png ├── screenshotCombined.png ├── screenshotFiltered.png └── screenshotSorted.png ├── bar-graph-format ├── README.md ├── bar-graph-format.json ├── bargraph.gif └── bargraphnormal.png ├── birthday-format ├── README.md ├── birthday-format.json └── birthdayScreenshot.png ├── budget-tracker ├── ActivityMilestoneViewFormat.json ├── BudgetTracker.ps1 ├── BudgetTrackerPNP.xml ├── ProjectViewFormat.json ├── README.md ├── assets │ ├── Finish.png │ ├── credential-popup.png │ ├── page-review.png │ └── security-warning.png └── images │ └── budget-tracker-header.png ├── bulletin-board-format ├── BulletinBoardDetails.gif ├── README.md ├── bulletin-board-format-with-buttons.json ├── bulletin-board-format.json ├── screenshot.png └── screenshotWithButtons.png ├── choice-conditional-format ├── README.md ├── choice-conditional-format.json └── images │ └── sample01.png ├── column-graph-format ├── README.md ├── column-graph-format.json ├── columngraph.png └── columngraph_with_title.png ├── contact-card-format ├── README.md ├── contact-card-format.json ├── screenshot.png └── screenshotResponsive.png ├── contenttype-format ├── Fruit │ ├── Actually a Lemon.png │ ├── Chocolate.png │ ├── Green.png │ ├── Navel.png │ ├── Poisoned.png │ └── Red Delicious.png ├── FruitTemplate.xml ├── README.md ├── contenttype-format.json └── screenshot.png ├── current-year-rowclass ├── README.md ├── current-year-rowclass.json └── screenshot.png ├── custom-header-format ├── README.md ├── custom-header-format.json ├── custom-header-repeating-format.json ├── screenshot.png └── screenshotRepeating.png ├── custom-hover-cards ├── README.md ├── Status_hover.png └── custom-hover-card.json ├── date-conditional-format ├── README.md ├── date-conditional-format.json └── listformatting-additionalrowclass.png ├── default-hover-cards ├── File-hover-card.json ├── File_hover.png └── README.md ├── document-library-thumbnails ├── README.md ├── document-library-thumbnails.json └── document-library-thumbnails.png ├── document-library ├── README.md ├── card-format.json ├── images │ ├── document-library-mobile.jpg │ ├── document-library.jpg │ └── flow-changes.jpg ├── requestsignoff.zip └── update-documents.json ├── events-format ├── README.md ├── events-format-tiles-only.json └── events-format.json ├── faq-format ├── FAQ.png ├── FAQSingleQuestionScreenshot.png ├── README.md ├── faq-format.json └── faq-keyword-links-format.json ├── generic-numeric-average-comparison ├── README.md ├── generic-numeric-average-comparison-list-sample.jpg ├── generic-numeric-average-comparison-sample.jpg └── generic-numeric-average-comparison.json ├── generic-risk-score-format ├── README.md ├── risk-score-viewformat.json └── risk-score.png ├── generic-ryg-status-format ├── README.md ├── ryg-status-viewformat.json └── ryg-status.png ├── generic-tile-format ├── README.md ├── responsive-tile-view.png ├── tile-view.json └── tile-view.png ├── generic-video-button ├── EmbedCodeExample.txt ├── generic-video-button.json ├── screenshotPage.png └── screenshotView.png ├── in-memoriam-tileProps-format └── in-memoriam-tileProps-format.json ├── multi-line-view ├── README.md ├── listformatting-rowformatter.png └── multiline-view.json ├── multi-person-currentuser-rowclass ├── README.md ├── multi-person-currentuser-rowclass.json └── screenshot.png ├── person-currentuser-rowclass ├── README.md ├── person-currentuser-rowclass.json ├── screenshot.png └── screenshotCombined.png ├── planner-inspired-task-card ├── README.md ├── planner-inspired-task-card.json ├── screenshot.gif └── screenshot.png ├── product-catalog ├── DocLibraryViewFormat.json ├── ProductCatalog.ps1 ├── ProductCatalogPNP.xml ├── ProductCatalogViewFormat.json ├── README.md ├── assets │ ├── Finish.png │ ├── credential-popup.png │ ├── page-review.png │ └── security-warning.png ├── documents │ ├── Contoso Sketch.docx │ ├── Contoso Stretch.docx │ ├── Contoso Trek.docx │ ├── Contoso Unleash.docx │ └── Contoso Wander.docx └── images │ ├── Contoso Sketch.png │ ├── Contoso Stretch.png │ ├── Contoso Trek.png │ ├── Contoso Unleash.png │ ├── Contoso Wander.png │ └── product-catalog-header.png ├── profile-card ├── README.md ├── profile-card.json └── profile-card.png ├── readme.md ├── resource-catalog ├── README.md ├── card-format.json ├── create-list.json └── images │ └── resource-catalog.jpg ├── retail-account ├── README.md ├── card-format.json ├── create-list.json └── images │ └── retail-accounts.jpg ├── rota-css-table ├── README.md ├── rota-css-table.json ├── screenshot.jpeg └── staff-rota-sitescript.json ├── small-card-format ├── README.md ├── Small_Card.json └── formatting.PNG ├── text-conditional-format ├── README.md ├── text-conditional-format.json └── textformatting-status.png ├── tile-layout-example-with-formatting ├── README.md ├── Tile-with-formatting.png └── Tile_with_formatting.json ├── tile-layout-example-with-image ├── README.md ├── tile-layout-with-image.json └── tile-layout.png └── twitter-format ├── SPTwitter.gif ├── readme.md ├── twitterFormat.json └── twitterFormat.png /.github/ISSUE_TEMPLATE/---bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41E Bug" 3 | about: Report a problem with one of our list formatting samples 4 | title: SAMPLE has made me sad, please help 5 | labels: "\U0001F41E Bug" 6 | assignees: '' 7 | 8 | --- 9 | 10 | Thank you for reporting a bug! Use the sections below to submit a bug ONLY if it's related to samples in this repo. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues 11 | 12 | - Bugs that do not follow the below template will automatically be closed 13 | - All bug reports are welcome - we want to fix them! 14 | - This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂 15 | - Include sufficient details and context. 16 | - If you have multiple bugs please submit them separately so we can track resolution. 17 | - Screenshots are always helpful (just paste any images right here in the bug report) 18 | - We accept pull requests. If you know how to fix it - go ahead! 19 | 20 | DELETE EVERYTHING ABOVE AFTER READING - THANKS! 21 | 22 | ## Sample (which sample are you having trouble with) 23 | 24 | 25 | ## What Should Happen 26 | 27 | 28 | ## What Actually Happens 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---sample-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F434 Sample Request" 3 | about: Need a list formatting sample we don't have yet? Let us know! 4 | title: '' 5 | labels: "\U0001F4CB Help Wanted" 6 | assignees: '' 7 | 8 | --- 9 | 10 | Thank you for making a request! Use the sections below to submit a request ONLY for a new sample. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues 11 | 12 | - Requests that do not follow the below template will automatically be closed 13 | - All requests are welcome - the more the merrier! 14 | - This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂 15 | - If you have multiple requests submit them separately so we can track resolution. 16 | - Screenshots are always helpful (just paste any images right here in the request) 17 | - We accept pull requests. If you know how to make it - go ahead! 18 | 19 | DELETE EVERYTHING ABOVE AFTER READING - THANKS! 20 | 21 | ## What Kind of Sample (view or column format) 22 | 23 | 24 | ## Sample Description (what should it do) 25 | 26 | 27 | ## Are you Willing to Help? 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---suggestion.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F4A1 Suggestion" 3 | about: Suggest an idea to make one our list formatting samples even better 4 | title: Let's make SAMPLE even better! 5 | labels: "\U0001F4A1 Enhancement" 6 | assignees: '' 7 | 8 | --- 9 | 10 | Thank you for your suggestion! Use the sections below to submit a suggestion ONLY if it's related to samples in this repo. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues 11 | 12 | - Suggestions that do not follow the below template will automatically be closed 13 | - All ideas are welcome - let's build something together! 14 | - This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂 15 | - Include sufficient details and context. 16 | - If you have multiple suggestions please submit them separately so we can track resolution. 17 | - Screenshots are always helpful (just paste any images right here in the suggestion) 18 | 19 | DELETE EVERYTHING ABOVE AFTER READING - THANKS! 20 | 21 | ## Sample (which sample are you talking about) 22 | 23 | 24 | ## Suggestion (the more details, the better) 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "❓ Question" 3 | about: Ask a question about one of our list formatting samples 4 | title: I have a question about SAMPLE 5 | labels: "❓ Question" 6 | assignees: '' 7 | 8 | --- 9 | 10 | Thank you for asking a question! Use the sections below to submit a question ONLY if it's related to samples in this repo. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues 11 | 12 | - Questions that do not follow the below template will automatically be closed 13 | - All questions are welcome - let us know what's on your mind! 14 | - This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂 15 | - Include sufficient details and context. 16 | - If you have multiple questions please submit them separately so we can track resolution. 17 | - Screenshots are always helpful (just paste any images right here in the question) 18 | 19 | DELETE EVERYTHING ABOVE AFTER READING - THANKS! 20 | 21 | ## Sample (which sample are you talking about) 22 | 23 | 24 | ## Question (the more details, the better) 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 📚 Main Issues List 4 | url: https://github.com/SharePoint/sp-dev-docs/issues/new 5 | about: Issue or question related to List Formatting itself or its documentation? Submit an issue here. 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | | Q | A 2 | | --------------- | --- 3 | | Bug fix? | no - yes? 4 | | New sample? | no - yes? 5 | | Related issues? | fixes #X, partially #Y, mentioned in #Z 6 | 7 | #### What's in this Pull Request? 8 | 9 | Please describe the changes in this PR. Sample description or details around bugs which are being fixed. 10 | 11 | 12 | #### Guidance 13 | *You can delete this section when you are submitting the pull request.* 14 | * *Please update this PR information accordingly. We'll use this as part of our release notes in monthly communications.* 15 | * *Please target your PR to 'master' branch.* 16 | 17 | Thanks for your contribution! Sharing is caring. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # mkdocs build folder 61 | site/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /column-samples/README-template.md: -------------------------------------------------------------------------------- 1 | # Title of the sample 2 | 3 | ## Summary 4 | Short summary on functionality and details to help explain the format. 5 | 6 | [picture of the format in action] 7 | 8 | ## View requirements 9 | - Details about the type of column to apply the format too 10 | - Add details about any expected columns being referenced 11 | 12 | ## Sample 13 | 14 | Solution|Author(s) 15 | --------|--------- 16 | json-file-name | Author details 17 | 18 | ## Version history 19 | 20 | Version|Date|Comments 21 | -------|----|-------- 22 | 1.0|August 29, 2025|Initial release 23 | 24 | ## Disclaimer 25 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 26 | 27 | --- 28 | 29 | ## Additional notes 30 | Any potential additional notes to get included in the readme around the sample with additional pictures etc. 31 | 32 | - topic 1 33 | - topic 2 34 | - topic 3 35 | 36 | Update telemetry url below to place your sample name at the end then remove this line 37 | -------------------------------------------------------------------------------- /column-samples/color-based-smiley-face/README.md: -------------------------------------------------------------------------------- 1 | # Smiley faces for good quiz results 2 | 3 | ## Summary 4 | This sample is to display smiley faces based on color value, As for sample, it is based on color choice column value of 5 | Green, Red and Yellow. Color value will add smiley face which come from the Offie UI Fabric Icon set. If color is Green smiley (`Emoji2`), If color is Yellow (`EmojiNeutral`), if color is Red (`EmojiDisappointed`). 6 | 7 | Sample can be extended to diffrent other colors based on requirement 8 | 9 | 10 | ![screenshot of the sample](./display.png) 11 | 12 | ## View requirements 13 | - This format can be applied to a Choice, Single line of text column 14 | 15 | ## Sample 16 | 17 | Solution|Author(s) 18 | --------|--------- 19 | color-based-smiley-face.json | Siddharth Vaghasia 20 | 21 | ## Version history 22 | 23 | Version|Date|Comments 24 | -------|----|-------- 25 | 1.0|June 16, 2019|Initial release 26 | 27 | 28 | ## Disclaimer 29 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 30 | 31 | --- 32 | 33 | ## Additional notes 34 | This sample uses icons from the Office UI Fabric 35 | 36 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 37 | 38 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 39 | 40 | -------------------------------------------------------------------------------- /column-samples/color-based-smiley-face/color-based-smiley-face.json: -------------------------------------------------------------------------------- 1 | { 2 | "elmType": "div", 3 | "style": { 4 | "background-color": "=if(@currentField == 'Green', '#2ECC71', if(@currentField == 'Yellow','#F1C40F', '#E74C3C'))", 5 | 6 | "color": "#fff", 7 | "white-space": "nowrap" 8 | }, 9 | "children": [ 10 | { 11 | "elmType": "span", 12 | "txtContent": "@currentField", 13 | "style": { 14 | "font-size": "2em", 15 | "display": "inline-block", 16 | "padding": "0 8px" 17 | }, 18 | "attributes": { 19 | "iconName": "=if(@currentField == 'Green', 'Emoji2', if(@currentField == 'Yellow','EmojiNeutral', 'EmojiDisappointed'))" 20 | } 21 | 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /column-samples/color-based-smiley-face/display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/color-based-smiley-face/display.png -------------------------------------------------------------------------------- /column-samples/currency-symbol-concatenation/addsymbolonly.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "txtContent": "£", 8 | "style": { 9 | "display": "inline-block", 10 | "padding": "0 1px" 11 | } 12 | }, 13 | { 14 | "elmType": "span", 15 | "txtContent": "@currentField" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /column-samples/currency-symbol-concatenation/budgetcolumnformating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/currency-symbol-concatenation/budgetcolumnformating.png -------------------------------------------------------------------------------- /column-samples/currency-symbol-concatenation/currency-symbol-concatenation.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "color": "#fff", 6 | "padding-left": "10px", 7 | "background-color": "=if(@currentField >= [$ProjectBudget], '#e81123', '#00B294')" 8 | }, 9 | "children": [ 10 | { 11 | "elmType": "span", 12 | "txtContent": "£", 13 | "style": { 14 | "display": "inline-block", 15 | "padding": "0 1px" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /column-samples/currency-symbol-concatenation/currency-symbol-concatenationAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "color": "#fff", 6 | "padding-left": "10px", 7 | "background-color": { 8 | "operator": "?", 9 | "operands": [ 10 | { 11 | "operator": ">=", 12 | "operands": [ 13 | "@currentField", 14 | "[$ProjectBudget]" 15 | ] 16 | }, 17 | "#e81123", 18 | "#00B294" 19 | ] 20 | } 21 | }, 22 | "children": [ 23 | { 24 | "elmType": "span", 25 | "txtContent": "£", 26 | "style": { 27 | "display": "inline-block", 28 | "padding": "0 1px" 29 | } 30 | }, 31 | { 32 | "elmType": "span", 33 | "txtContent": "@currentField" 34 | } 35 | ] 36 | } -------------------------------------------------------------------------------- /column-samples/custom-hover-cards/README.md: -------------------------------------------------------------------------------- 1 | # Custom hover card on Lists 2 | 3 | ## Summary 4 | The following image shows a list with a custom hover added to a List: 5 | 6 | On hover - Metadata on the column "Status" is made available via column formatting 7 | 8 | ![screenshot of the sample](./Status_hover.png) 9 | 10 | ## View requirements 11 | - This format can be applied to any column type though the example is based on - 12 | 13 | Column Name |Type 14 | --------------------|-------------- 15 | Status | Choice 16 | Product ID | Single Line Text 17 | PackedDate | Date and Time 18 | ShippedDate | Date and Time 19 | InTransitStartDate | Date and Time 20 | DeliveredDate | Date and Time 21 | Product Photo | Picture 22 | 23 | ## Sample 24 | 25 | Solution|Author(s) 26 | --------|--------- 27 | custom-hover-card.json | Niket Jain 28 | 29 | ## Version history 30 | 31 | Version|Date|Comments 32 | -------|----|-------- 33 | 1.0|April 08, 2020|Initial release 34 | 35 | 36 | ## Disclaimer 37 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 38 | 39 | --- 40 | 41 | ## Additional notes 42 | This sample uses icons from the Office UI Fabric 43 | 44 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 45 | 46 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 47 | 48 | 49 | -------------------------------------------------------------------------------- /column-samples/custom-hover-cards/Status_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/custom-hover-cards/Status_hover.png -------------------------------------------------------------------------------- /column-samples/date-check-blank-format/date-check-blank-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "=if(Number([$DueDate]) == 0, 'Blank Date' , if([$DueDate] < @now, 'Expired', 'Active'))", 5 | "attributes": { 6 | "class": "=if(Number([$DueDate]) == 0, 'sp-field-severity--warning' , if([$DueDate] < @now, 'sp-field-severity--blocked', 'sp-field-severity--good'))" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /column-samples/date-check-blank-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/date-check-blank-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/date-difference/README.md: -------------------------------------------------------------------------------- 1 | # Date Difference 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![screenshot](./screenshot.png) 7 | 8 | 9 | ## View requirements 10 | This format can be applied to any column, however it expects the following fields to be present in the view: 11 | 12 | |Type|Internal Name|Required| 13 | |---|---|:---:| 14 | |Date|Born|Yes| 15 | |Date|Died|Yes| 16 | 17 | ## Sample 18 | 19 | Solution|Author(s) 20 | --------|--------- 21 | date-difference.json | [Chris Kent](https://twitter.com/thechriskent) 22 | 23 | ## Version history 24 | 25 | Version|Date|Comments 26 | -------|----|-------- 27 | 1.0|October 2, 2019|Initial release 28 | 29 | ## Disclaimer 30 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 31 | 32 | --- 33 | 34 | ## Additional notes 35 | 36 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 37 | 38 | -------------------------------------------------------------------------------- /column-samples/date-difference/date-difference.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "=floor((Number([$Died])-Number([$Born]))/(1000*60*60*24*365))" 5 | } -------------------------------------------------------------------------------- /column-samples/date-difference/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/date-difference/screenshot.png -------------------------------------------------------------------------------- /column-samples/date-range-format/date-range-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "class": "=if([$DueDate] <= @now, 'ms-fontColor-redDark ms-fontWeight-semibold', '')" 7 | } 8 | } -------------------------------------------------------------------------------- /column-samples/date-range-format/date-range-formatAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "class": { 7 | "operator": "?", 8 | "operands": [ 9 | { 10 | "operator": "<=", 11 | "operands": [ 12 | "[$DueDate]", 13 | "@now" 14 | ] 15 | }, 16 | "ms-fontColor-redDark ms-fontWeight-semibold", 17 | "" 18 | ] 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /column-samples/date-range-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/date-range-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/date-range-rag/date-range-rag.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "position": "relative" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "div", 10 | "attributes": { 11 | "class": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', if(1 - Number([$DueDate] - @now) / Number([$DueDate] - [$StartDate]) >= 0.7, 'sp-field-severity--warning', 'sp-field-severity--good'))" 12 | }, 13 | "style": { 14 | "min-height": "inherit", 15 | "width": "=if([$DueDate] <= @now, '100%', (1 - Number([$DueDate] - @now) / Number([$DueDate] - [$StartDate])) * 100 + '%')" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField", 21 | "style": { 22 | "position": "absolute", 23 | "left": "8px" 24 | }, 25 | "attributes": { 26 | "class": "ms-fontColor-neutralSecondary" 27 | } 28 | } 29 | ] 30 | } -------------------------------------------------------------------------------- /column-samples/date-range-rag/screenshot-daysleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/date-range-rag/screenshot-daysleft.png -------------------------------------------------------------------------------- /column-samples/date-range-rag/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/date-range-rag/screenshot.png -------------------------------------------------------------------------------- /column-samples/default-hover-cards/People_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/default-hover-cards/People_hover.png -------------------------------------------------------------------------------- /column-samples/default-hover-cards/Person-hover-card.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "img", 7 | "style": { 8 | "width": "32px", 9 | "height": "32px", 10 | "overflow": "hidden", 11 | "border-radius": "50%", 12 | "margin": "2px" 13 | }, 14 | "attributes": { 15 | "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Editor.email]", 16 | "title": "[$Editor.title]" 17 | } 18 | }, 19 | { 20 | "elmType": "span", 21 | "style": { 22 | "vertical-align": "middle", 23 | "margin-left": "2px" 24 | }, 25 | "txtContent": "[$Editor.title]" 26 | } 27 | ], 28 | "defaultHoverField": "[$Editor]" 29 | } -------------------------------------------------------------------------------- /column-samples/default-hover-cards/README.md: -------------------------------------------------------------------------------- 1 | # Default hover card on Lists 2 | 3 | ## Summary 4 | The following image shows a list with a defalut hover added to a formatted column in a list 5 | 6 | On hover on a formatted person column a profile card is displayed 7 | 8 | ![screenshot of the sample](./People_hover.png) 9 | 10 | ## View requirements 11 | - This format can be applied to any column type though the example is based on - 12 | 13 | Column Name|Type 14 | --------|--------- 15 | Modified By | Person 16 | 17 | ## Sample 18 | 19 | Solution|Author(s) 20 | --------|--------- 21 | Person-hover-card.json | Niket Jain 22 | 23 | ## Version history 24 | 25 | Version|Date|Comments 26 | -------|----|-------- 27 | 1.0|April 08, 2020|Initial release 28 | 29 | 30 | ## Disclaimer 31 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 32 | 33 | --- 34 | 35 | ## Additional notes 36 | This sample uses icons from the Office UI Fabric 37 | 38 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 39 | 40 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 41 | 42 | 43 | -------------------------------------------------------------------------------- /column-samples/file-thumbnail/README.md: -------------------------------------------------------------------------------- 1 | # File Thumbnails 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![screenshot of the sample](./screenshot.gif) 7 | 8 | >Note - the automatic removal of the `img` element when dealing with folders or filetypes where previews are not available requires that properties of the `img` element do not use expressions. 9 | 10 | ## Sample 11 | 12 | Solution|Author(s) 13 | --------|--------- 14 | file-thumbnail.json | [Chris Kent](https://twitter.com/thechriskent) 15 | 16 | ## Version history 17 | 18 | Version|Date|Comments 19 | -------|----|-------- 20 | 1.0|May 27, 2019|Initial release 21 | 22 | ## Disclaimer 23 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 24 | 25 | --- 26 | 27 | ## Additional notes 28 | 29 | - SharePoint Online only 30 | 31 | 32 | -------------------------------------------------------------------------------- /column-samples/file-thumbnail/file-thumbnail.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": "@thumbnail.medium" 6 | }, 7 | "style": { 8 | "display": "block", 9 | "margin": "0 auto", 10 | "max-height": "42px" 11 | } 12 | } -------------------------------------------------------------------------------- /column-samples/file-thumbnail/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/file-thumbnail/screenshot.gif -------------------------------------------------------------------------------- /column-samples/generic-centered-content/README.md: -------------------------------------------------------------------------------- 1 | # Centered Content 2 | 3 | ## Summary 4 | This is a basic sample that demonstrates making your content be both vertically and horizontally centered (in the middle) within the cell. 5 | 6 | ![screenshot of the sample](./screenshot.png) 7 | 8 | ## View requirements 9 | - This format can be applied to any column type 10 | 11 | ## Sample 12 | 13 | Solution|Author(s) 14 | --------|--------- 15 | generic-centered-content.json | [Chris Kent](https://twitter.com/thechriskent) 16 | 17 | ## Version history 18 | 19 | Version|Date|Comments 20 | -------|----|-------- 21 | 1.0|August 24, 2018|Initial release 22 | 23 | ## Disclaimer 24 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 25 | 26 | --- 27 | 28 | ## Additional notes 29 | None 30 | 31 | -------------------------------------------------------------------------------- /column-samples/generic-centered-content/generic-centered-content.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "display": "table", 6 | "width": "100%" 7 | }, 8 | "children": [ 9 | { 10 | "elmType": "div", 11 | "txtContent": "@currentField", 12 | "style": { 13 | "display": "table-cell", 14 | "text-align": "center", 15 | "vertical-align": "middle" 16 | } 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /column-samples/generic-centered-content/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-centered-content/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-file-preview/README.md: -------------------------------------------------------------------------------- 1 | # File Preview 2 | 3 | ## Summary 4 | 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). 5 | 6 | ![screenshot of the sample](./screenshot.png) 7 | 8 | ![screenshot of the file preview](./screenshotFilePreview.png) 9 | 10 | ## View requirements 11 | - This format is intended for document libraries 12 | - The format can be applied to any column, although it is recommended to add it to a calculated column with a ="" formula 13 | - Only specific file types are supported (see below) 14 | 15 | ### Supported File Types 16 | 17 | This format relies on `Doc.aspx` which supports the viewing of Microsoft Office documents. The format only displays for the following extensions: 18 | 19 | - **Word**: docx, dotx, dotm, docm, docb 20 | - **PowerPoint**: pptx, pptm, potx, potm, ppam, ppsx, ppsm, sldx, sldm 21 | - **Visio**: vsdx 22 | - **Excel**: xlsx, xlsm, xltx, xltm 23 | 24 | > This list of extensions can be adjusted by either removing or adding another condition in the `display` style property. 25 | 26 | ## Sample 27 | 28 | Solution|Author(s) 29 | --------|--------- 30 | generic-file-preview.json | [Geert de Kooter](@gdekooter) 31 | 32 | ## Version history 33 | 34 | Version|Date|Comments 35 | -------|----|-------- 36 | 1.0|August 08, 2020|Initial release 37 | 38 | ## Disclaimer 39 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 40 | 41 | --- 42 | 43 | ## Additional notes 44 | none 45 | 46 | 47 | -------------------------------------------------------------------------------- /column-samples/generic-file-preview/generic-file-preview.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "attributes": { 5 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 6 | "title": "Fullscreen Preview", 7 | "target": "_blank", 8 | "href": "=@currentWeb +'/_layouts/15/Doc.aspx?sourcedoc=' + [$UniqueId] + '&action=embedview'" 9 | }, 10 | "style": { 11 | "border": "none", 12 | "background-color": "transparent", 13 | "cursor": "pointer", 14 | "text-decoration": "none", 15 | "display": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'dotx' || [$File_x0020_Type] == 'dotm' || [$File_x0020_Type] == 'docm' || [$File_x0020_Type] == 'docb' || [$File_x0020_Type] == 'pptx' || [$File_x0020_Type] == 'pptm' || [$File_x0020_Type] == 'potx' || [$File_x0020_Type] == 'potm' || [$File_x0020_Type] == 'ppam' || [$File_x0020_Type] == 'ppsx' || [$File_x0020_Type] == 'ppsm' || [$File_x0020_Type] == 'sldx' || [$File_x0020_Type] == 'sldm' || [$File_x0020_Type] == 'vsdx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'xlsm' || [$File_x0020_Type] == 'xltx' || [$File_x0020_Type] == 'xltm','inherit','none')" 16 | }, 17 | "children": [ 18 | { 19 | "elmType": "span", 20 | "attributes": { 21 | "iconName": "View" 22 | } 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /column-samples/generic-file-preview/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-file-preview/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-file-preview/screenshotFilePreview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-file-preview/screenshotFilePreview.png -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnail.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "[$FileRef]", 5 | "attributes": { 6 | "target": "_blank", 7 | "href": "=@currentWeb + '/_layouts/15/getpreview.ashx?resolution=3&path=' + [$FileRef]" 8 | } 9 | } -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-thumbnail/generic-hyperlink-thumbnailAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "[$FileRef]", 5 | "attributes": { 6 | "target": "_blank", 7 | "href": { 8 | "operator": "+", 9 | "operands": [ 10 | "@currentWeb", 11 | "/_layouts/15/getpreview.ashx?resolution=3&path=", 12 | "[$FileRef]" 13 | ] 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-thumbnail/generic-image-thumbnail.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "width": "64px", 9 | "height": "64px", 10 | "overflow": "hidden", 11 | "border-radius": "10%" 12 | }, 13 | "children": [ 14 | { 15 | "elmType": "img", 16 | "attributes": { 17 | "src": "=@currentWeb + '/_layouts/15/getpreview.ashx?resolution=1&path=' + [$FileRef]" 18 | }, 19 | "style": { 20 | "position": "relative", 21 | "top": "50%", 22 | "left": "50%", 23 | "width": "100%", 24 | "height": "auto", 25 | "margin-left": "-50%", 26 | "margin-top": "-50%" 27 | } 28 | } 29 | ] 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-thumbnail/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-hyperlink-thumbnail/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-thumbnail/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-hyperlink-thumbnail/screenshot2.png -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-values/generic-hyperlink-values.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "target": "_blank", 7 | "href": "='http://finance.yahoo.com/quote/' + @currentField" 8 | } 9 | } -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-values/generic-hyperlink-valuesAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "target": "_blank", 7 | "href": { 8 | "operator": "+", 9 | "operands": [ 10 | "http://finance.yahoo.com/quote/", 11 | "@currentField" 12 | ] 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /column-samples/generic-hyperlink-values/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-hyperlink-values/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/generic-icon-overlay-multiple.json: -------------------------------------------------------------------------------- 1 | { 2 | "elmType": "div", 3 | "style": { 4 | "position": "relative", 5 | "display": "=if(@currentField && [$Sentiment], 'inherit', 'none')", 6 | "width": "40px", 7 | "height": "40px" 8 | }, 9 | "attributes": { 10 | "title": "=[$Sentiment] + ' - ' + @currentField" 11 | }, 12 | "children": [ 13 | { 14 | "elmType": "div", 15 | "attributes": { 16 | "iconName": "FullCircleMask", 17 | "class": "ms-fontColor-yellow" 18 | }, 19 | "style": { 20 | "font-size": "36px" 21 | } 22 | }, 23 | { 24 | "elmType": "div", 25 | "attributes": { 26 | "iconName": "=if([$Sentiment]=='Positive', 'Emoji2', if([$Sentiment]=='Negative', 'Sad', 'EmojiNeutral'))", 27 | "class": "ms-fontColor-black" 28 | }, 29 | "style": { 30 | "font-size": "36px", 31 | "position": "absolute", 32 | "top": "0", 33 | "left": "0" 34 | } 35 | }, 36 | { 37 | "elmType": "div", 38 | "attributes": { 39 | "iconName": "=if(@currentField=='Done', 'SkypeCircleCheck', if(@currentField=='In progress', 'SyncStatusSolid', if(@currentField=='In review', 'StarburstSolid', 'SkypeCircleMinus')))", 40 | "class": "='ms-fontColor-' + if(@currentField=='Done', 'green', if(@currentField=='In progress', 'blue', if(@currentField=='In review', 'magentaLight', 'redDark')))" 41 | }, 42 | "style": { 43 | "position": "absolute", 44 | "right": "0", 45 | "bottom": "0", 46 | "font-size": "12px" 47 | } 48 | } 49 | ] 50 | } -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/generic-icon-overlay.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "position": "relative", 6 | "display": "=if(@currentField, 'inherit', 'none')" 7 | }, 8 | "attributes": { 9 | "title": "@currentField" 10 | }, 11 | "children": [ 12 | { 13 | "elmType": "div", 14 | "attributes": { 15 | "iconName": "HeartFill", 16 | "class": "='ms-fontColor-' + if(@currentField=='Positive', 'red', if(@currentField=='Negative', 'blue', 'neutral'))" 17 | }, 18 | "style": { 19 | "font-size": "36px" 20 | } 21 | }, 22 | { 23 | "elmType": "div", 24 | "attributes": { 25 | "iconName": "=if(@currentField=='Positive', 'Heart', if(@currentField=='Negative', 'HeartBroken', 'Health'))", 26 | "class": "ms-fontColor-black" 27 | }, 28 | "style": { 29 | "font-size": "36px", 30 | "position": "absolute", 31 | "top": "0", 32 | "left": "0" 33 | } 34 | } 35 | ] 36 | } -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/screenshotOverlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-icon-overlay/screenshotOverlay.png -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/screenshotOverlayMultiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-icon-overlay/screenshotOverlayMultiple.png -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/screenshotSimple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-icon-overlay/screenshotSimple.png -------------------------------------------------------------------------------- /column-samples/generic-icon-overlay/simple-icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "elmType": "div", 3 | "attributes": { 4 | "iconName": "Cat", 5 | "class": "ms-fontColor-themePrimary" 6 | }, 7 | "style": { 8 | "font-size": "36px" 9 | } 10 | } -------------------------------------------------------------------------------- /column-samples/generic-issuestatus-pill/README.md: -------------------------------------------------------------------------------- 1 | # Issue Status Pill 2 | 3 | ## Summary 4 | This format demonstrates how you can reproduce the status choices as pills found in the Microsoft Lists Issue Tracker template.. 5 | 6 | You can use this formatting to implement your own version of the *choices as pills* formatting. 7 | 8 | ![screenshot of the sample](./screenshot.png) 9 | 10 | ## View requirements 11 | - This format can be applied to any text/choice column, but expects the column values to be one of the following choices: 12 | - Blocked 13 | - In progress 14 | - Completed 15 | - Duplicate 16 | - By design 17 | - Won't fix 18 | - New 19 | 20 | ## Sample 21 | 22 | Solution|Author(s) 23 | --------|--------- 24 | generic-issuestatus-pill.json | [Hugo Bernier](https://twitter.com/bernierh) 25 | 26 | ## Version history 27 | 28 | Version|Date|Comments 29 | -------|----|-------- 30 | 1.0|July 30, 2020|Initial release 31 | 32 | ## Disclaimer 33 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 34 | 35 | --- 36 | 37 | ## Additional notes 38 | 39 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#me) 40 | 41 | 42 | -------------------------------------------------------------------------------- /column-samples/generic-issuestatus-pill/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-issuestatus-pill/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-project-management/risk-level-change-status.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "attributes": { 8 | "class": "=if(@currentField == 'Down', 'sp-field-trending--up', if(@currentField == 'Up', 'sp-field-trending--down', ''))", 9 | "iconName": "=if(@currentField == 'Down', 'SortDown', if(@currentField == 'Up', 'SortUp', if(@currentField == 'Level', 'Split', '')))" 10 | }, 11 | "style": { 12 | "padding-right": "10px" 13 | } 14 | }, 15 | { 16 | "elmType": "span", 17 | "txtContent": "@currentField" 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /column-samples/generic-project-management/risk-score.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "padding-left": "14px" 7 | }, 8 | "attributes": { 9 | "class": "=if(@currentField >= 16, 'ms-bgColor-red', if(@currentField >= 12, 'ms-bgColor-orangeLighter', if(@currentField >= 8, 'ms-bgColor-yellow', 'ms-bgColor-green'))) + ' ms-fontColor-white'" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/generic-project-management/risk-scoreAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "padding-left": "14px" 7 | }, 8 | "attributes": { 9 | "class": { 10 | "operator": "+", 11 | "operands": [ 12 | { 13 | "operator": "?", 14 | "operands": [ 15 | { 16 | "operator": ">=", 17 | "operands": [ 18 | "@currentField", 19 | 16 20 | ] 21 | }, 22 | "ms-bgColor-red", 23 | { 24 | "operator": "?", 25 | "operands": [ 26 | { 27 | "operator": ">=", 28 | "operands": [ 29 | "@currentField", 30 | 12 31 | ] 32 | }, 33 | "ms-bgColor-orangeLighter", 34 | { 35 | "operator": "?", 36 | "operands": [ 37 | { 38 | "operator": ">=", 39 | "operands": [ 40 | "@currentField", 41 | 8 42 | ] 43 | }, 44 | "ms-bgColor-yellow", 45 | "ms-bgColor-green" 46 | ] 47 | } 48 | ] 49 | } 50 | ] 51 | }, 52 | " ms-fontColor-white" 53 | ] 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /column-samples/generic-project-management/ryg-status.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "padding-left": "14px" 7 | }, 8 | "attributes": { 9 | "class": "=if(@currentField == 'Red', 'ms-bgColor-red', if(@currentField == 'Green', 'ms-bgColor-green', if(@currentField == 'Yellow', 'ms-bgColor-yellow', if(@currentField == 'Amber', 'ms-bgColor-orangeLighter', '')))) + ' ms-fontColor-white'" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/generic-project-management/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-project-management/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-project-management/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-project-management/screenshot2.png -------------------------------------------------------------------------------- /column-samples/generic-project-management/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-project-management/screenshot3.png -------------------------------------------------------------------------------- /column-samples/generic-project-management/screenshot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-project-management/screenshot4.png -------------------------------------------------------------------------------- /column-samples/generic-rowIndex-drawing/AquaticAssetsGenerator.ps1: -------------------------------------------------------------------------------- 1 | Connect-PnPOnline https://thechriskent.sharepoint.com/sites/WarriorHorses 2 | 3 | $titles = @("Horse Mine","Lazer Shark","Submarine","Sea Horse","Murder Eel","Horsepedo", 4 | "Plankton of Doom","Fake Reef","Turtle Friend","Surfing Horse Hitman", 5 | "Horse Carrier","Battleship","Sea Stable","Hammerhead Horse","Death Dolphin", 6 | "Scuba Pony") 7 | 8 | $count = 0 9 | while($count -lt 300) { 10 | 11 | Add-PnPListItem -List "Aquatic Assets" -Values @{ 12 | "Title" = ((Get-Random $titles) + " " + (Get-Random -Minimum 1 -Maximum 2500)); 13 | "Deployed" = ((Get-Date).AddDays((Get-Random -Minimum -1000 -Maximum 0))); 14 | "Active" = (&{If((Get-Random -Maximum 2) -eq 0){$false}else{$true}})} 15 | 16 | $count++ 17 | } 18 | 19 | Disconnect-PnPOnline -------------------------------------------------------------------------------- /column-samples/generic-rowIndex-drawing/README.md: -------------------------------------------------------------------------------- 1 | # Row Index Drawing 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![screenshot of the sample](./screenshot.gif) 7 | 8 | Also included is the AquaticAssetsGenerator.ps1 PowerShell script that demonstrates creating lots of random entries in a list. You'll want at least 201 items to show the full picture. 9 | 10 | ## View requirements 11 | - This format can be applied to any view 12 | 13 | ## Sample 14 | 15 | Solution|Author(s) 16 | --------|--------- 17 | generic-rowIndex-drawing.json | [Chris Kent](https://twitter.com/thechriskent) 18 | 19 | ## Version history 20 | 21 | Version|Date|Comments 22 | -------|----|-------- 23 | 1.0|February 20, 2020|Initial release 24 | 25 | ## Disclaimer 26 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 27 | 28 | --- 29 | 30 | ## Additional notes 31 | 32 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#me) 33 | 34 | -------------------------------------------------------------------------------- /column-samples/generic-rowIndex-drawing/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-rowIndex-drawing/screenshot.gif -------------------------------------------------------------------------------- /column-samples/generic-rowactions/defaultClick.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "defaultClick" 6 | }, 7 | "attributes": { 8 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 9 | "title": "Open Item" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "span", 19 | "attributes": { 20 | "iconName": "OpenPane", 21 | "class": "ms-font-xxl" 22 | } 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /column-samples/generic-rowactions/delete.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "delete" 6 | }, 7 | "attributes": { 8 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 9 | "title": "Delete Item" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "span", 19 | "attributes": { 20 | "iconName": "Delete", 21 | "class": "ms-font-xxl" 22 | } 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /column-samples/generic-rowactions/editProps.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "editProps" 6 | }, 7 | "attributes": { 8 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 9 | "title": "Edit Item" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "span", 19 | "attributes": { 20 | "iconName": "Edit", 21 | "class": "ms-font-xxl" 22 | } 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /column-samples/generic-rowactions/executeFlow.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "executeFlow", 6 | "actionParams": "{\"id\":\"f7ecec0b-15c5-419f-8211-302a5d4e94f1\", \"headerText\":\"It's Flow Time!\",\"runFlowButtonText\":\"Do it\"}" 7 | }, 8 | "attributes": { 9 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 10 | "title": "Launch Flow" 11 | }, 12 | "style": { 13 | "border": "none", 14 | "background-color": "transparent", 15 | "cursor": "pointer" 16 | }, 17 | "children": [ 18 | { 19 | "elmType": "span", 20 | "attributes": { 21 | "iconName": "Flow", 22 | "class": "ms-font-xxl" 23 | } 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /column-samples/generic-rowactions/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-rowactions/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-rowactions/share.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "share" 6 | }, 7 | "attributes": { 8 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 9 | "title": "Share Item" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "span", 19 | "attributes": { 20 | "iconName": "Share", 21 | "class": "ms-font-xxl" 22 | } 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /column-samples/generic-socialpic/generic-socialpic.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "margin": "2px", 9 | "width": "48px", 10 | "height": "48px", 11 | "overflow": "hidden", 12 | "border-radius": "50%" 13 | }, 14 | "children": [ 15 | { 16 | "elmType": "a", 17 | "attributes": { 18 | "href": "='https://' + [$Social_x0020_Network] + '.com/' + @currentField", 19 | "title": "='@' + @currentField", 20 | "target": "_blank" 21 | }, 22 | "children": [ 23 | { 24 | "elmType": "img", 25 | "attributes": { 26 | "src": "='https://unavatar.now.sh/' + [$Social_x0020_Network] + '/' + @currentField + '/medium'", 27 | "alt": "='@' + @currentField" 28 | }, 29 | "style": { 30 | "position": "relative", 31 | "top": "50%", 32 | "left": "50%", 33 | "width": "100%", 34 | "height": "auto", 35 | "margin-left": "-50%", 36 | "margin-top": "-50%" 37 | } 38 | } 39 | ] 40 | } 41 | ] 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /column-samples/generic-socialpic/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-socialpic/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-start-flow-conditionally/FlowID.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-start-flow-conditionally/FlowID.png -------------------------------------------------------------------------------- /column-samples/generic-start-flow-conditionally/Screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-start-flow-conditionally/Screenshot.gif -------------------------------------------------------------------------------- /column-samples/generic-start-flow-conditionally/generic-start-flow-conditionally.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "executeFlow", 6 | "actionParams": "='{\"id\": \"' + if([$Stage]=='','b60a26d3-fd87-4947-9d1d-344cb31d953a',if([$Stage]=='Development','3a27a39c-0ec9-4342-8fe3-bfb37fefc3da','3091d383-f8ed-48da-9962-bd7c24e70688')) + '\"}'" 7 | }, 8 | "attributes": { 9 | "class": "='ms-fontColor-' +if([$Stage]=='','orangeLight',if([$Stage]=='Development','teal','redDark'))" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer", 15 | "display": "=if([$Stage]=='Destroyed','none','inherit')" 16 | }, 17 | "children": [ 18 | { 19 | "elmType": "span", 20 | "attributes": { 21 | "iconName": "=if([$Stage]=='','Lightbulb',if([$Stage]=='Development','Deploy','HeartBroken'))" 22 | }, 23 | "style": { 24 | "padding-right": "6px" 25 | } 26 | }, 27 | { 28 | "elmType": "span", 29 | "txtContent": "=if([$Stage]=='','Develop!',if([$Stage]=='Development','Deploy!','Destroy!'))" 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /column-samples/generic-start-flow-conditionally/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-start-flow-conditionally/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-start-flow/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-start-flow/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-start-flow/start-flow-button.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "button", 4 | "customRowAction": { 5 | "action": "executeFlow", 6 | "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}" 7 | }, 8 | "attributes": { 9 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" 10 | }, 11 | "style": { 12 | "border": "none", 13 | "background-color": "transparent", 14 | "cursor": "pointer" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "span", 19 | "attributes": { 20 | "iconName": "Flow" 21 | }, 22 | "style": { 23 | "padding-right": "6px" 24 | } 25 | }, 26 | { 27 | "elmType": "span", 28 | "txtContent": "It's Flow Time!" 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /column-samples/generic-staticmap/generic-staticmap.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "border": "2px solid #666666", 6 | "width": "128px", 7 | "height": "64px" 8 | }, 9 | "children": [ 10 | { 11 | "elmType": "a", 12 | "attributes": { 13 | "href": "='https://www.google.com/maps/place/' + @currentField + '/'", 14 | "target": "_blank" 15 | }, 16 | "style": { 17 | "height": "100%" 18 | }, 19 | "children": [ 20 | { 21 | "elmType": "img", 22 | "attributes": { 23 | "src": "='https://maps.googleapis.com/maps/api/staticmap?center=' + @currentField + '&size=128x64&key=AIzaSyDKNauYNcs4ZOq7sQMWYDyz1x82l00ek34'" 24 | } 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /column-samples/generic-staticmap/generic-staticmapAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "border": "2px solid #666666", 6 | "width": "128px", 7 | "height": "64px" 8 | }, 9 | "children": [ 10 | { 11 | "elmType": "a", 12 | "attributes": { 13 | "href": { 14 | "operator": "+", 15 | "operands": [ 16 | "https://www.google.com/maps/place/", 17 | "@currentField", 18 | "/" 19 | ] 20 | }, 21 | "target": "_blank" 22 | }, 23 | "style": { 24 | "height": "100%" 25 | }, 26 | "children": [ 27 | { 28 | "elmType": "img", 29 | "attributes": { 30 | "src": { 31 | "operator": "+", 32 | "operands": [ 33 | "https://maps.googleapis.com/maps/api/staticmap?", 34 | "center=", 35 | "@currentField", 36 | "&size=128x64", 37 | "&key=AIzaSyDKNauYNcs4ZOq7sQMWYDyz1x82l00ek34" 38 | ] 39 | } 40 | } 41 | } 42 | ] 43 | } 44 | ] 45 | } -------------------------------------------------------------------------------- /column-samples/generic-staticmap/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-staticmap/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-substring-status/generic-substring-status.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "attributes": { 8 | "iconName": "=if(indexOf(@currentField, 'Not Started') == 0, 'WarningSolid', if(indexOf(@currentField, 'In Progress') == 0, 'AirplaneSolid', 'CompletedSolid'))", 9 | "class": "='ms-fontColor-' + if(indexOf(@currentField, 'Not Started') == 0, 'redDark', if(indexOf(@currentField, 'In Progress') == 0, 'yellow', 'green'))", 10 | "title": "@currentField" 11 | }, 12 | "style": { 13 | "font-size": "32px" 14 | } 15 | }, 16 | { 17 | "elmType": "div", 18 | "style": { 19 | "padding-left": "4px" 20 | }, 21 | "children": [ 22 | { 23 | "elmType": "span", 24 | "txtContent": "=substring(@currentField, 0, indexOf(@currentField,':'))", 25 | "style": { 26 | "display": "inline-block", 27 | "width": "100%", 28 | "font-size": "10px", 29 | "line-height": "8px", 30 | "vertical-align": "text-top" 31 | } 32 | }, 33 | { 34 | "elmType": "span", 35 | "txtContent": "=substring(@currentField, indexOf(@currentField,':') + 2, 100)", 36 | "style": { 37 | "display": "inline-block", 38 | "font-size": "14px", 39 | "font-weight": "bold", 40 | "vertical-align": "text-top", 41 | "line-height": "13px", 42 | "margin-top": "-4px" 43 | } 44 | } 45 | ] 46 | } 47 | ] 48 | } -------------------------------------------------------------------------------- /column-samples/generic-substring-status/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-substring-status/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-svgicon-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-svgicon-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/generic-twitterpic/generic-twitterpic.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "margin": "2px", 9 | "width": "48px", 10 | "height": "48px", 11 | "overflow": "hidden", 12 | "border-radius": "50%" 13 | }, 14 | "children": [ 15 | { 16 | "elmType": "a", 17 | "attributes": { 18 | "href": "='https://twitter.com/' + @currentField", 19 | "target": "_blank" 20 | }, 21 | "children": [ 22 | { 23 | "elmType": "img", 24 | "attributes": { 25 | "src": "='https://twitter.com/' + @currentField + '/profile_image?size=normal'", 26 | "title": "='@' + @currentField", 27 | "alt": "='@' + @currentField" 28 | }, 29 | "style": { 30 | "position": "relative", 31 | "top": "50%", 32 | "left": "50%", 33 | "width": "100%", 34 | "height": "auto", 35 | "margin-left": "-50%", 36 | "margin-top": "-50%" 37 | } 38 | } 39 | ] 40 | } 41 | ] 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /column-samples/generic-twitterpic/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/generic-twitterpic/screenshot.png -------------------------------------------------------------------------------- /column-samples/location-address/README.md: -------------------------------------------------------------------------------- 1 | # Display Location Address Details 2 | 3 | ## Summary 4 | 5 | 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. 6 | 7 | ![screenshot of the sample](./screenshot.png) 8 | 9 | > Note: Location columns do not currently have the "Format this column" option in the column menu. Instead, formats to these columns need to be applied through the Field Settings screen for the column. 10 | 11 | ## View requirements 12 | - This format can be applied to a location column 13 | 14 | ## Sample 15 | 16 | Solution|Author(s) 17 | --------|--------- 18 | location-address.json | [Chris Kent](https://twitter.com/thechriskent) 19 | 20 | ## Version history 21 | 22 | Version|Date|Comments 23 | -------|----|-------- 24 | 1.0|August 21, 2019|Initial release 25 | 26 | ## Disclaimer 27 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 28 | 29 | --- 30 | 31 | 32 | -------------------------------------------------------------------------------- /column-samples/location-address/location-address.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "display": "block" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "a", 10 | "txtContent": "@currentField.DisplayName", 11 | "attributes": { 12 | "href": "='https://www.bing.com/maps?cp=' + @currentField.Coordinates.Latitude + '~' + @currentField.Coordinates.Longitude + '&lvl=17&sV=2'", 13 | "target": "_blank", 14 | "title": "=@currentField.Coordinates.Latitude + ', ' + @currentField.Coordinates.Longitude" 15 | }, 16 | "style": { 17 | "display": "block" 18 | } 19 | }, 20 | { 21 | "elmType": "div", 22 | "txtContent": "@currentField.Address.Street" 23 | }, 24 | { 25 | "elmType": "div", 26 | "txtContent": "=@currentField.Address.City + ', ' + @currentField.Address.State" 27 | }, 28 | { 29 | "elmType": "div", 30 | "txtContent": "@currentField.Address.CountryOrRegion" 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /column-samples/location-address/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/location-address/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-choice-foreach/README.md: -------------------------------------------------------------------------------- 1 | # Multi-Choice forEach 2 | 3 | ## Summary 4 | This sample demonstrates usage of the `forEach` property to create template elements applied to each choice in a multi-select choice field. 5 | 6 | 7 | ![screenshot of the sample](./screenshot.png) 8 | 9 | ## View requirements 10 | - This format can be applied to a Multi-Select Choice column 11 | - This format uses operators only available in SharePoint Online and cannot be used in SharePoint 2019 12 | 13 | ## Sample 14 | 15 | Solution|Author(s) 16 | --------|--------- 17 | multi-choice-foreach.json | [Chris Kent](https://twitter.com/thechriskent) 18 | 19 | ## Version history 20 | 21 | Version|Date|Comments 22 | -------|----|-------- 23 | 1.0|April 4, 2019|Initial release 24 | 25 | ## Disclaimer 26 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 27 | 28 | --- 29 | 30 | ## Additional notes 31 | 32 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 33 | 34 | - For a more elaborate usage of `forEach` check out the [multi-person-facepile](../multi-person-facepile) sample. 35 | 36 | -------------------------------------------------------------------------------- /column-samples/multi-choice-foreach/multi-choice-foreach.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "forEach": "choiceIterator in @currentField", 7 | "elmType": "div", 8 | "txtContent": "[$choiceIterator]", 9 | "attributes": { 10 | "class": "ms-bgColor-themePrimary ms-fontColor-white", 11 | "title": "='I am the letter ' + [$choiceIterator]" 12 | }, 13 | "style": { 14 | "width": "16px", 15 | "height": "16px", 16 | "text-align": "center", 17 | "margin": "1px" 18 | } 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /column-samples/multi-choice-foreach/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-choice-foreach/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-choice-icons/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-choice-icons/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-choice-workcategory-pill/README.md: -------------------------------------------------------------------------------- 1 | # Work Progress Category Pill 2 | 3 | ## Summary 4 | 5 | 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. 6 | 7 | ![screenshot of the sample](./screenshot.png) 8 | 9 | ## View requirements 10 | 11 | * This format can be applied to any multiple selection choice column, but expects the column values to be one of the following choices: 12 | + Planning 13 | + Design 14 | + Engineering 15 | + Marketing 16 | + Research 17 | 18 | ## Sample 19 | 20 | | Solution | Author(s) | 21 | |-------------------------------|----------------------------------------------| 22 | | multi-choice-workcategory-pill.json | [Ganesh Sanap](https://twitter.com/ganeshsanap20) | 23 | 24 | ## Version history 25 | 26 | | Version | Date | Comments | 27 | |---------|---------------|-----------------| 28 | | 1.0 | August 08, 2020 | Initial release | 29 | 30 | ## Disclaimer 31 | 32 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 33 | 34 | --- 35 | 36 | ## Additional notes 37 | 38 | This sample uses some predefined classes also covered in the official documentation of Column Formatting: 39 | 40 | - [Use column formatting to customize SharePoint - Style guidelines](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-guidelines) 41 | 42 | 43 | -------------------------------------------------------------------------------- /column-samples/multi-choice-workcategory-pill/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-choice-workcategory-pill/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-person-currentuser/multi-person-currentuser.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "=join(@currentField.title, ', ')", 5 | "attributes": { 6 | "class": "=if(indexOf(join(@currentField.email,';'), @me) != -1, 'ms-fontColor-themePrimary ms-fontWeight-semibold', '')" 7 | } 8 | } -------------------------------------------------------------------------------- /column-samples/multi-person-currentuser/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-person-currentuser/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-person-facepile/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-person-facepile/screenshot.png -------------------------------------------------------------------------------- /column-samples/multi-person-teams-chat-link/multi-person-teams-chat-link.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "attributes": { 5 | "href": "='https://teams.microsoft.com/l/chat/0/0?users=' + join(@currentField.email,',') + '&topicName=' + [$FileLeafRef] + '&message=Neigh?'", 6 | "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", 7 | "title": "='Start a chat with ' + join(@currentField.title, ', ')" 8 | }, 9 | "style": { 10 | "text-decoration": "none" 11 | }, 12 | "children": [ 13 | { 14 | "elmType": "span", 15 | "attributes": { 16 | "iconName": "SurveyQuestions" 17 | }, 18 | "style": { 19 | "padding-right": "4px" 20 | } 21 | }, 22 | { 23 | "elmType": "span", 24 | "txtContent": "Ask a Question" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /column-samples/multi-person-teams-chat-link/screenshotList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-person-teams-chat-link/screenshotList.png -------------------------------------------------------------------------------- /column-samples/multi-person-teams-chat-link/screenshotTeams.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/multi-person-teams-chat-link/screenshotTeams.png -------------------------------------------------------------------------------- /column-samples/number-abs-tolerance-comparison/number-abs-tolerance-comparison.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "attributes": { 8 | "class": "=if(abs([$Actual]-[$Expected])<=[$Tolerance], 'sp-field-trending--up','sp-field-trending--down')", 9 | "iconName": "=if(abs([$Actual]-[$Expected])<=[$Tolerance], 'LikeSolid','DislikeSolid')" 10 | } 11 | }, 12 | { 13 | "elmType": "span", 14 | "txtContent": "[$After]" 15 | }, 16 | { 17 | "elmType": "span", 18 | "txtContent": "=if(abs([$Actual]-[$Expected])<=[$Tolerance], 'Pass','Fail')", 19 | "attributes": { 20 | "class": "=if(abs([$Actual]-[$Expected])<=[$Tolerance], 'sp-field-trending--up','sp-field-trending--down')" 21 | }, 22 | "style": { 23 | "padding-left": "5px" 24 | } 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /column-samples/number-abs-tolerance-comparison/readME.md: -------------------------------------------------------------------------------- 1 | # Determine Tolerance Comparison using abs() 2 | 3 | ## Summary 4 | 5 | Display if a value is within the expected tolerance. 6 | 7 | To determine success, the column formatting definition subtracts the "Actual" value from the "Expected" value and applies the "abs()" operator to retrieve the absolute value. The result is compared to the "Tolerance" column value to determine pass or fail. 8 | 9 | An Office UI Fabric class and icon is also applied to provide visual indicators of Pass or Fail. 10 | 11 | 12 | ### Screenshot 13 | ![screenshot of the sample](./screenshot.jpg) 14 | 15 | 16 | ## Column Types 17 | The columns used in this sample were created as "Number" column types. 18 | 19 | ## View requirements 20 | - This format uses operators only available in SharePoint Online and cannot be used in SharePoint 2019 21 | 22 | ## Sample 23 | 24 | Solution|Author(s) 25 | --------|--------- 26 | number-abs-tolerance-comparison.json | [David Warner II](https://twitter.com/davidwarnerii) / [Warner.Digital](http://warner.digital) 27 | 28 | ## Version history 29 | 30 | Version|Date|Comments 31 | -------|----|-------- 32 | 1.0|March 8, 2019|Initial release 33 | 34 | ## Disclaimer 35 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 36 | 37 | --- 38 | 39 | ## Additional notes 40 | 41 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 42 | 43 | 44 | -------------------------------------------------------------------------------- /column-samples/number-abs-tolerance-comparison/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-abs-tolerance-comparison/screenshot.jpg -------------------------------------------------------------------------------- /column-samples/number-conditional-format/README.md: -------------------------------------------------------------------------------- 1 | # Conditional formatting based on a number range 2 | 3 | ## Summary 4 | This example uses the conditional operator `?` to apply a class (`sp-field-severity--warning`) to the parent `
` 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. 5 | 6 | ![screenshot of the sample](./screenshot.png) 7 | 8 | ## View requirements 9 | - This format can be applied to a Number column 10 | 11 | ## Sample 12 | 13 | Solution|Author(s) 14 | --------|--------- 15 | number-conditional-format.json | SharePoint Team 16 | 17 | ## Version history 18 | 19 | Version|Date|Comments 20 | -------|----|-------- 21 | 1.0|November 2, 2017|Initial release 22 | 1.1|August 20, 2018|Switched to Excel-style expressions 23 | 24 | ## Disclaimer 25 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 26 | 27 | --- 28 | 29 | ## Additional notes 30 | This sample is also covered in the main documentation around the Column Formatting 31 | 32 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 33 | 34 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 35 | 36 | -------------------------------------------------------------------------------- /column-samples/number-conditional-format/number-conditional-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": "=if(@currentField <= 70, 'sp-field-severity--warning', '')" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "span", 10 | "style": { 11 | "display": "inline-block", 12 | "padding": "0 4px" 13 | }, 14 | "attributes": { 15 | "iconName": "=if(@currentField <= 70, 'Error', '')" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /column-samples/number-conditional-format/number-conditional-formatAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": { 6 | "operator": "?", 7 | "operands": [ 8 | { 9 | "operator": "<=", 10 | "operands": [ 11 | "@currentField", 12 | 70 13 | ] 14 | }, 15 | "sp-field-severity--warning", 16 | "" 17 | ] 18 | } 19 | }, 20 | "children": [ 21 | { 22 | "elmType": "span", 23 | "style": { 24 | "display": "inline-block", 25 | "padding": "0 4px" 26 | }, 27 | "attributes": { 28 | "iconName": { 29 | "operator": "?", 30 | "operands": [ 31 | { 32 | "operator": "<=", 33 | "operands": [ 34 | "@currentField", 35 | 70 36 | ] 37 | }, 38 | "Error", 39 | "" 40 | ] 41 | } 42 | } 43 | }, 44 | { 45 | "elmType": "span", 46 | "txtContent": "@currentField" 47 | } 48 | ] 49 | } -------------------------------------------------------------------------------- /column-samples/number-conditional-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-conditional-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-data-bar/number-data-bar.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "txtContent": "@currentField", 8 | "style": { 9 | "padding-left": "8px", 10 | "white-space": "nowrap" 11 | } 12 | } 13 | ], 14 | "attributes": { 15 | "class": "sp-field-dataBars" 16 | }, 17 | "style": { 18 | "padding": "0", 19 | "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')", 20 | "box-sizing": "border-box" 21 | } 22 | } -------------------------------------------------------------------------------- /column-samples/number-data-bar/number-data-barAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "txtContent": "@currentField", 8 | "style": { 9 | "padding-left": "8px", 10 | "white-space": "nowrap" 11 | } 12 | } 13 | ], 14 | "attributes": { 15 | "class": "sp-field-dataBars" 16 | }, 17 | "style": { 18 | "padding": "0", 19 | "width": { 20 | "operator": "?", 21 | "operands": [ 22 | { 23 | "operator": ">=", 24 | "operands": [ 25 | "@currentField", 26 | "20" 27 | ] 28 | }, 29 | "100%", 30 | { 31 | "operator": "+", 32 | "operands": [ 33 | { 34 | "operator": "*", 35 | "operands": [ 36 | "@currentField", 37 | 5 38 | ] 39 | }, 40 | "%" 41 | ] 42 | } 43 | ] 44 | }, 45 | "box-sizing": "border-box" 46 | } 47 | } -------------------------------------------------------------------------------- /column-samples/number-data-bar/percent-data-bar.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "txtContent": "=(100 * @currentField) + ' %'", 8 | "style": { 9 | "padding-left": "8px", 10 | "white-space": "nowrap" 11 | } 12 | } 13 | ], 14 | "attributes": { 15 | "class": "sp-field-dataBars", 16 | "role": "progressbar", 17 | "aria-valuenow": "@currentField", 18 | "aria-valuemin": "0", 19 | "aria-valuemax": "1" 20 | }, 21 | "style": { 22 | "padding": "0", 23 | "width": "=if(@currentField > 1, '100%', if(@currentField < 0, '0', (100 * @currentField) + '%'))", 24 | "box-sizing": "border-box" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /column-samples/number-data-bar/screenshot-percent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-data-bar/screenshot-percent.png -------------------------------------------------------------------------------- /column-samples/number-data-bar/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-data-bar/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-gauge/README.md: -------------------------------------------------------------------------------- 1 | # Number Gauge 2 | 3 | ## Summary 4 | This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive. 5 | 6 | ![screenshot](./screenshot.png) 7 | 8 | An alternate version (number-gauge-reversed) has been provided for scenarios where the gauge background should be reversed (green to red). 9 | 10 | ![screenshot reversed](./screenshotReversed.png) 11 | 12 | ## View requirements 13 | - This format can be applied to a Number column. It is expected that the values will be from 0 to 1 (percent) 14 | 15 | ## Sample 16 | 17 | Solution|Author(s) 18 | --------|--------- 19 | number-gauge.json | [Chris Kent](https://twitter.com/thechriskent) 20 | number-gauge-reversed.json | [Chris Kent](https://twitter.com/thechriskent) 21 | 22 | ## Version history 23 | 24 | Version|Date|Comments 25 | -------|----|-------- 26 | 1.0|July 10, 2019|Initial release 27 | 28 | ## Disclaimer 29 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 30 | 31 | --- 32 | 33 | ## Additional notes 34 | 35 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 36 | 37 | -------------------------------------------------------------------------------- /column-samples/number-gauge/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-gauge/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-gauge/screenshotReversed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-gauge/screenshotReversed.png -------------------------------------------------------------------------------- /column-samples/number-icon-progressbar/README.md: -------------------------------------------------------------------------------- 1 | # Icon Progress Bar 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![screenshot of the sample](./screenshot.png) 7 | 8 | ## View requirements 9 | - This format can be applied to a Number column (the format expects values from 0-5, but can easily be adjusted to account for more) 10 | 11 | ## Sample 12 | 13 | Solution|Author(s) 14 | --------|--------- 15 | number-icon-progressbar.json | [Julien Seguin](https://twitter.com/julien_seguin) 16 | 17 | ## Version history 18 | 19 | Version|Date|Comments 20 | -------|----|-------- 21 | 1.0|March 1, 2019|Initial release 22 | 23 | ## Disclaimer 24 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 25 | 26 | --- 27 | 28 | ## Additional notes 29 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting) 30 | 31 | -------------------------------------------------------------------------------- /column-samples/number-icon-progressbar/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-icon-progressbar/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-piechart/number-piechart.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-piechart/number-piechart.PNG -------------------------------------------------------------------------------- /column-samples/number-piechart/number-piechart.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "display": "flex", 6 | "padding": "4px" 7 | }, 8 | "children": [ 9 | { 10 | "elmType": "div", 11 | "style": { 12 | "display": "inline-block", 13 | "border-radius": "100%", 14 | "fill": "#0078d4", 15 | "width": "100px", 16 | "height": "100px" 17 | }, 18 | "attributes": { 19 | "class": "ms-bgColor-neutralLight" 20 | }, 21 | "children": [ 22 | { 23 | "elmType": "svg", 24 | "children": [ 25 | { 26 | "elmType": "path", 27 | "attributes": { 28 | "d": "='M50,50 L50,0, A50,50 0 ' + if(@currentField <= 0.5, '0', '1') + ',1 ' + toString(50 + (sin(6.2831853 * if(@currentField >= 1, 0.9999, if(@currentField < 0, 0, @currentField))) * 50)) + ',' + toString(50 - (cos(6.2831853 * if(@currentField >= 1, 0.9999, if(@currentField < 0, 0, @currentField))) * 50)) + ' z'" 29 | } 30 | } 31 | ] 32 | } 33 | ] 34 | }, 35 | { 36 | "elmType": "div", 37 | "style": { 38 | "position": "relative", 39 | "left": "-69px", 40 | "top": "30px", 41 | "white-space": "nowrap" 42 | }, 43 | "attributes": { 44 | "class": "ms-fontColor-neutralPrimary ms-fontWeight-light ms-fontSize-xl" 45 | }, 46 | "txtContent": "=toString(@currentField * 100) + '%'" 47 | } 48 | ] 49 | } -------------------------------------------------------------------------------- /column-samples/number-quiz-smiley-face/README.md: -------------------------------------------------------------------------------- 1 | # Smiley faces for good quiz results 2 | 3 | ## Summary 4 | 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`. 5 | 6 | 7 | ![screenshot of the sample](./screenshot.png) 8 | 9 | ## View requirements 10 | - This format can be applied to a Number column 11 | 12 | ## Sample 13 | 14 | Solution|Author(s) 15 | --------|--------- 16 | number-quiz-smiley-face.json | Matt Maher 17 | 18 | ## Version history 19 | 20 | Version|Date|Comments 21 | -------|----|-------- 22 | 1.0|December 1, 2017|Initial release 23 | 1.1|August 18, 2018|Switched to Excel-style expression 24 | 25 | ## Disclaimer 26 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 27 | 28 | --- 29 | 30 | ## Additional notes 31 | This sample uses icons from the Office UI Fabric 32 | 33 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 34 | 35 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 36 | 37 | -------------------------------------------------------------------------------- /column-samples/number-quiz-smiley-face/number-quiz-smiley-face.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "style": { 8 | "display": "inline-block", 9 | "padding": "0 2px" 10 | }, 11 | "attributes": { 12 | "iconName": "=if(@currentField >= 90, 'Emoji', if(@currentField >= 75, 'Emoji2', if(@currentField >= 60, 'EmojiNeutral', if(@currentField >= 0, 'EmojiDisappointed', 'Unknown'))))" 13 | } 14 | }, 15 | { 16 | "elmType": "span", 17 | "txtContent": "@currentField" 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /column-samples/number-quiz-smiley-face/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-quiz-smiley-face/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-trending-icon/number-trending-icon-with-difference.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "attributes": { 8 | "class": "=(if([$After] > [$Before], 'sp-field-trending--up', if([$After] < [$Before], 'sp-field-trending--down', ''))", 9 | "iconName": "=(if([$After] > [$Before], 'SortUp', if([$After] < [$Before], 'SortDown', ''))" 10 | }, 11 | "style": { 12 | "padding-left": "=if([$After] == [$Before], '12px', '0')" 13 | } 14 | }, 15 | { 16 | "elmType": "span", 17 | "txtContent": "[$After]" 18 | }, 19 | { 20 | "elmType": "span", 21 | "txtContent": "=if([$After] > [$Before], '(+' + toString([$After] - [$Before]) + ')', if([$After] < [$Before], '(-' + toString([$Before] - [$After]) + ')', ''))", 22 | "attributes": { 23 | "class": "=(if([$After] > [$Before], 'sp-field-trending--up', if([$After] < [$Before], 'sp-field-trending--down', ''))" 24 | }, 25 | "style": { 26 | "padding-left": "5px" 27 | } 28 | } 29 | ] 30 | } -------------------------------------------------------------------------------- /column-samples/number-trending-icon/number-trending-icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "hhttps://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "attributes": { 8 | "class": "=(if([$After] > [$Before], 'sp-field-trending--up', if([$After] < [$Before], 'sp-field-trending--down', ''))", 9 | "iconName": "=(if([$After] > [$Before], 'SortUp', if([$After] < [$Before], 'SortDown', ''))" 10 | }, 11 | "style": { 12 | "padding-left": "=if([$After] == [$Before], '12px', '0')" 13 | } 14 | }, 15 | { 16 | "elmType": "span", 17 | "txtContent": "[$After]" 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /column-samples/number-trending-icon/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-trending-icon/screenshot.png -------------------------------------------------------------------------------- /column-samples/number-trending-icon/screenshotWithDifference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-trending-icon/screenshotWithDifference.png -------------------------------------------------------------------------------- /column-samples/number-using-modulo-publish/README.md: -------------------------------------------------------------------------------- 1 | # Publishing Status 2 | 3 | ## Summary 4 | Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages 5 | 6 | **Before** 7 | ![screenshot of the sample before formatting](./example-before.jpg) 8 | **After** 9 | ![screenshot of the sample after formatting](./example-after.jpg) 10 | 11 | 12 | ## View requirements 13 | 14 | - Add the version column to the view, this must be done via the "Edit current view" or classic view editing page to see the version column option. 15 | 16 | ## Sample 17 | 18 | Solution|Author(s) 19 | --------|--------- 20 | publish-status-with-description.json | [Paul Bullock](https://twitter.com/pkbullock) 21 | 22 | ## Version history 23 | 24 | Version|Date|Comments 25 | -------|----|-------- 26 | 1.0| 20 May 2019|Initial release 27 | 28 | ## Disclaimer 29 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 30 | 31 | --- 32 | 33 | ## Additional notes 34 | 35 | 36 | - Example in the documentation where this is referenced: [https://docs.microsoft.com/en-gb/sharepoint/dev/declarative-customization/column-formatting#section-4](https://docs.microsoft.com/en-gb/sharepoint/dev/declarative-customization/column-formatting#section-4) 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /column-samples/number-using-modulo-publish/example-after.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-using-modulo-publish/example-after.jpg -------------------------------------------------------------------------------- /column-samples/number-using-modulo-publish/example-before.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/number-using-modulo-publish/example-before.jpg -------------------------------------------------------------------------------- /column-samples/number-using-modulo-publish/publish-status-with-description.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": "=if(Number(@currentField) % 1 == 0, 'sp-field-severity--good', if(Number(@currentField) > 1, 'sp-field-severity--warning', 'sp-field-severity--severeWarning')" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "span", 10 | "style": { 11 | "display": "inline-block", 12 | "padding": "4px 8px" 13 | }, 14 | "attributes": { 15 | "iconName" : "=if(Number(@currentField) % 1 == 0, 'Accept', if(Number(@currentField) > 1, 'Warning', 'ErrorBadge'))" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "=if(Number(@currentField) % 1 == 0, 'Published', if(Number(@currentField) > 1, 'Published with Draft', 'Draft with NO published version'))" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /column-samples/person-currentuser/person-currentuser.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField.title", 5 | "attributes": { 6 | "class": "=if(@me == @currentField.email, 'ms-fontColor-themePrimary ms-fontWeight-semibold', '')" 7 | } 8 | } -------------------------------------------------------------------------------- /column-samples/person-currentuser/person-currentuserAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField.title", 5 | "attributes": { 6 | "class": { 7 | "operator": "?", 8 | "operands": [ 9 | { 10 | "operator": "==", 11 | "operands": [ 12 | "@me", 13 | "@currentField.email" 14 | ] 15 | }, 16 | "ms-fontColor-themePrimary ms-fontWeight-semibold", 17 | "" 18 | ] 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /column-samples/person-currentuser/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/person-currentuser/screenshot.png -------------------------------------------------------------------------------- /column-samples/person-mailto/person-mailto.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "style": { 8 | "padding-right": "8px" 9 | }, 10 | "txtContent": "@currentField.title" 11 | }, 12 | { 13 | "elmType": "a", 14 | "attributes": { 15 | "iconName": "Mail", 16 | "class": "sp-field-quickActions", 17 | "href": "='mailto:' + @currentField.email + '?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n' + @currentField.title + '\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=' + [$ID]" 18 | } 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /column-samples/person-mailto/person-mailtoAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "style": { 8 | "padding-right": "8px" 9 | }, 10 | "txtContent": "@currentField.title" 11 | }, 12 | { 13 | "elmType": "a", 14 | "attributes": { 15 | "iconName": "Mail", 16 | "class": "sp-field-quickActions", 17 | "href": { 18 | "operator": "+", 19 | "operands": [ 20 | "mailto:", 21 | "@currentField.email", 22 | "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n", 23 | "@currentField.title", 24 | "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=", 25 | "[$ID]" 26 | ] 27 | } 28 | } 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /column-samples/person-mailto/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/person-mailto/screenshot.png -------------------------------------------------------------------------------- /column-samples/person-roundimage-format/person-roundimage-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "width": "32px", 9 | "height": "32px", 10 | "overflow": "hidden", 11 | "border-radius": "50%" 12 | }, 13 | "children": [ 14 | { 15 | "elmType": "img", 16 | "attributes": { 17 | "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email", 18 | "title": "@currentField.title" 19 | }, 20 | "style": { 21 | "position": "relative", 22 | "top": "50%", 23 | "left": "50%", 24 | "width": "100%", 25 | "height": "auto", 26 | "margin-left": "-50%", 27 | "margin-top": "-50%" 28 | } 29 | } 30 | ] 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /column-samples/person-roundimage-format/person-roundimage-formatAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "width": "32px", 9 | "height": "32px", 10 | "overflow": "hidden", 11 | "border-radius": "50%" 12 | }, 13 | "children": [ 14 | { 15 | "elmType": "img", 16 | "attributes": { 17 | "src": { 18 | "operator": "+", 19 | "operands": [ 20 | "/_layouts/15/userphoto.aspx?size=S&accountname=", 21 | "@currentField.email" 22 | ] 23 | }, 24 | "title": "@currentField.title" 25 | }, 26 | "style": { 27 | "position": "relative", 28 | "top": "50%", 29 | "left": "50%", 30 | "width": "100%", 31 | "height": "auto", 32 | "margin-left": "-50%", 33 | "margin-top": "-50%" 34 | } 35 | } 36 | ] 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /column-samples/person-roundimage-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/person-roundimage-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/picture-roundimage-format/README.md: -------------------------------------------------------------------------------- 1 | # Display a picture column as a circle 2 | 3 | ## Summary 4 | This sample applies styles to a parent `div` element and a child `img` element to show a picture column in a circle. 5 | 6 | The size can be easily adjusted by changing the default value of `32px` for both the `width` and `height` style attributes on the parent div. 7 | 8 | You can also adjust the `border-radius` value of the parent div to change it from a full circle (_50%_) to a rounded rectangle (_< 50%_). 9 | 10 | For best results, images should be square. 11 | 12 | ![screenshot of the sample](./screenshot.png) 13 | 14 | ## View requirements 15 | - This format can be applied to a Picture column 16 | 17 | ## Sample 18 | 19 | Solution|Author(s) 20 | --------|--------- 21 | picture-roundimage-format.json | [Chris Kent](https://twitter.com/thechriskent) 22 | 23 | ## Version history 24 | 25 | Version|Date|Comments 26 | -------|----|-------- 27 | 1.0|March 21, 2018|Initial release 28 | 1.1|August 20, 2018|Updated schema 29 | 30 | ## Disclaimer 31 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 32 | 33 | --- 34 | 35 | ## Additional notes 36 | This template is included in the [Column Formatter](https://github.com/SharePoint/sp-dev-solutions/blob/master/solutions/ColumnFormatter/README.md) webpart. 37 | 38 | - [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#me) 39 | 40 | -------------------------------------------------------------------------------- /column-samples/picture-roundimage-format/picture-roundimage-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "div", 7 | "style": { 8 | "width": "32px", 9 | "height": "32px", 10 | "overflow": "hidden", 11 | "border-radius": "50%" 12 | }, 13 | "children": [ 14 | { 15 | "elmType": "img", 16 | "attributes": { 17 | "src": "@currentField" 18 | }, 19 | "style": { 20 | "position": "relative", 21 | "top": "50%", 22 | "left": "50%", 23 | "width": "100%", 24 | "height": "auto", 25 | "margin-left": "-50%", 26 | "margin-top": "-50%" 27 | } 28 | } 29 | ] 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /column-samples/picture-roundimage-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/picture-roundimage-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/readme.md: -------------------------------------------------------------------------------- 1 | # SharePoint Column Formatting samples 2 | 3 | Samples for the SharePoint Column Formatting feature to demonstrate different capabilities and possibilities. 4 | 5 | Each sample has its own dedicated readme file with a screenshot to show the result of the sample applied to a SharePoint column. 6 | 7 | Note: Excel-style expressions are not supported on SP 2019. You need to use the AST(Abstract Syntax Tree) version of the JSON from the sample repository on SP 2019. 8 | -------------------------------------------------------------------------------- /column-samples/text-bing-map/text-bing-map-Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-bing-map/text-bing-map-Screenshot.png -------------------------------------------------------------------------------- /column-samples/text-bing-map/text-bing-map.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "class": " ms-borderColor-neutralLighter", 6 | "src": "='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/'+[$Address]+'?mapSize=280,215&key=[Insert Your Bing Map API Key Here]' " 7 | }, 8 | "txtContent": "[$Address]" 9 | } -------------------------------------------------------------------------------- /column-samples/text-conditional-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-conditional-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-conditional-format/text-conditional-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "span", 10 | "style": { 11 | "display": "inline-block", 12 | "padding": "0 4px" 13 | }, 14 | "attributes": { 15 | "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /column-samples/text-contains/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-contains/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-contains/text-contains.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "class": "=if(indexOf(toLowerCase(@currentField),'dead') != -1, 'ms-fontColor-redDark','')" 7 | } 8 | } -------------------------------------------------------------------------------- /column-samples/text-isbn-image/text-isbn-image.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": "='http://covers.openlibrary.org/b/isbn/' + @currentField + '-S.jpg'" 6 | } 7 | } -------------------------------------------------------------------------------- /column-samples/text-isbn-image/text-isbn-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-isbn-image/text-isbn-image.png -------------------------------------------------------------------------------- /column-samples/text-isbn-image/text-isbn-imageAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": { 6 | "operator": "+", 7 | "operands": [ 8 | "http://covers.openlibrary.org/b/isbn/", 9 | "@currentField", 10 | "-S.jpg" 11 | ] 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /column-samples/text-local-image/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-local-image/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-local-image/text-hardcoded-image.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": "='https://thechriskent.sharepoint.com/sites/WarriorHorses/Shared Documents/Evilness/' + @currentField + '.png'" 6 | }, 7 | "style": { 8 | "width": "64px", 9 | "height": "64px" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/text-local-image/text-hardcoded-imageAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": { 6 | "operator": "+", 7 | "operands": [ 8 | "https://thechriskent.sharepoint.com/sites/WarriorHorses/Shared Documents/Evilness/", 9 | "@currentField", 10 | ".png" 11 | ] 12 | } 13 | }, 14 | "style": { 15 | "width": "64px", 16 | "height": "64px" 17 | } 18 | } -------------------------------------------------------------------------------- /column-samples/text-local-image/text-local-image.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": "=@currentWeb + '/Shared Documents/Evilness/' + @currentField + '.png'" 6 | }, 7 | "style": { 8 | "width": "64px", 9 | "height": "64px" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/text-local-image/text-relative-image.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": "='../../Shared Documents/Evilness/' + @currentField + '.png'" 6 | }, 7 | "style": { 8 | "width": "64px", 9 | "height": "64px" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/text-local-image/text-relative-imageAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "img", 4 | "attributes": { 5 | "src": { 6 | "operator": "+", 7 | "operands": [ 8 | "../../Shared Documents/Evilness/", 9 | "@currentField", 10 | ".png" 11 | ] 12 | } 13 | }, 14 | "style": { 15 | "width": "64px", 16 | "height": "64px" 17 | } 18 | } -------------------------------------------------------------------------------- /column-samples/text-local-link/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-local-link/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-local-link/text-hardcoded-link.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "href": "='https://thechriskent.sharepoint.com/sites/WarriorHorses/Lists/' + @currentField", 7 | "target": "_blank" 8 | } 9 | } -------------------------------------------------------------------------------- /column-samples/text-local-link/text-hardcoded-linkAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "href": { 7 | "operator": "+", 8 | "operands": [ 9 | "https://thechriskent.sharepoint.com/sites/WarriorHorses/Lists/", 10 | "@currentField" 11 | ] 12 | }, 13 | "target": "_blank" 14 | } 15 | } -------------------------------------------------------------------------------- /column-samples/text-local-link/text-local-link.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "href": "=@currentWeb + '/Lists/' + @currentField", 7 | "target": "_blank" 8 | } 9 | } -------------------------------------------------------------------------------- /column-samples/text-local-link/text-relative-link.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "href": "='../' + @currentField", 7 | "target": "_blank" 8 | } 9 | } -------------------------------------------------------------------------------- /column-samples/text-local-link/text-relative-linkAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "a", 4 | "txtContent": "@currentField", 5 | "attributes": { 6 | "href": { 7 | "operator": "+", 8 | "operands": [ 9 | "'../", 10 | "@currentField" 11 | ] 12 | }, 13 | "target": "_blank" 14 | } 15 | } -------------------------------------------------------------------------------- /column-samples/text-ryg-status-indicator/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-ryg-status-indicator/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-ryg-status-indicator/text-ryg-status-indicator.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "style": { 8 | "width": "14px", 9 | "height": "14px", 10 | "border-radius": "50%" 11 | }, 12 | "attributes": { 13 | "class": "=if(@currentField == 'Green', 'ms-bgColor-green', if(@currentField == 'Yellow', 'ms-bgColor-yellow', if(@currentField == 'Red', 'ms-bgColor-red', '')))" 14 | } 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /column-samples/text-ryg-status-indicator/text-ryg-status-indicatorAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "span", 7 | "style": { 8 | "width": "14px", 9 | "height": "14px", 10 | "border-radius": "50%" 11 | }, 12 | "attributes": { 13 | "class": { 14 | "operator": "?", 15 | "operands": [ 16 | { 17 | "operator": "==", 18 | "operands": [ 19 | "@currentField", 20 | "Green" 21 | ] 22 | }, 23 | "ms-bgColor-green", 24 | { 25 | "operator": "?", 26 | "operands": [ 27 | { 28 | "operator": "==", 29 | "operands": [ 30 | "@currentField", 31 | "Yellow" 32 | ] 33 | }, 34 | "ms-bgColor-yellow", 35 | { 36 | "operator": "?", 37 | "operands": [ 38 | { 39 | "operator": "==", 40 | "operands": [ 41 | "@currentField", 42 | "Red" 43 | ] 44 | }, 45 | "ms-bgColor-red", 46 | "" 47 | ] 48 | } 49 | ] 50 | } 51 | ] 52 | } 53 | } 54 | } 55 | ] 56 | } -------------------------------------------------------------------------------- /column-samples/text-startswith-callingcodes/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-startswith-callingcodes/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-startswith-callingcodes/text-startswith-callingcodes.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "children": [ 5 | { 6 | "elmType": "img", 7 | "attributes": { 8 | "src": "='http://flags.fmcdn.net/data/flags/h20/' + if(indexOf(@currentField,'+358')==0,'fi', if(indexOf(@currentField,'+61')==0,'au', if(indexOf(@currentField,'+46')==0,'se', if(indexOf(@currentField,'+47')==0,'no', if(indexOf(@currentField,'+7')==0,'ru', if(indexOf(@currentField,'+32')==0,'be', if(indexOf(@currentField,'+31')==0,'nl', if(indexOf(@currentField,'+43')==0,'at', if(indexOf(@currentField,'+353')==0,'ie', if(indexOf(@currentField,'+39')==0,'it', 'us')))))))))) + '.png'", 9 | "title": "=if(indexOf(@currentField,'+358')==0,'Finland', if(indexOf(@currentField,'+61')==0,'Australia', if(indexOf(@currentField,'+46')==0,'Sweden', if(indexOf(@currentField,'+47')==0,'Norway', if(indexOf(@currentField,'+7')==0,'Russia', if(indexOf(@currentField,'+32')==0,'Belgium', if(indexOf(@currentField,'+31')==0,'Netherlands', if(indexOf(@currentField,'+43')==0,'Austria', if(indexOf(@currentField,'+353')==0,'Ireland', if(indexOf(@currentField,'+39')==0,'Italy', 'USA'))))))))))" 10 | }, 11 | "style": { 12 | "max-width": "23px", 13 | "padding": "0 6px 0 0" 14 | } 15 | }, 16 | { 17 | "elmType": "span", 18 | "txtContent": "@currentField" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /column-samples/text-strikethrough/README.md: -------------------------------------------------------------------------------- 1 | # Strikethrough on Completion 2 | 3 | ## Summary 4 | 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. 5 | 6 | > If this is NOT the title field, then the `ms-fontColor-neutralPrimary` class can be removed to ensure styles match. 7 | 8 | ![screenshot of the sample](./screenshot.png) 9 | 10 | ## View requirements 11 | - This format can be applied to any column type (but is intended for text fields) 12 | - This format expects a Yes/No field with an internal name of `Complete` 13 | 14 | ## Sample 15 | 16 | Solution|Author(s) 17 | --------|--------- 18 | text-strikethrough.json | [Chris Kent](https://twitter.com/thechriskent) 19 | 20 | ## Version history 21 | 22 | Version|Date|Comments 23 | -------|----|-------- 24 | 1.0|August 18, 2018|Initial release 25 | 26 | ## Disclaimer 27 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 28 | 29 | --- 30 | 31 | ## Additional notes 32 | 33 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 34 | 35 | -------------------------------------------------------------------------------- /column-samples/text-strikethrough/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-strikethrough/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-strikethrough/text-strikethrough.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "text-decoration": "=if([$Complete],'line-through','inherit')" 7 | }, 8 | "attributes": { 9 | "class": "ms-fontColor-neutralPrimary" 10 | } 11 | } -------------------------------------------------------------------------------- /column-samples/text-strikethrough/text-strikethroughAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "text-decoration": { 7 | "operator": "?", 8 | "operands": [ 9 | "[$Complete]", 10 | "line-through", 11 | "inherit" 12 | ] 13 | } 14 | }, 15 | "attributes": { 16 | "class": "ms-fontColor-neutralPrimary" 17 | } 18 | } -------------------------------------------------------------------------------- /column-samples/text-wrap-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/text-wrap-format/screenshot.png -------------------------------------------------------------------------------- /column-samples/text-wrap-format/text-wrap-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "@currentField", 5 | "style": { 6 | "white-space": "normal", 7 | "padding": "11px 0", 8 | "display": "block" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /column-samples/yesno-checkbox/README.md: -------------------------------------------------------------------------------- 1 | # Yes/No Checkbox 2 | 3 | ## Summary 4 | This sample uses [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors. 5 | 6 | The icons and theme colors are conditionally applied based on the field's value. By using the `ms-fontColor` classes, the icon works well in both light and dark themes (as well as custom themes). In addition, regardless of value, the `ms-fontSize-l` class is applied to make the icon large enough to stand on its own. 7 | 8 | |Value|Class|Icon| 9 | |---|---|---| 10 | |Yes|ms-fontColor-neutralPrimary|CheckboxComposite| 11 | |No|ms-fontColor-neutralTertiary|Checkbox| 12 | 13 | ![screenshot of the sample](./screenshot.png) 14 | 15 | ## View requirements 16 | - This format can be applied to a Yes/No column 17 | 18 | ## Sample 19 | 20 | Solution|Author(s) 21 | --------|--------- 22 | yesno-checkbox.json | [Chris Kent](https://twitter.com/thechriskent) 23 | 24 | ## Version history 25 | 26 | Version|Date|Comments 27 | -------|----|-------- 28 | 1.0|August 18, 2018|Initial release 29 | 30 | ## Disclaimer 31 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 32 | 33 | --- 34 | 35 | ## Additional notes 36 | 37 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 38 | 39 | 40 | -------------------------------------------------------------------------------- /column-samples/yesno-checkbox/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/yesno-checkbox/screenshot.png -------------------------------------------------------------------------------- /column-samples/yesno-checkbox/yesno-checkbox.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "iconName": "=if(@currentField,'CheckboxComposite','Checkbox')", 6 | "class": "=if(@currentField,'ms-fontColor-neutralPrimary','ms-fontColor-neutralTertiary')+' ms-font-l'" 7 | } 8 | } -------------------------------------------------------------------------------- /column-samples/yesno-checkbox/yesno-checkboxAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "iconName": { 6 | "operator": "?", 7 | "operands": [ 8 | "@currentField", 9 | "CheckboxComposite", 10 | "Checkbox" 11 | ] 12 | }, 13 | "class": { 14 | "operator": "+", 15 | "operands": [ 16 | { 17 | "operator": "?", 18 | "operands": [ 19 | "@currentField", 20 | "ms-fontColor-neutralPrimary", 21 | "ms-fontColor-neutralTertiary" 22 | ] 23 | }, 24 | " ms-font-l" 25 | ] 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /column-samples/yesno-checkmark-format/yesno-checkmark-format.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/yesno-checkmark-format/yesno-checkmark-format.PNG -------------------------------------------------------------------------------- /column-samples/yesno-checkmark-format/yesno-checkmark-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "", 5 | "attributes": { 6 | "class": "=if(@currentField == '', 'sp-field-severity--blocked', if(@currentField, 'sp-field-severity--good', 'sp-field-severity--low')) + ' ms-fontColor-neutralSecondary'" 7 | }, 8 | "children": [ 9 | { 10 | "elmType": "span", 11 | "style": { 12 | "display": "inline-block", 13 | "padding": "0 4px" 14 | }, 15 | "attributes": { 16 | "iconName": "=if(@currentField == '', 'ErrorBadge', if(@currentField, 'CheckMark', ''))" 17 | } 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /column-samples/yesno-checkmark-format/yesno-checkmark-formatAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "txtContent": "", 5 | "attributes": { 6 | "class": { 7 | "operator": "+", 8 | "operands": [ 9 | { 10 | "operator": "?", 11 | "operands": [ 12 | { 13 | "operator": "==", 14 | "operands": [ 15 | "@currentField", 16 | "" 17 | ] 18 | }, 19 | "sp-field-severity--blocked", 20 | { 21 | "operator": "?", 22 | "operands": [ 23 | "@currentField", 24 | "sp-field-severity--good", 25 | "sp-field-severity--low" 26 | ] 27 | } 28 | ] 29 | }, 30 | " ms-fontColor-neutralSecondary" 31 | ] 32 | } 33 | }, 34 | "children": [ 35 | { 36 | "elmType": "span", 37 | "style": { 38 | "display": "inline-block", 39 | "padding": "0 4px" 40 | }, 41 | "attributes": { 42 | "iconName": { 43 | "operator": "?", 44 | "operands": [ 45 | { 46 | "operator": "==", 47 | "operands": [ 48 | "@currentField", 49 | "" 50 | ] 51 | }, 52 | "ErrorBadge", 53 | { 54 | "operator": "?", 55 | "operands": [ 56 | "@currentField", 57 | "CheckMark", 58 | "" 59 | ] 60 | } 61 | ] 62 | } 63 | } 64 | } 65 | ] 66 | } -------------------------------------------------------------------------------- /column-samples/yesno-checkmark/README.md: -------------------------------------------------------------------------------- 1 | # Yes/No Column Check Mark 2 | 3 | ## Summary 4 | 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` [Office UI Fabric predefined icon](https://developer.microsoft.com/en-us/fabric#/styles/icons). 5 | 6 | ![screenshot of the sample](./screenshot.png) 7 | 8 | ## View requirements 9 | - This format can be applied to a Yes/No column 10 | 11 | ## Sample 12 | 13 | Solution|Author(s) 14 | --------|--------- 15 | yesno-checkmark.json | Travis Lingenfelder 16 | 17 | ## Version history 18 | 19 | Version|Date|Comments 20 | -------|----|-------- 21 | 1.0|November 27, 2017|Initial release 22 | 1.1|March 22, 2018|Simplified logic 23 | 1.2|August 20, 2018|Switched to Excel-style expression 24 | 25 | ## Disclaimer 26 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 27 | 28 | --- 29 | 30 | ## Additional notes 31 | 32 | For more information on using this custom formatting see the article [Check Mark SharePoint Modern List Column Format](http://www.constellationsolutions.com/how-to/check-mark-sharepoint-modern-list-column-format/) 33 | 34 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 35 | 36 | -------------------------------------------------------------------------------- /column-samples/yesno-checkmark/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/column-samples/yesno-checkmark/screenshot.png -------------------------------------------------------------------------------- /column-samples/yesno-checkmark/yesno-checkmark.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "font-weight": "bold" 6 | }, 7 | "attributes": { 8 | "iconName": "=if(@currentField, 'CheckMark', '')" 9 | } 10 | } -------------------------------------------------------------------------------- /column-samples/yesno-checkmark/yesno-checkmarkAST.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "style": { 5 | "font-weight": "bold" 6 | }, 7 | "attributes": { 8 | "iconName": { 9 | "operator": "?", 10 | "operands": [ 11 | "@currentField", 12 | "CheckMark", 13 | "" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | This is where the docs for this repo live. They are created with MKDocs. Wow! -------------------------------------------------------------------------------- /docs/columnsamples.md: -------------------------------------------------------------------------------- 1 | # List of Column Formatting Samples 2 | 3 | This is an alphabetical list of all the **column formatting** samples available. Each sample has a dedicated readme file to explain setup instructions and demonstrated capability. 4 | 5 | !!! Tip 6 | Depending on what you are looking for, you may find the sample [groupings](./groupings/columntype.md) more helpful. 7 | 8 | -------------------------------------------------------------------------------- /docs/contributing/docs.md: -------------------------------------------------------------------------------- 1 | # Update the Docs 2 | 3 | Coming soon! 4 | 5 | -------------------------------------------------------------------------------- /docs/contributing/forking.md: -------------------------------------------------------------------------------- 1 | # Forking? 2 | 3 | Coming soon! 4 | 5 | -------------------------------------------------------------------------------- /docs/contributing/index.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | **This project welcomes contributions!** 4 | _(tweaks, fixes, samples, issues, suggestions, and more)_ 5 | 6 | ## Contributor License Agreement 7 | 8 | Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com. 9 | 10 | When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA. 11 | 12 | ## Code of Conduct 13 | 14 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 15 | 16 | ## What Can I Do? 17 | 18 | - [Submit an issue or suggestion](./issues.md) 19 | - [Minor update or fix to an existing sample](./forking.md) 20 | - [Add a new sample](./sample.md) 21 | - [Update these docs](./docs.md) 22 | 23 | > Sharing is caring! 24 | 25 | -------------------------------------------------------------------------------- /docs/contributing/issues.md: -------------------------------------------------------------------------------- 1 | # Submitting an Issue or Suggestion 2 | 3 | Coming soon! 4 | 5 | -------------------------------------------------------------------------------- /docs/contributing/pullrequest.md: -------------------------------------------------------------------------------- 1 | # Submitting a Pull Request (PR) 2 | 3 | Coming soon! 4 | 5 | -------------------------------------------------------------------------------- /docs/contributing/sample.md: -------------------------------------------------------------------------------- 1 | # Creating a Sample 2 | 3 | Coming soon! 4 | 5 | ## Sample Final Checklist 6 | 7 | -------------------------------------------------------------------------------- /docs/css/extra.css: -------------------------------------------------------------------------------- 1 | .md-logo{ 2 | width: 80px; 3 | } 4 | .md-logo img { 5 | width: 100% !important; 6 | height: auto !important; 7 | margin-top: -0.25em; 8 | } 9 | .md-header-nav__topic { 10 | margin-left: -16px; 11 | } -------------------------------------------------------------------------------- /docs/gettingstarted/columnformats.md: -------------------------------------------------------------------------------- 1 | # Applying Column Formats 2 | 3 | Column Formats are applied directly to list fields or site columns and stored with them. 4 | 5 | ## Format this column menu 6 | 7 | Most supported column types provide a **"Format this column"** menu option in the column menu within the modern list view: 8 | 9 | ![format menu](../img/FormatMenu.png) 10 | 11 | This will open the **Format column panel** where you can **paste** your format and click **Save** to apply: 12 | 13 | ![format column panel](../img/FormatColumnPanel.png) 14 | 15 | Some column types provide **Design Mode** wizards. These can be helpful, but to apply a format directly click the **Advanced mode** link and you can now **paste** your format and click **Save** to apply: 16 | 17 | ![design mode](../img/DesignMode.png) 18 | 19 | ## Field Settings 20 | 21 | You can also apply formats directly in the field settings screen for both list fields and site columns. Just navigate to the field settings screen (List Settings > Field) and near the bottom is a spot where you can **paste** your format and save it with your field or site column: 22 | 23 | ![field settings](../img/FieldSetting.png) 24 | 25 | !!! Note 26 | This is currently the only way to apply formats directly to fields of type `Currency` or `Location` since they don't provide a Format this column menu option. 27 | 28 | -------------------------------------------------------------------------------- /docs/gettingstarted/index.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | Each sample is located in it's own folder with a README file that provides details about how it was made and what it's demonstrating, column/view requirements, and any extra information to help you get the most out of it. 4 | 5 | The samples themselves are located in the `.json` file(s) within each sample. You can copy and paste directly from these files right into your site! 6 | 7 | ## Using samples directly from github 8 | 9 | 1. Navigate to a **sample folder** 10 | 2. Ensure your column/view meets the listed **View Requirements** 11 | 3. Click on the **`.json` sample file** 12 | 4. **Copy** the JSON directly from the screen 13 | 5. **Paste** into your site! 14 | 15 | ![Copy from github](../img/CopyFromGithub.gif) 16 | 17 | No need to clone or download the repo or any files! _(unless you're interested in [contributing](../contributing/index.md))_ 18 | 19 | !!! info 20 | - See [Applying Column Formats](./columnformats.md) for details about where to paste column samples 21 | - See [Applying View Formats](./viewformats.md) for details about where to paste view samples 22 | 23 | -------------------------------------------------------------------------------- /docs/gettingstarted/viewformats.md: -------------------------------------------------------------------------------- 1 | # Applying View Formats 2 | 3 | View Formats are applied to individual views for a given list/library and stored with them. 4 | 5 | ## Format current view menu 6 | 7 | Clicking on the view dropdown within your modern list view will provide a **"Format current view"** menu option: 8 | 9 | ![Format view menu](../img/FormatViewMenu.png) 10 | 11 | This will open the **Format view panel** where you can **paste** your format and clik **Save** to apply: 12 | 13 | ![Format view panel](../img/FormatViewPanel.png) 14 | 15 | !!! tip 16 | You can apply multiple view formats to a list by using different views. This can make for powerful displays of the same data. 17 | 18 | -------------------------------------------------------------------------------- /docs/img/CopyFromGithub.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/CopyFromGithub.gif -------------------------------------------------------------------------------- /docs/img/DesignMode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/DesignMode.png -------------------------------------------------------------------------------- /docs/img/FieldSetting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/FieldSetting.png -------------------------------------------------------------------------------- /docs/img/FormatColumnPanel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/FormatColumnPanel.png -------------------------------------------------------------------------------- /docs/img/FormatMenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/FormatMenu.png -------------------------------------------------------------------------------- /docs/img/FormatViewMenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/FormatViewMenu.png -------------------------------------------------------------------------------- /docs/img/FormatViewPanel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/FormatViewPanel.png -------------------------------------------------------------------------------- /docs/img/LFAnimation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/docs/img/LFAnimation.gif -------------------------------------------------------------------------------- /docs/viewsamples.md: -------------------------------------------------------------------------------- 1 | # List of View Formatting Samples 2 | 3 | This is an alphabetical list of all the **view formatting** samples available. Each sample has a dedicated readme file to explain setup instructions and demonstrated capability. 4 | 5 | !!! Tip 6 | Depending on what you are looking for, you may find the sample [groupings](./groupings/columntype.md) more helpful. 7 | 8 | -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/o365cli/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "label": "Site Column Formatting JSON Definition Deployment", 8 | "type": "shell", 9 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.SiteColumn.ps1" 10 | }, 11 | { 12 | "label": "List Column Formatting JSON Definition Deployment", 13 | "type": "shell", 14 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.ListColumn.ps1" 15 | }, 16 | { 17 | "label": "List View Formatting JSON Definition Deployment", 18 | "type": "shell", 19 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.ListView.ps1" 20 | }, 21 | { 22 | "label": "List Column Formatting JSON Definition Deployment (CLI)", 23 | "type": "shell", 24 | "command": "./CLI/ListFormatting.Deployment.ListColumn.sh" 25 | }, 26 | { 27 | "label": "List View Formatting JSON Definition Deployment (CLI)", 28 | "type": "shell", 29 | "command": "./CLI/ListFormatting.Deployment.ListView.sh" 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/o365cli/CLI/ListFormatting.Deployment.ListColumn.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # Update siteURL 4 | siteURL=https://SharePointTenantName.sharepoint.com 5 | 6 | # Update List Name 7 | listName='Task List' # NOTE: This should use the display name of the list, not the internal name 8 | 9 | # Update List Column 10 | listColumn='Task Status' 11 | 12 | # Update File Reference to the JSON file you would like to deploy 13 | jsonDefinitionFile="./JSON Definitions/ListFormatting.ColumnDefinition.ColumnName.json" 14 | 15 | # get file contents and print as a single line 16 | json=$(cat "$jsonDefinitionFile" | jq -c '.') 17 | echo "Configuring column formatting..." 18 | # update field. notice the special way of escaping the JSON string in CustomFormatter 19 | o365 spo field set --webUrl "$siteURL" --listTitle "$listName" --name "$listColumn" --CustomFormatter '`'"$json"'`' --verbose -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/o365cli/CLI/ListFormatting.Deployment.ListView.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # Update siteURL 4 | siteURL=https://SharePointTenantName.sharepoint.com 5 | 6 | # Update List Name 7 | listName='Student Grades' # NOTE: This should use the display name of the list, not the internal name 8 | 9 | # Update View name 10 | viewName='StudentGradesView_CLI' # NOTE: This should use the display name of the view, not the internal name 11 | 12 | # Update File Reference to the JSON file you would like to deploy 13 | jsonDefinitionFile="./JSON Definitions/ListFormatting.ViewDefinition.ViewName.json" 14 | # get file contents and print as a single line 15 | json=$(cat "$jsonDefinitionFile" | jq -c '.') 16 | echo "Configuring view formatting..." 17 | # update list view. notice the special way of escaping the JSON string in CustomFormatter 18 | o365 spo list view set --webUrl "$siteURL" --listTitle "$listName" --viewTitle "$viewName" --CustomFormatter '`'"$json"'`' --verbose -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/o365cli/JSON Definitions/ListFormatting.ColumnDefinition.ColumnName.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "span", 10 | "style": { 11 | "display": "inline-block", 12 | "padding": "0 4px" 13 | }, 14 | "attributes": { 15 | "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/powershell/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "label": "Site Column Formatting JSON Definition Deployment", 8 | "type": "shell", 9 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.SiteColumn.ps1" 10 | }, 11 | { 12 | "label": "List Column Formatting JSON Definition Deployment", 13 | "type": "shell", 14 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.ListColumn.ps1" 15 | }, 16 | { 17 | "label": "List View Formatting JSON Definition Deployment", 18 | "type": "shell", 19 | "command": "powershell .\\PowerShell\\ListFormatting.Deployment.ListView.ps1" 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /tools/general-dynamic-deployment-with-vscode/powershell/JSON Definitions/ListFormatting.ColumnDefinition.ColumnName.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", 3 | "elmType": "div", 4 | "attributes": { 5 | "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'" 6 | }, 7 | "children": [ 8 | { 9 | "elmType": "span", 10 | "style": { 11 | "display": "inline-block", 12 | "padding": "0 4px" 13 | }, 14 | "attributes": { 15 | "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))" 16 | } 17 | }, 18 | { 19 | "elmType": "span", 20 | "txtContent": "@currentField" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /view-samples/README-template.md: -------------------------------------------------------------------------------- 1 | # Title of the sample 2 | 3 | ## Summary 4 | Short summary on functionality and details to help explain the format. 5 | 6 | [picture of the format in action] 7 | 8 | ## View requirements 9 | - Details about the types of column being referenced 10 | 11 | ## Sample 12 | 13 | Solution|Author(s) 14 | --------|--------- 15 | json-file-name | Author details 16 | 17 | ## Version history 18 | 19 | Version|Date|Comments 20 | -------|----|-------- 21 | 1.0|August 29, 2025|Initial release 22 | 23 | ## Disclaimer 24 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 25 | 26 | --- 27 | 28 | ## Additional notes 29 | Any potential additional notes to get included in the readme around the sample with additional pictures etc. 30 | 31 | - topic 1 32 | - topic 2 33 | - topic 3 34 | 35 | -------------------------------------------------------------------------------- /view-samples/alternating-rowclass/alternating-rowclass.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if(@rowIndex % 2 == 0,'ms-bgColor-themeLighter ms-bgColor-themeLight--hover','')" 4 | } -------------------------------------------------------------------------------- /view-samples/alternating-rowclass/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/alternating-rowclass/screenshot.png -------------------------------------------------------------------------------- /view-samples/alternating-rowclass/screenshotCombined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/alternating-rowclass/screenshotCombined.png -------------------------------------------------------------------------------- /view-samples/alternating-rowclass/screenshotFiltered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/alternating-rowclass/screenshotFiltered.png -------------------------------------------------------------------------------- /view-samples/alternating-rowclass/screenshotSorted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/alternating-rowclass/screenshotSorted.png -------------------------------------------------------------------------------- /view-samples/bar-graph-format/bargraph.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/bar-graph-format/bargraph.gif -------------------------------------------------------------------------------- /view-samples/bar-graph-format/bargraphnormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/bar-graph-format/bargraphnormal.png -------------------------------------------------------------------------------- /view-samples/birthday-format/birthdayScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/birthday-format/birthdayScreenshot.png -------------------------------------------------------------------------------- /view-samples/budget-tracker/assets/Finish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/budget-tracker/assets/Finish.png -------------------------------------------------------------------------------- /view-samples/budget-tracker/assets/credential-popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/budget-tracker/assets/credential-popup.png -------------------------------------------------------------------------------- /view-samples/budget-tracker/assets/page-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/budget-tracker/assets/page-review.png -------------------------------------------------------------------------------- /view-samples/budget-tracker/assets/security-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/budget-tracker/assets/security-warning.png -------------------------------------------------------------------------------- /view-samples/budget-tracker/images/budget-tracker-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/budget-tracker/images/budget-tracker-header.png -------------------------------------------------------------------------------- /view-samples/bulletin-board-format/BulletinBoardDetails.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/bulletin-board-format/BulletinBoardDetails.gif -------------------------------------------------------------------------------- /view-samples/bulletin-board-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/bulletin-board-format/screenshot.png -------------------------------------------------------------------------------- /view-samples/bulletin-board-format/screenshotWithButtons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/bulletin-board-format/screenshotWithButtons.png -------------------------------------------------------------------------------- /view-samples/choice-conditional-format/README.md: -------------------------------------------------------------------------------- 1 | # Conditional formatting based on a Choice field 2 | 3 | ## Summary 4 | 5 | This sample applies conditional formatting to list view rows depending on the value of a "Status" Choice field. 6 | 7 | ![SharePoint list with view formatted with conditional formatting](./images/sample01.png) 8 | 9 | ## View requirements 10 | - The format expects a Choice column with an internal name of `Status` 11 | - The values for `Status` in this sample are: 12 | - Awaiting Approval 13 | - Complete 14 | - In Progress 15 | - Ready 16 | 17 | ## Sample 18 | 19 | Solution|Author(s) 20 | --------|--------- 21 | choice-conditional-formatting.json | Eric Skaggs (@skaggej) 22 | 23 | ## Version history 24 | 25 | Version | Date | Comments 26 | ------- | ---- | -------- 27 | 1.0 | January 18, 2019 | Initial release 28 | 29 | ## Disclaimer 30 | 31 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 32 | 33 | --- 34 | 35 | ## Additional notes 36 | None 37 | 38 | -------------------------------------------------------------------------------- /view-samples/choice-conditional-format/images/sample01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/choice-conditional-format/images/sample01.png -------------------------------------------------------------------------------- /view-samples/column-graph-format/columngraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/column-graph-format/columngraph.png -------------------------------------------------------------------------------- /view-samples/column-graph-format/columngraph_with_title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/column-graph-format/columngraph_with_title.png -------------------------------------------------------------------------------- /view-samples/contact-card-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contact-card-format/screenshot.png -------------------------------------------------------------------------------- /view-samples/contact-card-format/screenshotResponsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contact-card-format/screenshotResponsive.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Actually a Lemon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Actually a Lemon.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Chocolate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Chocolate.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Green.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Navel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Navel.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Poisoned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Poisoned.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/Fruit/Red Delicious.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/Fruit/Red Delicious.png -------------------------------------------------------------------------------- /view-samples/contenttype-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/contenttype-format/screenshot.png -------------------------------------------------------------------------------- /view-samples/current-year-rowclass/README.md: -------------------------------------------------------------------------------- 1 | # Current Year Row Class 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![Screenshot](./screenshot.png) 7 | 8 | ## View requirements 9 | 10 | |Type|Internal Name|Required| 11 | |---|---|:---:| 12 | |Date|Died|Yes| 13 | 14 | ## Sample 15 | 16 | Solution|Author(s) 17 | --------|--------- 18 | current-year-rowclass | [Chris Kent](https://twitter.com/thechriskent) 19 | 20 | ## Version history 21 | 22 | Version|Date|Comments 23 | -------|----|-------- 24 | 1.0|October 2, 2019|Initial release 25 | 26 | ## Disclaimer 27 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 28 | 29 | --- 30 | 31 | -------------------------------------------------------------------------------- /view-samples/current-year-rowclass/current-year-rowclass.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if(getYear(@now)==getYear([$Died]),'ms-bgColor-themeTertiary','')" 4 | } -------------------------------------------------------------------------------- /view-samples/current-year-rowclass/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/current-year-rowclass/screenshot.png -------------------------------------------------------------------------------- /view-samples/custom-header-format/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/custom-header-format/screenshot.png -------------------------------------------------------------------------------- /view-samples/custom-header-format/screenshotRepeating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/custom-header-format/screenshotRepeating.png -------------------------------------------------------------------------------- /view-samples/custom-hover-cards/README.md: -------------------------------------------------------------------------------- 1 | # Custom hover card on List view 2 | 3 | ## Summary 4 | The following image shows a list with a custom hover added to a List view: 5 | 6 | On hover - Metadata on the column "Status" is made available via view formatting 7 | 8 | ![screenshot of the sample](./Status_hover.png) 9 | 10 | ## View requirements 11 | - This format can be applied to any column type though the example is based on - 12 | 13 | Column Name |Type 14 | --------------------|-------------- 15 | Status | Choice 16 | Product ID | Single Line Text 17 | PackedDate | Date and Time 18 | ShippedDate | Date and Time 19 | InTransitStartDate | Date and Time 20 | DeliveredDate | Date and Time 21 | Product Photo | Picture 22 | 23 | ## Sample 24 | 25 | Solution|Author(s) 26 | --------|--------- 27 | custom-hover-card.json | Niket Jain 28 | 29 | ## Version history 30 | 31 | Version|Date|Comments 32 | -------|----|-------- 33 | 1.0|April 08, 2020|Initial release 34 | 35 | 36 | ## Disclaimer 37 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 38 | 39 | --- 40 | 41 | ## Additional notes 42 | This sample uses icons from the Office UI Fabric 43 | 44 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 45 | 46 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 47 | 48 | 49 | -------------------------------------------------------------------------------- /view-samples/custom-hover-cards/Status_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/custom-hover-cards/Status_hover.png -------------------------------------------------------------------------------- /view-samples/date-conditional-format/README.md: -------------------------------------------------------------------------------- 1 | # Conditional formatting based on date 2 | 3 | ## Summary 4 | 5 | This sample applies conditional formatting to list view rows depending on the value of a DateTime field. 6 | 7 | ![SharePoint list with view formatted with conditional formatting](./listformatting-additionalrowclass.png) 8 | 9 | ## View requirements 10 | - The format expects a DateTime column with an internal name of `DueDate` 11 | 12 | ## Sample 13 | 14 | Solution|Author(s) 15 | --------|--------- 16 | date-conditional-formatting.json | Lincoln DeMaris 17 | 18 | ## Version history 19 | 20 | Version|Date|Comments 21 | -------|----|-------- 22 | 1.0|August 10, 2018|Initial release 23 | 24 | ## Disclaimer 25 | 26 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 27 | 28 | --- 29 | 30 | ## Additional notes 31 | None 32 | 33 | -------------------------------------------------------------------------------- /view-samples/date-conditional-format/date-conditional-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')" 4 | } 5 | -------------------------------------------------------------------------------- /view-samples/date-conditional-format/listformatting-additionalrowclass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/date-conditional-format/listformatting-additionalrowclass.png -------------------------------------------------------------------------------- /view-samples/default-hover-cards/File_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/default-hover-cards/File_hover.png -------------------------------------------------------------------------------- /view-samples/default-hover-cards/README.md: -------------------------------------------------------------------------------- 1 | # Default hover card on doclib 2 | 3 | ## Summary 4 | The following image shows a list with a defalut hover added to a formatted view in a doclib 5 | 6 | On hover in a formatted view on a file a file card is displayed 7 | 8 | On hover in a formatted view on a person column a profile card is displayed and 9 | 10 | ![screenshot of the sample](./File_hover.png) 11 | 12 | ## View requirements 13 | - This format can be applied to any view type 14 | 15 | ## Sample 16 | 17 | Solution|Author(s) 18 | --------|--------- 19 | File-hover-card.json | Niket Jain 20 | 21 | ## Version history 22 | 23 | Version|Date|Comments 24 | -------|----|-------- 25 | 1.0|April 08, 2020|Initial release 26 | 27 | 28 | ## Disclaimer 29 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 30 | 31 | --- 32 | 33 | ## Additional notes 34 | This sample uses icons from the Office UI Fabric 35 | 36 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 37 | 38 | > An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported. 39 | 40 | 41 | -------------------------------------------------------------------------------- /view-samples/document-library-thumbnails/README.md: -------------------------------------------------------------------------------- 1 | # Document Library Items in Tiles Format 2 | 3 | ## Summary 4 | This sample uses rowFormatter element to overrides the default formatting on the All Documents view. The view uses thumbnail property to display the items in tiles view with custom size. 5 | 6 | 7 | 8 | ## View requirements 9 | - "Allow management of content types" is turned on under Library --> Advanced Settings. 10 | 11 | The size of the tiles can be adjusted by changing the width and height values. 12 | 13 | ## Sample 14 | 15 | ![Responsive Screenshot](./document-library-thumbnails.png) 16 | 17 | Solution|Author(s) 18 | --------|--------- 19 | document-library-thumbnails.json | [Ravi Chandra](https://twitter.com/ravi_maniyani) 20 | 21 | ## Version history 22 | 23 | Version|Date|Comments 24 | -------|----|-------- 25 | 1.0|February 02, 2019|Initial release 26 | 27 | ## Disclaimer 28 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /view-samples/document-library-thumbnails/document-library-thumbnails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/document-library-thumbnails/document-library-thumbnails.png -------------------------------------------------------------------------------- /view-samples/document-library/images/document-library-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/document-library/images/document-library-mobile.jpg -------------------------------------------------------------------------------- /view-samples/document-library/images/document-library.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/document-library/images/document-library.jpg -------------------------------------------------------------------------------- /view-samples/document-library/images/flow-changes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/document-library/images/flow-changes.jpg -------------------------------------------------------------------------------- /view-samples/document-library/requestsignoff.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/document-library/requestsignoff.zip -------------------------------------------------------------------------------- /view-samples/faq-format/FAQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/faq-format/FAQ.png -------------------------------------------------------------------------------- /view-samples/faq-format/FAQSingleQuestionScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/faq-format/FAQSingleQuestionScreenshot.png -------------------------------------------------------------------------------- /view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison-list-sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison-list-sample.jpg -------------------------------------------------------------------------------- /view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison-sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-numeric-average-comparison/generic-numeric-average-comparison-sample.jpg -------------------------------------------------------------------------------- /view-samples/generic-risk-score-format/README.md: -------------------------------------------------------------------------------- 1 | # Project Indicator - Risk Score Indicator 2 | 3 | ## Color-coded score ranges (risk-score-viewformat.json) 4 | 5 | A number column is evaluated against tiers of values to provide colors corresponding to score ranges. This format provides 4 ranges: 6 | 7 | |Range|Color| 8 | |---|---| 9 | |value >= 16|Red| 10 | |16 > value >= 12|OrangeLighter| 11 | |12 > value >= 8|Yellow| 12 | |value < 8|Green| 13 | 14 | You can easily adjust the values/colors to provide your own ranges. You can also add or remove nested conditions to increase or decrease the number of ranges needed. 15 | 16 | ![Color-coded ranges](./risk-score.png) 17 | 18 | ## View requirements 19 | The format expect the following fields: 20 | 21 | Field |Type 22 | --------|--------- 23 | Score | Number 24 | 25 | ## Sample 26 | 27 | Solution|Author(s) 28 | --------|--------- 29 | title-view.json | [S Merchant](https://twitter.com/sohailmerchant) 30 | 31 | ## Version history 32 | 33 | Version|Date|Comments 34 | -------|----|-------- 35 | 1.0|Septmeber 9, 2018|Initial release 36 | 37 | ## Disclaimer 38 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 39 | 40 | -------------------------------------------------------------------------------- /view-samples/generic-risk-score-format/risk-score-viewformat.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if([$Score]>= 16, 'ms-bgColor-red', if([$Score] >= 12, 'ms-bgColor-orangeLighter', if([$Score] >= 8, 'ms-bgColor-yellow', 'ms-bgColor-green'))) + ' ms-fontColor-white'" 4 | } -------------------------------------------------------------------------------- /view-samples/generic-risk-score-format/risk-score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-risk-score-format/risk-score.png -------------------------------------------------------------------------------- /view-samples/generic-ryg-status-format/README.md: -------------------------------------------------------------------------------- 1 | # Project Indicator - RYG Status Format 2 | 3 | ## Summary - (ryg-status-viewformat.json) 4 | Text or choice column where the value is used to determine the color. This allows for an easy visualization of status. To use a lookup column instead, replace all occurences of [$internalfieldname] with [$internalfieldname.lookupValue]. 5 | 6 | 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. 7 | 8 | ![Color status field](./ryg-status.png) 9 | 10 | ## View requirements 11 | The format expect the following fields: 12 | 13 | Field |Type 14 | --------|--------- 15 | Status | Single line of text / Choice 16 | 17 | ## Sample 18 | 19 | Solution|Author(s) 20 | --------|--------- 21 | title-view.json | [S Merchant](https://twitter.com/sohailmerchant) 22 | 23 | ## Version history 24 | 25 | Version|Date|Comments 26 | -------|----|-------- 27 | 1.0|Septmeber 9, 2018|Initial release 28 | 29 | ## Disclaimer 30 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 31 | 32 | -------------------------------------------------------------------------------- /view-samples/generic-ryg-status-format/ryg-status-viewformat.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if([$CurrentStatus] == 'Red', 'ms-bgColor-red', if([$CurrentStatus] == 'Green', 'ms-bgColor-green', if([$CurrentStatus] == 'Yellow', 'ms-bgColor-yellow', if([$CurrentStatus] == 'Amber', 'ms-bgColor-orangeLighter', '')))) + ' ms-fontColor-white'" 4 | } -------------------------------------------------------------------------------- /view-samples/generic-ryg-status-format/ryg-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-ryg-status-format/ryg-status.png -------------------------------------------------------------------------------- /view-samples/generic-tile-format/README.md: -------------------------------------------------------------------------------- 1 | # Items in Tile Layout 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![Color status field](./tile-view.png) 7 | 8 | This format takes advantage of the `tileProps` property to create tiles in the Tiles layout for the view. To see the tiles, switch your layout to the Tiles layout. 9 | 10 | ## View requirements 11 | - The format expect the following fields: 12 | 13 | Field |Type 14 | --------|--------- 15 | Title | Single line of text 16 | Icon | Single line of text 17 | URL | Hyperlink 18 | NewTab | Yes/No - This field is used to open the link the same tab or new tab 19 | 20 | The size of the tile can be adjusted by changing the width and height values. 21 | 22 | ## Sample 23 | 24 | Solution|Author(s) 25 | --------|--------- 26 | title-view.json | [S Merchant](https://twitter.com/sohailmerchant) 27 | 28 | ## Version history 29 | 30 | Version|Date|Comments 31 | -------|----|-------- 32 | 1.0|Septmeber 9, 2018|Initial release 33 | 2.0|September 5, 2019|Utilizes tileProps 34 | 2.1|September 9, 2019|Minor fixes 35 | 36 | ## Disclaimer 37 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 38 | 39 | 40 | -------------------------------------------------------------------------------- /view-samples/generic-tile-format/responsive-tile-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-tile-format/responsive-tile-view.png -------------------------------------------------------------------------------- /view-samples/generic-tile-format/tile-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-tile-format/tile-view.png -------------------------------------------------------------------------------- /view-samples/generic-video-button/EmbedCodeExample.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /view-samples/generic-video-button/generic-video-button.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "hideColumnHeader": true, 4 | "rowFormatter": { 5 | "elmType": "div", 6 | "attributes": { 7 | "class": "ms-fontColor-neutralDark ms-fontColor-themePrimary--hover" 8 | }, 9 | "style": { 10 | "font-size": "24px", 11 | "height": "100%" 12 | }, 13 | "children": [ 14 | { 15 | "elmType": "span", 16 | "attributes": { 17 | "iconName": "MSNVideosSolid" 18 | } 19 | }, 20 | { 21 | "elmType": "span", 22 | "txtContent": "[$Title]", 23 | "style": { 24 | "padding-left": "8px" 25 | } 26 | } 27 | ] 28 | } 29 | } -------------------------------------------------------------------------------- /view-samples/generic-video-button/screenshotPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-video-button/screenshotPage.png -------------------------------------------------------------------------------- /view-samples/generic-video-button/screenshotView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/generic-video-button/screenshotView.png -------------------------------------------------------------------------------- /view-samples/multi-line-view/README.md: -------------------------------------------------------------------------------- 1 | # Multi-line view rendering 2 | 3 | ## Summary 4 | 5 | This example uses the `rowFormatter` element, which totally overrides the rendering of a list view row. The `rowFormatter` in this example creates a bounding `
` box for every list view row. Inside this bounding box, the `$Title` and `$Feedback` fields are displayed on separate lines. Under those fields, a `button` element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. This `button` is displayed conditionally, when the value of the `$Assigned_x0020_To` field (assumed to be a person/group field) matches the current signed-in user. 6 | 7 | ![SharePoint list with multi-line view customization](./listformatting-rowformatter.png) 8 | 9 | ## View requirements 10 | - The format expects the `Title` field 11 | - The format expects a text column with an internal name of `Feedback` 12 | - The format expects a person column with an internal name of `Assigned_x0020_To` 13 | 14 | ## Sample 15 | 16 | Solution|Author(s) 17 | --------|--------- 18 | json-file-name | Lincoln DeMaris (Microsoft) 19 | 20 | ## Version history 21 | 22 | Version|Date|Comments 23 | -------|----|-------- 24 | 1.0|August 10, 2018|Initial release 25 | 26 | ## Disclaimer 27 | 28 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 29 | 30 | --- 31 | 32 | ## Additional notes 33 | None 34 | 35 | -------------------------------------------------------------------------------- /view-samples/multi-line-view/listformatting-rowformatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/multi-line-view/listformatting-rowformatter.png -------------------------------------------------------------------------------- /view-samples/multi-line-view/multiline-view.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "hideSelection": true, 4 | "hideColumnHeader": true, 5 | "rowFormatter": { 6 | "elmType": "div", 7 | "attributes": { 8 | "class": "sp-row-card" 9 | }, 10 | "children": [ 11 | { 12 | "elmType": "div", 13 | "style": { 14 | "text-align": "left" 15 | }, 16 | "children": [ 17 | { 18 | "elmType": "div", 19 | "attributes": { 20 | "class": "sp-row-title" 21 | }, 22 | "txtContent": "[$Title]" 23 | }, 24 | { 25 | "elmType": "div", 26 | "attributes": { 27 | "class": "sp-row-listPadding" 28 | }, 29 | "txtContent": "[$Feedback]" 30 | }, 31 | { 32 | "elmType": "button", 33 | "customRowAction": { 34 | "action": "defaultClick" 35 | }, 36 | "txtContent": "Give feedback", 37 | "attributes": { 38 | "class": "sp-row-button" 39 | }, 40 | "style": { 41 | "display": { 42 | "operator": "?", 43 | "operands": [ 44 | { 45 | "operator": "==", 46 | "operands": [ 47 | "@me", 48 | "[$Assigned_x0020_To.email]" 49 | ] 50 | }, 51 | "", 52 | "none" 53 | ] 54 | } 55 | } 56 | } 57 | ] 58 | } 59 | ] 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /view-samples/multi-person-currentuser-rowclass/multi-person-currentuser-rowclass.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if(indexOf(join([$AssignedTo.email],';'), @me) != -1, 'ms-bgColor-themeLight ms-bgColor-themeLighterAlt--hover', '')" 4 | } -------------------------------------------------------------------------------- /view-samples/multi-person-currentuser-rowclass/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/multi-person-currentuser-rowclass/screenshot.png -------------------------------------------------------------------------------- /view-samples/person-currentuser-rowclass/person-currentuser-rowclass.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if([$AssignedTo.email] == @me, 'ms-bgColor-themeLight ms-bgColor-themeLighterAlt--hover', '')" 4 | } -------------------------------------------------------------------------------- /view-samples/person-currentuser-rowclass/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/person-currentuser-rowclass/screenshot.png -------------------------------------------------------------------------------- /view-samples/person-currentuser-rowclass/screenshotCombined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/person-currentuser-rowclass/screenshotCombined.png -------------------------------------------------------------------------------- /view-samples/planner-inspired-task-card/README.md: -------------------------------------------------------------------------------- 1 | # Planner Inspired Task Cards 2 | 3 | ## Summary 4 | Formats Task List Items in a Planner Inspired Card View. Uses OfficeUIFabric Icons to designate "In Progress", "Completed" and "Delayed" Statuses. Automatically strikes out text for "Completed" items. 5 | 6 | ![Planner Format](./screenshot.png) 7 | 8 | ## View requirements 9 | 10 | All fields below should be part of the view, but only those marked with Required need to have values: 11 | 12 | |Type|Internal Name|Required| 13 | |---|---|:---:| 14 | |Single line of text|Title|Yes| 15 | |Person|AssignedTo|Yes| 16 | |Choice|Status|No| 17 | |DateTime|DueDate|No| 18 | 19 | The `Status` column expects the following choice values: 20 | - In Progress 21 | - Delayed 22 | - Completed 23 | 24 | ## Sample 25 | 26 | Solution|Author(s) 27 | --------|--------- 28 | planner-inspired-task-card | [April Dunnam](https://twitter.com/aprildunnam) 29 | 30 | ## Version history 31 | 32 | Version|Date|Comments 33 | -------|----|-------- 34 | 1.0|July 26, 2019|Initial release 35 | 36 | ## Disclaimer 37 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 38 | 39 | --- 40 | 41 | ## Additional notes 42 | 43 | This format takes advantage of `CustomRowActions` to enable the `defaultClick` and `delete` actions from icon buttons: 44 | 45 | ![Custom Actions in Action](screenshot.gif) 46 | 47 | -------------------------------------------------------------------------------- /view-samples/planner-inspired-task-card/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/planner-inspired-task-card/screenshot.gif -------------------------------------------------------------------------------- /view-samples/planner-inspired-task-card/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/planner-inspired-task-card/screenshot.png -------------------------------------------------------------------------------- /view-samples/product-catalog/assets/Finish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/assets/Finish.png -------------------------------------------------------------------------------- /view-samples/product-catalog/assets/credential-popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/assets/credential-popup.png -------------------------------------------------------------------------------- /view-samples/product-catalog/assets/page-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/assets/page-review.png -------------------------------------------------------------------------------- /view-samples/product-catalog/assets/security-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/assets/security-warning.png -------------------------------------------------------------------------------- /view-samples/product-catalog/documents/Contoso Sketch.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/documents/Contoso Sketch.docx -------------------------------------------------------------------------------- /view-samples/product-catalog/documents/Contoso Stretch.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/documents/Contoso Stretch.docx -------------------------------------------------------------------------------- /view-samples/product-catalog/documents/Contoso Trek.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/documents/Contoso Trek.docx -------------------------------------------------------------------------------- /view-samples/product-catalog/documents/Contoso Unleash.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/documents/Contoso Unleash.docx -------------------------------------------------------------------------------- /view-samples/product-catalog/documents/Contoso Wander.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/documents/Contoso Wander.docx -------------------------------------------------------------------------------- /view-samples/product-catalog/images/Contoso Sketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/Contoso Sketch.png -------------------------------------------------------------------------------- /view-samples/product-catalog/images/Contoso Stretch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/Contoso Stretch.png -------------------------------------------------------------------------------- /view-samples/product-catalog/images/Contoso Trek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/Contoso Trek.png -------------------------------------------------------------------------------- /view-samples/product-catalog/images/Contoso Unleash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/Contoso Unleash.png -------------------------------------------------------------------------------- /view-samples/product-catalog/images/Contoso Wander.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/Contoso Wander.png -------------------------------------------------------------------------------- /view-samples/product-catalog/images/product-catalog-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/product-catalog/images/product-catalog-header.png -------------------------------------------------------------------------------- /view-samples/profile-card/README.md: -------------------------------------------------------------------------------- 1 | # User Profile Card 2 | 3 | ## Summary 4 | 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. 5 | 6 | ![Screenshot](./profile-card.png) 7 | 8 | ## View requirements 9 | 10 | |Type|Internal Name|Required| 11 | |---|---|:---:| 12 | |Single line of text|Job Title|No| 13 | |Person|User|Yes| 14 | |Picture|Picture|No| 15 | |Hyperlink|LinkedIn|No| 16 | |Hyperlink|Twitter|No| 17 | 18 | ## Sample 19 | 20 | Solution|Author(s) 21 | --------|--------- 22 | Profile-card | [Ejaz Hussain](https://twitter.com/ejazhussain_) 23 | 24 | ## Version history 25 | 26 | Version|Date|Comments 27 | -------|----|-------- 28 | 1.0|March 13, 2019|Initial release 29 | 30 | ## Disclaimer 31 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 32 | 33 | -------------------------------------------------------------------------------- /view-samples/profile-card/profile-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/profile-card/profile-card.png -------------------------------------------------------------------------------- /view-samples/readme.md: -------------------------------------------------------------------------------- 1 | # SharePoint View Formatting samples 2 | 3 | Samples for the SharePoint View Formatting feature to demonstrate different capabilities and possibilities. 4 | 5 | Each sample has its own dedicated readme file with a screenshot to show the result of the sample applied to a SharePoint list. 6 | -------------------------------------------------------------------------------- /view-samples/resource-catalog/images/resource-catalog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/resource-catalog/images/resource-catalog.jpg -------------------------------------------------------------------------------- /view-samples/retail-account/images/retail-accounts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/retail-account/images/retail-accounts.jpg -------------------------------------------------------------------------------- /view-samples/rota-css-table/README.md: -------------------------------------------------------------------------------- 1 | # Staff Rota Shifts View Format 2 | 3 | ## Summary 4 | This is a sample that uses `rowFormatter` to customise the entire display of a row. The aim is to demonstrate the following concepts: 5 | - using a CSS table layout (`"display": "table"`, `"display": "table-row"`, `"display": "table-cell"`) 6 | - using Office UI fabric classes for font sizing, font colour and background colour 7 | - specifically the theme color class to ensure display matches the theme of the site (`ms-bgColor-themePrimary`) 8 | - disabling selection (`hideSelection`) 9 | - hiding column headers (`hideColumnHeader`) 10 | - using `join` and `\n` to join choice column values on separate lines 11 | 12 | ![Screenshot](./screenshot.jpeg) 13 | 14 | ## View Requirements 15 | 16 | Included in the sample is a site script that will create the list as needed. However if you prefer to create the list yourself here are the fields needed: 17 | 18 | |Type|Internal Name|Required| 19 | |---|---|:---:| 20 | |Single line of text|Title|No| 21 | |Multi-Choice|Shift1|No| 22 | |Multi-Choice|Shift2|No| 23 | |Multi-Choice|Shift3|No| 24 | |Single line of text|Date|No| 25 | 26 | ## Sample 27 | 28 | Solution|Author(s) 29 | --------|--------- 30 | rota-css-table | [Ariel Kropp](https://twitter.com/arielkropp) 31 | 32 | ## Version history 33 | 34 | Version|Date|Comments 35 | -------|----|-------- 36 | 1.0|March 07, 2019|Initial release 37 | 38 | ## Disclaimer 39 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 40 | -------------------------------------------------------------------------------- /view-samples/rota-css-table/screenshot.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/rota-css-table/screenshot.jpeg -------------------------------------------------------------------------------- /view-samples/small-card-format/README.md: -------------------------------------------------------------------------------- 1 | # Small Card 2 | 3 | ## Summary 4 | 5 | Sample of a list Formatting for SharePoint using a small card sample. You can use this as quick contact list. 6 | 7 | ![formatting](./formatting.PNG) 8 | 9 | ## View requirements 10 | 11 | |Column Name|Type of Column|Internal Column Name| 12 | |-|-|-| 13 | |Title |Single line of Text|Title| 14 | |LinkedIn|HyperLink|LinkedIn| 15 | |Job Title|Single line of Text|JobTitle| 16 | |Phone Number|Single line of Text|PhoneNumber| 17 | |Person|Person|Person| 18 | 19 | ## Sample 20 | 21 | Solution|Author(s) 22 | --------|--------- 23 | Small_Card | David Ramalho ([sharepoint-tricks.com](http://sharepoint-tricks.com), [@davRamalho](https://twitter.com/davRamalho)) 24 | 25 | ## Version history 26 | 27 | Version|Date|Comments 28 | -------|----|-------- 29 | 1.0|November, 2019|Initial release 30 | 31 | ## Disclaimer 32 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 33 | 34 | ## Additional notes 35 | 36 | If you intend to add a sample list of this list formatting, take a look at the following article that contains PowerShell information on how to deploy this. 37 | 38 | - http://sharepoint-tricks.com/apply-view-formatting-of-staff-with-powershell/ -------------------------------------------------------------------------------- /view-samples/small-card-format/formatting.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/small-card-format/formatting.PNG -------------------------------------------------------------------------------- /view-samples/text-conditional-format/text-conditional-format.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", 3 | "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Blocked','sp-field-severity--blocked', ''))" 4 | } 5 | -------------------------------------------------------------------------------- /view-samples/text-conditional-format/textformatting-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/text-conditional-format/textformatting-status.png -------------------------------------------------------------------------------- /view-samples/tile-layout-example-with-formatting/README.md: -------------------------------------------------------------------------------- 1 | # Items in Tile Layout with images and Formatting for Doclib 2 | 3 | ## Summary 4 | This sample uses tileProps element to format the tile layout for document libraries. 5 | 6 | ![Color status field](./Tile-with-formatting.png) 7 | 8 | This format takes advantage of the `tileProps` property to format tiles in doclib to have metadata. To see the tiles, switch your layout to the Tiles layout after you've added the JSON. 9 | 10 | ## View requirements 11 | - The format expect the following fields: 12 | 13 | Field |Type 14 | --------|--------- 15 | Name | Single line of text 16 | Proromotio ID | Number 17 | Modified | Date 18 | Status | Choice(Single Select) 19 | Owner | People 20 | Participating Locations | Managed Metadata 21 | 22 | The size of the tile can be adjusted by changing the width and height values. 23 | 24 | ## Sample 25 | 26 | Solution|Author(s) 27 | --------|--------- 28 | Tile_with_formatting.json | [Niket Jain](https://twitter.com/niketjain2002 ) 29 | ## Version history 30 | 31 | Version|Date|Comments 32 | -------|----|-------- 33 | 1.0|October 15, 2019|Initial release 34 | 35 | ## Disclaimer 36 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 37 | 38 | 39 | -------------------------------------------------------------------------------- /view-samples/tile-layout-example-with-formatting/Tile-with-formatting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/tile-layout-example-with-formatting/Tile-with-formatting.png -------------------------------------------------------------------------------- /view-samples/tile-layout-example-with-image/README.md: -------------------------------------------------------------------------------- 1 | # Items in Tile Layout with images 2 | 3 | ## Summary 4 | This sample uses tileProps element to format the tile layout of the view. 5 | 6 | ![Color status field](./tile-layout.png) 7 | 8 | This format takes advantage of the `tileProps` property to create tiles in the Tiles layout for the view. To see the tiles, switch your layout to the Tiles layout after you've added the JSON. 9 | 10 | ## View requirements 11 | - The format expect the following fields: 12 | 13 | Field |Type 14 | --------|--------- 15 | Title | Single line of text 16 | ProductPhoto | Hyperlink (to the image) 17 | ProductPrice | Number 18 | Features | Multiple lines of text 19 | 20 | The size of the tile can be adjusted by changing the width and height values. 21 | 22 | ## Sample 23 | 24 | Solution|Author(s) 25 | --------|--------- 26 | title-layout-with-image.json | [Rk Menon](https://twitter.com/rkmenons1 ) 27 | 28 | ## Version history 29 | 30 | Version|Date|Comments 31 | -------|----|-------- 32 | 1.0|Septmeber 9, 2019|Initial release 33 | 34 | ## Disclaimer 35 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 36 | 37 | 38 | -------------------------------------------------------------------------------- /view-samples/tile-layout-example-with-image/tile-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/tile-layout-example-with-image/tile-layout.png -------------------------------------------------------------------------------- /view-samples/twitter-format/SPTwitter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/twitter-format/SPTwitter.gif -------------------------------------------------------------------------------- /view-samples/twitter-format/twitterFormat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steel007/sp-dev-list-formatting/b7d7e04fd898a7757dbcf1426ecb0aa387009e07/view-samples/twitter-format/twitterFormat.png --------------------------------------------------------------------------------