diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..5199d9c2f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "cSpell.words": [ + "appcustomizer", + "commandset", + "Customizer", + "displayname", + "filteroptions", + "webpart", + "webparts" + ] +} \ No newline at end of file diff --git a/.vscode/spellright.dict b/.vscode/spellright.dict index af3a7e90d..b1f2fcf28 100644 --- a/.vscode/spellright.dict +++ b/.vscode/spellright.dict @@ -1 +1,5 @@ reterive +displayname +filteroptions +appcustomizer +commandset diff --git a/custom_theme/filter.html b/custom_theme/filter.html index e48fe7906..abc360386 100644 --- a/custom_theme/filter.html +++ b/custom_theme/filter.html @@ -101,6 +101,89 @@ No results found. +
+
+
+
 
+
+
 
+
 
+

 

+

 

+
+
+ +
+
+ +   +
+
+
+
+
+ +
+
+
 
+
+
 
+
 
+

 

+

 

+
+
+ +
+
+ +   +
+
+
+
+
+ +
+
+
 
+
+
 
+
 
+

 

+

 

+
+
+ +
+
+ +   +
+
+
+
+
+
+ diff --git a/docs/css/extra.css b/docs/css/extra.css index 87a2a39e4..9e7970b86 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -55,7 +55,7 @@ } } -#noresults { +#noresults, #loading { color:#797673; animation: fadeIn ease 3s; -webkit-animation: fadeIn ease 3s; @@ -64,6 +64,10 @@ -ms-animation: fadeIn ease 3s; } +#noresults { + display:none; +} + .md-footer-nav__link--prev, .md-footer__link--prev { float: left; } @@ -531,8 +535,10 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover { line-height: 42px; font-size: 14px; color: #7D7A9E; - margin-left: 10px; + margin-left: 8px; position: relative; + padding-left: 8px; + padding-right: 8px; } .producttype-item:hover::after, .sampletype-item:hover::after { @@ -558,25 +564,6 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover { pointer-events: none; white-space: nowrap; } -/* -.sampletype-item::after { - content: attr(title); - background-color: #0067B8; - color: #ffffff; - font-size: 14px; - border-radius: 2px; - box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px; - position: absolute; - bottom: 40px; - height: auto; - left: 50%; - transform: translateX(-50%); - padding: 0 15px; - opacity: 0; - transition: all 0.3s ease-in-out; - pointer-events: none; - white-space: nowrap; -} */ .producttype-item, .sampletype-item { background-size: 24px 24px; @@ -938,25 +925,13 @@ TODO: Move styles .sample-details .producttype-item { border: 1px solid #EBEBF2; position: absolute; - left: 0; + left: 58px; top: -22px; font-size: 0; } -.sample-details .producttype-item::after { - background-color: #0067B8; - color: #ffffff; - font-size: 14px; - border-radius: 5px; - box-shadow: 1px 14px 18px -15px #232e4c; - position: absolute; - bottom: 40px; - height: auto; - left: 50%; - transform: translateX(-50%); - padding: 0 15px; - opacity: 0; - transition: all 0.3s ease-in-out; +div#filters { + margin-bottom: 16px; } .sample-details .producttype-item { diff --git a/docs/css/filter.css b/docs/css/filter.css index d798b1f32..98a644eee 100644 --- a/docs/css/filter.css +++ b/docs/css/filter.css @@ -239,4 +239,4 @@ body { html { overflow-y: scroll; -} \ No newline at end of file +} diff --git a/docs/css/site.css b/docs/css/site.css index 9aaf7f507..cd286d307 100644 --- a/docs/css/site.css +++ b/docs/css/site.css @@ -1,4 +1,3 @@ - .sampletype-item.angular { background-image: url(../img/frameworks/angularjs.svg); } @@ -35,6 +34,30 @@ background-image: url(../img/products/outlook.svg); } +.sampletype-item.appcustomizer { + background-image: url(../img/types/application.svg); +} + +.sampletype-item.commandset { + background-image: url(../img/types/toolbar.svg); +} + +.sampletype-item.field { + background-image: url(../img/types/field.svg); +} + +.sampletype-item.search { + background-image: url(../img/types/search.svg); +} + +.sampletype-item.form { + background-image: url(../img/types/form.svg); +} + +.sampletype-item.webpart { + background-image: url(../img/types/webpart.svg); +} + .sample-details .producttype-item.angular { background-image: url(../img/frameworks/angularjs.svg); } @@ -62,3 +85,186 @@ .sample-details .producttype-item.other { background-image: url(../img/frameworks/other.svg); } + +.sample-details .sample-item.webpart { + background-image: url(../img/types/webpart.svg); +} + +.sample-details .sample-item.appcustomizer { + background-image: url(../img/types/application.svg); +} + +.sample-details .sample-item.command { + background-image: url(../img/types/toolbar.svg); +} + +.sample-details .sample-item.field { + background-image: url(../img/types/field.svg); +} + +.sample-details .sample-item.search { + background-image: url(../img/types/search.svg); +} + +.sample-details .sample-item.form { + background-image: url(../img/types/form.svg); +} + +.sample-details .sample-item { + min-width: 42px; + height: 42px; + width: 42px; + background-color: #F7F7FC; + border: 1px solid #ffffff; + border-radius: 25px; + transition: all 0.3s ease-in-out; + cursor: pointer; + display: inline-block; + vertical-align: middle; + text-align: center; + line-height: 42px; + font-size: 14px; + color: #7D7A9E; + margin-left: 8px; + position: relative; + padding-left: 8px; + padding-right: 8px; +} + +.sample-details .sample-item:hover::after, .sample-details .producttype-item:hover::after { + opacity: 1; + bottom: 45px; +} + +.sample-details .producttype-item::after, .sample-item::after { + content: attr(title); + background-color: #0067B8; + color: #ffffff; + font-size: 14px; + border-radius: 2px; + box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px; + position: absolute; + bottom: 40px; + height: auto; + padding: 0 15px; + opacity: 0; + transition: all 0.3s ease-in-out; + pointer-events: none; + white-space: nowrap; + z-index: 100; +} + + +.sample-item::after { + left: 0px; +} + +.sample-details .producttype-item::after { + left: 44px; +} + +.sample-details .sample-item { + border: 1px solid #EBEBF2; + background-color: white; + position: absolute; + left: 8px; + top: -22px; + font-size: 0; + margin-left: 8px; + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center; + border-radius: 42px; +} + +.shimmer { + background: #f6f7f8; + /* fallback + background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); + background-repeat: no-repeat; + */ + animation: shim infinite 1.2s linear; +} + +@keyframes shim { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +#loading { + display: flex; + gap: 12px; + } + +#loading .sample-preview { + background-color: #f6f7f8;; +} + +#loading .sample-title { + width: 75%; + width: 200px; +} + +#loading .sample-author{ + width: 80px; + margin-bottom: 4px; +} + +#loading .sample-description { + width:240px; +} +#loading .sample-date { + width: 145px; +} + +.shimmer .author-image { + width: 32px; + height: 32px; + border-radius: 32px; +} + +.shimmer_circle { + width: 42px; + height: 42px; + border-radius: 42px; + +} + + +.shimmer_circle_heading .shimmer_heading { + width: 90%; + margin-left: 3% +} + +.shimmer_circle_heading { + display: flex; + align-items: center +} + +.shimmer_preview { + width: 318px; + height: 250px; +} +.shimmer_heading { + width: 50%; + height: 20px; +} + +.shimmer_small_para { + height: 24px; +} + +.shimmer_large_para { + height: 48px; +} + +.shimmer { + background: #e2e3e4; + background-image: linear-gradient(to right, #e2e3e4 0%, #f6f7f8 20%, #e2e3e4 40%, #e2e3e4 100%); + background-repeat: no-repeat +} diff --git a/docs/gettingstarted/troubleshooting.md b/docs/gettingstarted/troubleshooting.md index 90ab2c645..ca2573654 100644 --- a/docs/gettingstarted/troubleshooting.md +++ b/docs/gettingstarted/troubleshooting.md @@ -31,7 +31,7 @@ For example, if you have SPFx 1.12.1 installed on your workstation, samples mark Conversely, if you plan on using a sample in a SharePoint 2019 environment, you'll want to make sure to use only samples that run on SPFx ![1.4.1](https://img.shields.io/badge/1.4.1-orange.svg) or lower; SharePoint 2016 Feature Pack 2 will only work with ![1.1.0](https://img.shields.io/badge/1.0.0-orange.svg). -You can find more information about SPFx compatibility on the [Tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) page on the [SharePoint Framework documentation](https://docs.microsoft.com/sharepoint/dev/spfx). +You can find more information about SPFx compatibility on the [Tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) page on the [SharePoint Framework documentation](https://learn.microsoft.com/sharepoint/dev/spfx). ### Minimal Path to Awesome diff --git a/docs/img/types/application.svg b/docs/img/types/application.svg new file mode 100644 index 000000000..32ffef8ac --- /dev/null +++ b/docs/img/types/application.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/types/field.svg b/docs/img/types/field.svg new file mode 100644 index 000000000..ab60f56dc --- /dev/null +++ b/docs/img/types/field.svg @@ -0,0 +1,33 @@ + + + + + + + + + + diff --git a/docs/img/types/form.svg b/docs/img/types/form.svg new file mode 100644 index 000000000..d059b1b26 --- /dev/null +++ b/docs/img/types/form.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + diff --git a/docs/img/types/search.svg b/docs/img/types/search.svg new file mode 100644 index 000000000..8d92e1633 --- /dev/null +++ b/docs/img/types/search.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/docs/img/types/toolbar.svg b/docs/img/types/toolbar.svg new file mode 100644 index 000000000..9eef56c90 --- /dev/null +++ b/docs/img/types/toolbar.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/docs/img/types/webpart.svg b/docs/img/types/webpart.svg new file mode 100644 index 000000000..850702eef --- /dev/null +++ b/docs/img/types/webpart.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index aa3d934ab..65c575afc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -30,7 +30,7 @@ filteroptions: filter: '[data-framework=''Other'']' --- -You can build client-side web parts using the frameworks you're already familiar with. Use the filters below to find samples by framework. +You can build client-side [web parts](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts) and [extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions) using the frameworks you're already familiar with. Use the filters below to find samples by framework. You can also search by keyword, author or tags. diff --git a/docs/javascript/filtersamples.js b/docs/javascript/filtersamples.js index c55a5a630..ce6bffe8d 100644 --- a/docs/javascript/filtersamples.js +++ b/docs/javascript/filtersamples.js @@ -1,16 +1,13 @@ -// external js: isotope.pkgd.js +$(document).ready(function () { -/*** - * This is a generic isotope filter for samples - */ - $(document).ready(function () { - var filterText = $('#sample-listing').data("filter"); + const filterText = $('#sample-listing').data("filter"); + const txtSearch = $('#post-search-input'); var qsRegex = new Array(); var buttonFilter; // init Isotope - var $grid = $('#sample-listing').isotope({ + const $grid = $('#sample-listing').isotope({ itemSelector: '.sample-thumbnail', layoutMode: 'fitRows', sortBy: 'modified', @@ -27,10 +24,7 @@ searchResult = false; } }) - var buttonResult = buttonFilter ? $(this).is(buttonFilter) : true; - if (!(searchResult && buttonResult)) { - console.log('FALSE!'); - } + const buttonResult = buttonFilter ? $(this).is(buttonFilter) : true; return searchResult && buttonResult; }, fitRows: { @@ -42,10 +36,12 @@ $grid.on('arrangeComplete', function (_event, filteredItems) { if (filteredItems.length > 0) { // hide message + $("#loading").hide(); $("#noresults").hide(); } else { // show message; $("#noresults").show(); + $("#loading").hide(); } }); @@ -84,8 +80,7 @@ // Get the list of filters to use var filter = $('#filters .filter-choice'); - // Get the search box - var search = $('#post-search-input'); + $('.filter-list').each(function (_i, buttonGroup) { var $buttonGroup = $(buttonGroup); @@ -105,20 +100,32 @@ }); }); - search.on('change keyup paste', debounce(function () { - var query = search.val().toString(); + txtSearch.on('change keyup paste', debounce(function () { + var searchQuery = txtSearch.val().toString(); + searchResult(searchQuery); + }, 200)); + + //retrieve the q querystring parameter; if it exists, use it to filter the samples + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.has('q')) { + const searchQuery = urlParams.get('q'); + txtSearch.val(searchQuery); + searchResult(searchQuery); + } + + + function searchResult(query) { if (!query) { qsRegex = new Array(); } else { - qsRegex = query.match(/\w+|"[^"]+"/gi); + qsRegex = query.match(/\w+|"[^"]+"/gi); let i = qsRegex.length; while (i--) { qsRegex[i] = qsRegex[i].replace(/"/gi, ""); } } $grid.isotope(); - }, 200)); - + } // debounce so filtering doesn't happen every millisecond function debounce(fn, threshold) { var timeout; @@ -134,15 +141,5 @@ }; } - // See if there are any passed parameters - try { - var urlParams = new URLSearchParams(window.location.search); - var query = urlParams.get('query'); - if (query !== "") { - search.val(query).change(); - } - } catch (error) { - // Be vewy vewy quiet - } }); \ No newline at end of file diff --git a/docs/javascript/loadsamples.js b/docs/javascript/loadsamples.js index 6a59bc3d4..3e3eeaa46 100644 --- a/docs/javascript/loadsamples.js +++ b/docs/javascript/loadsamples.js @@ -4,7 +4,7 @@ var jsonPath = "https://pnp.github.io/sp-dev-fx-webparts/samples.json"; if (window.location.host.toLowerCase() !== "pnp.github.io") { // When serving locally there is no /teams-dev-samples in the path - jsonPath = window.location.origin + "/samples.json"; + jsonPath = window.location.origin + "/sp-dev-fx-webparts/samples.json"; console.log(`Reading samples from ${jsonPath}`); } @@ -14,73 +14,109 @@ if (window.location.host.toLowerCase() !== "pnp.github.io") { * @returns */ function loadSample(sample, filter) { - try { - var title = _.escape(sample.title); - var escapedDescription = _.escape(sample.shortDescription); + try { + var title = _.escape(sample.title); + var escapedDescription = _.escape(sample.shortDescription); - var shortDescription = sample.shortDescription; //.length > 80 ? sample.shortDescription.substr(0, 77) : sample.shortDescription; - var thumbnail = "https://pnp.github.io/sp-dev-fx-webparts/img/_nopreview.png"; - //var categories = sample.categories[0]; + var shortDescription = sample.shortDescription; //.length > 80 ? sample.shortDescription.substr(0, 77) : sample.shortDescription; + var thumbnail = "https://pnp.github.io/sp-dev-fx-webparts/img/_nopreview.png"; + //var categories = sample.categories[0]; - if (sample.thumbnails && sample.thumbnails.length > 0) { - thumbnail = sample.thumbnails[0].url; + if (sample.thumbnails && sample.thumbnails.length > 0) { + thumbnail = sample.thumbnails[0].url; + } + + + var sampleType = ""; + var sampleTypeName = ""; + + if (sample.categories && sample.categories.length > 0) { + const categories = sample.categories[0]; + switch (categories) { + case "SPFX-FIELD-EXTENSION": + sampleType = "field"; + sampleTypeName = "Field customizer"; + break; + case "SPFX-COMMAND-EXTENSION": + sampleType = "command"; + sampleTypeName = "ListView command set"; + break; + case "SPFX-SEARCHQUERY-EXTENSION": + sampleType = "search"; + sampleTypeName = "Search query extension"; + break; + case "SPFX-APPLICATION-EXTENSION": + sampleType = "appcustomizer"; + sampleTypeName = "Application customizer"; + break; + case "SPFX-FORM-EXTENSION": + sampleType = "form"; + sampleTypeName = "Form customizer"; + break; + default: + sampleType = "webpart"; + sampleTypeName = "Web part"; + break; + } + } else { + sampleType = "webpart"; + sampleTypeName = "Web part"; + } + + var framework = ""; + var SPFxVersion = ""; + var outlookCompatible = false; + var teamsCompatible = false; + var pnpControls = ""; + + var metadata = sample.metadata; + metadata.forEach(meta => { + switch (meta.key) { + case "CLIENT-SIDE-DEV": + framework = meta.value; + break; + case "SPFX-VERSION": + SPFxVersion = meta.value; + break; + case "SPFX-OUTLOOKADDIN": + outlookCompatible = meta.value; + break; + case "SPFX-TEAMSPERSONALAPP": + case "SPFX-TEAMSTAB": + teamsCompatible = meta.value; + break; + case "PNPCONTROLS": + pnpControls = meta.value; + break; + default: + break; + } + }); + const dtModified = new Date(sample.updateDateTime); + + var subscription = SPFxVersion.startsWith("1.5.") || SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA"; + var compatible2019 = SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA"; + var compatible2016 = SPFxVersion == "GA" && sampleType == "webpart"; + var modified = moment(dtModified).toISOString(); + var authors = sample.authors; + var authorsList = ""; + var authorAvatars = ""; + var authorName = ""; + var authorsGitHub = ""; + var productTag = framework.toLowerCase(); + var productName = framework; + + + // Build the authors array + if (authors && authors.length > 0) { + authors.forEach(author => { + if (authorsList !== "") { + authorsList = authorsList + ", "; } + authorsList = authorsList + author.name; + authorsGitHub = authorsGitHub + " " + author.gitHubAccount; - var framework = ""; - var SPFxVersion = ""; - var outlookCompatible = false; - var teamsCompatible = false; - var pnpControls = ""; - - var metadata = sample.metadata; - metadata.forEach(meta => { - switch (meta.key) { - case "CLIENT-SIDE-DEV": - framework = meta.value; - break; - case "SPFX-VERSION": - SPFxVersion = meta.value; - break; - case "SPFX-OUTLOOKADDIN": - outlookCompatible = meta.value; - break; - case "SPFX-TEAMSPERSONALAPP": - case "SPFX-TEAMSTAB": - teamsCompatible = meta.value; - break; - case "PNPCONTROLS": - pnpControls = meta.value; - break; - default: - break; - } - }); -const dtModified = new Date(sample.updateDateTime) - - var compatible2019 = SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA"; - var compatible2016 = SPFxVersion == "GA"; - var modified = moment(dtModified).toISOString(); - var authors = sample.authors; - var authorsList = ""; - var authorAvatars = ""; - var authorName = ""; - var authorsGitHub = ""; - var productTag = framework.toLowerCase(); - var productName = framework; - - - // Build the authors array - if (authors.length < 1) { - console.log("Sample has no authors", sample); - } else { - authors.forEach(author => { - if (authorsList !== "") { - authorsList = authorsList + ", "; - } - authorsList = authorsList + author.name; - authorsGitHub = authorsGitHub + " " + author.gitHubAccount; - - var authorAvatar = `
+ var authorAvatar = `
`; - authorAvatars = authorAvatar + authorAvatars; - }); + authorAvatars = authorAvatar + authorAvatars; + }); - authorName = authors[0].name; - if (authors.length > 1) { - authorName = authorName + ` +${authors.length - 1}`; - } - } + authorName = authors[0].name; + if (authors.length > 1) { + authorName = authorName + ` +${authors.length - 1}`; + } + } else { + console.log("Sample has no authors", sample); + } - // Extract tags - var tags = ""; - $.each(sample.tags, function (_u, tag) { - tags = tags + "#" + tag + ","; - }); + // Extract tags + var tags = ""; + $.each(sample.tags, function (_u, tag) { + tags = tags + "#" + tag + ","; + }); - // Build a keyword tag for searching - var keywords = title + " " + escapedDescription + " " + authorsList + " " + authorsGitHub + " " + tags + " " + pnpControls; - keywords = keywords.toLowerCase(); + // Build a keyword tag for searching + var keywords = title + " " + escapedDescription + " " + authorsList + " " + authorsGitHub + " " + tags + " " + pnpControls; + keywords = keywords.toLowerCase(); - // Build the HTML to insert - var $items = $(` -
${title}
-
${productName}
+
${sampleTypeName}
+
${productName}

${sample.title}

${shortDescription}

@@ -131,9 +170,9 @@ const dtModified = new Date(sample.updateDateTime)
`); - return $items; - } catch (error) { - console.log("Error with one sample", error, sample); - } - return null; + return $items; + } catch (error) { + console.log("Error with one sample", error, sample); + } + return null; } \ No newline at end of file diff --git a/docs/samples/compatibility.md b/docs/samples/compatibility.md index 57fa39c6c..793f5be80 100644 --- a/docs/samples/compatibility.md +++ b/docs/samples/compatibility.md @@ -1,20 +1,24 @@ --- -title: Samples by Compatibility +title: Samples by compatibility template: filter.html filteroptions: - name: all - title: SharePoint Online + title: All versions displayname: All filter: '*' - active: true + active: true + - name: SPSubscription + title: v1.5 or lower + filter: '[data-subscription=''true'']' + displayname: Subscription Edition - name: 2019 - title: SharePoint 2019 + title: v1.4.1 or lower filter: '[data-sp2019=''true'']' - displayname: 2019 + displayname: SharePoint Server 2019 - name: 2016 - title: SharePoint 2016 + title: v1.1, web parts only filter: '[data-sp2016=''true'']' - displayname: 2016 + displayname: SharePoint 2016 Feature Pack 2 - name: teams title: Teams filter: '[data-teams=''true'']' @@ -23,8 +27,8 @@ filteroptions: filter: '[data-outlook=''true'']' --- -All samples are compatible with SharePoint Online. If you wish to find web parts that were specifically designed for SharePoint 2019, SharePoint 2016, Microsoft Teams, or Microsoft Outlook, use the filters below. +All samples are compatible with SharePoint Online. If you wish to find samples that were specifically designed for SharePoint Server Subscription Edition,SharePoint Server 2019, SharePoint 2016 Feature Pack 2, Microsoft Teams, or Microsoft Outlook, use the filters below. -To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation. +To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation. To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section. diff --git a/docs/samples/spfx.md b/docs/samples/spfx.md index a32ecb6d3..b7b48e11f 100644 --- a/docs/samples/spfx.md +++ b/docs/samples/spfx.md @@ -1,5 +1,5 @@ --- -title: Samples by SPFx Version +title: Samples by SPFx version template: filter.html filteroptions: - name: all @@ -7,6 +7,10 @@ filteroptions: displayname: All filter: '*' active: true + - name: 117 + title: 1.17.x + displayname: 1.17 + filter: '[data-spfx^=''1.17.'']' - name: 116 title: 1.16.x displayname: 1.16 @@ -28,12 +32,12 @@ filteroptions: displayname: 1.12 filter: '[data-spfx^=''1.12.'']' - name: 111 - title: 1.11.x + title: 1.11.0 displayname: 1.11 filter: '[data-spfx^=''1.11.'']' - name: 110 - title: 1.10.x - displayname: 1.10 + title: 1.10.0 + displayname: '1.10' filter: '[data-spfx^=''1.10.'']' - name: 190 title: 1.9.x @@ -48,7 +52,7 @@ filteroptions: displayname: 1.7 filter: '[data-spfx^=''1.7.'']' - name: 160 - title: 1.6.x + title: 1.6.0 displayname: 1.6 filter: '[data-spfx^=''1.6.'']' - name: 150 @@ -56,21 +60,13 @@ filteroptions: displayname: 1.5 filter: '[data-spfx^=''1.5.'']' - name: 140 - title: 1.4.x + title: 1.4.x or earlier displayname: 1.4 - filter: '[data-spfx^=''1.4.'']' - - name: 130 - title: 1.3.x - displayname: 1.3 - filter: '[data-spfx^=''1.3.'']' - - name: GA - title: GA - displayname: GA - filter: '[data-spfx=''GA'']' + filter: '[data-spfx^=''1.4.''],[data-spfx^=''1.3.''],[data-spfx=''GA'']' --- You can use the filters below to find samples by SharePoint Framework versions. -To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation. +To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation. -To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section. +To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section. \ No newline at end of file diff --git a/docs/samples/technology.md b/docs/samples/technology.md index 7212c5c49..771a00d92 100644 --- a/docs/samples/technology.md +++ b/docs/samples/technology.md @@ -1,6 +1,6 @@ > NOTE: This file is no longer used. I just left it here because I need to move the filters to another page. -# Samples by Technology +# Samples by technology Use the filters below to find samples which demonstrate how to use various Microsoft technologies. diff --git a/docs/samples/type.md b/docs/samples/type.md new file mode 100644 index 000000000..96b832dd4 --- /dev/null +++ b/docs/samples/type.md @@ -0,0 +1,34 @@ +--- +title: Samples by type +template: filter.html +filteroptions: + - name: all + title: All sample types + displayname: All + filter: '*' + active: true + - name: webpart + title: Web part + filter: '[data-type=''webpart'']' + - name: appcustomizer + title: Application customizer + filter: '[data-type=''appcustomizer'']' + - name: commandset + title: ListView command set + filter: '[data-type=''command'']' + - name: field + title: Field customizer + filter: '[data-type=''field'']' + - name: form + title: Form customizer + filter: '[data-type=''form'']' + - name: search + title: Search query extension + filter: '[data-type=''search'']' +--- + +If you're looking for a specific type of sample, use the filters select between [web parts](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts) and [extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions). + +Extensions include [application customizers](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension), [field customizer extensions](), [Form customizer extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer), [ListView command set extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api) and [search query extensions](https://learn.microsoft.com/sharepoint/dev/spfx/building-search-extensions), which are all available in the SharePoint Framework. + +To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section. diff --git a/mkdocs.yml b/mkdocs.yml index 8889dcd17..cb5f6018f 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,6 +1,6 @@ # Web Part Samples # Author: Hugo Bernier -site_name: SharePoint Framework Client-Side Web Part Samples +site_name: SharePoint Framework (SPFx) Samples plugins: - macros - markdownextradata @@ -11,9 +11,10 @@ plugins: # 'samples/framework': 'https://pnp.github.io/sp-dev-fx-webparts/' nav: - Samples: - - By Framework: index.md + - By framework: index.md + - By type: samples/type.md - By SPFx Version: samples/spfx.md - - By Compatibility: samples/compatibility.md + - By compatibility: samples/compatibility.md - Getting Started: - Using the Samples: gettingstarted/index.md - Troubleshooting: gettingstarted/troubleshooting.md