Merge branch 'petkir-reactrssreader-956' into petkir-IE11Support-1288

This commit is contained in:
petkir 2020-06-18 02:29:28 +02:00
commit f3da4ec4b5
293 changed files with 44434 additions and 24886 deletions

View File

@ -1,15 +1,15 @@
---
page_type: sample
products:
- office-sp
languages:
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
createdDate: 8/30/2016 10:21:43 AM
---
---
page_type: sample
products:
- office-sp
languages:
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
createdDate: 8/30/2016 10:21:43 AM
---
# SharePoint Framework Client-Side Web Part Samples & Tutorial Materials
This repository contains community samples that demonstrate different usage patterns for the SharePoint Framework client-side web parts.
@ -27,8 +27,8 @@ Please use following logic on submitting your questions or issues to right locat
## Additional resources
* [Overview of the SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [SharePoint Framework development tools and libraries](http://dev.office.com/sharepoint/docs/spfx/tools-and-libraries)
* [Overview of the SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [SharePoint Framework development tools and libraries](https://docs.microsoft.com/sharepoint/dev/spfx/tools-and-libraries)
* [SharePoint Framework Reference](http://aka.ms/spfx-reference)
* [Visual Studio Extension for SharePoint Framework projects](https://github.com/SharePoint/sp-dev-fx-vs-extension)

View File

@ -12,8 +12,8 @@ Short summary on functionality and used technologies.
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
> Update accordingly as needed.

View File

@ -1,18 +1,18 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 5/1/2017 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 5/1/2017 12:00:00 AM
---
# Call custom APIs secured with Azure Active Directory without ADAL JS
## Summary
@ -30,8 +30,8 @@ Sample web part showing the list of latest orders retrieved from a custom API se
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -7028,8 +7028,8 @@ websocket-driver@>=0.5.1:
websocket-extensions ">=0.1.1"
websocket-extensions@>=0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
version "0.1.4"
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
whatwg-fetch@0.11.0, whatwg-fetch@>=0.10.0:
version "0.11.0"

View File

@ -1,20 +1,20 @@
---
page_type: sample
products:
- office-365
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
- Azure AD
platforms:
- AngularJs
createdDate: 1/1/2016 12:00:00 AM
---
---
page_type: sample
products:
- office-365
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
- Azure AD
platforms:
- AngularJs
createdDate: 1/1/2016 12:00:00 AM
---
# Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x
## Summary
@ -28,8 +28,8 @@ Sample SharePoint Framework client-side web part illustrating communication with
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -31,8 +31,8 @@ Final outcome:
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -27,8 +27,8 @@ Application after migration:
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -11,8 +11,8 @@ Sample SharePoint Framework client-side web part for managing tasks stored in a
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -42,8 +42,8 @@ y luego mostrará todas las listas asociadas con el sitio seguidos de todos los
## Se aplica a
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Espacio empresarial de desarrollador de Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Espacio empresarial de desarrollador de Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solución

View File

@ -42,8 +42,8 @@ puis affiche toutes les listes associées au site, suivies de tous les élément
## Sapplique à
* [Version préliminaire pour développeurs de SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Client de développeur Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [Version préliminaire pour développeurs de SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Client de développeur Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -42,8 +42,8 @@ extensions:
## 適用対象
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 Developer のテナント](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 Developer のテナント](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## 解決方法

View File

@ -42,8 +42,8 @@ e exibirá todas as listas associadas ao site seguido por todos os itens da list
## Aplicável a
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Locatário de desenvolvedor do Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Locatário de desenvolvedor do Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solução

View File

@ -42,8 +42,8 @@ extensions:
## Область применения
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Клиент Office 365 для разработчиков](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Клиент Office 365 для разработчиков](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Решение

View File

@ -42,8 +42,8 @@ extensions:
## 适用于
* [SharePoint Framework 开发人员预览版](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 开发人员租户](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework 开发人员预览版](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 开发人员租户](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## 解决方案

View File

@ -42,8 +42,8 @@ display all the lists associated with the site followed by all the items inside
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -30,8 +30,8 @@ This sample contains a poll web part allowing users to vote and view the results
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -28,8 +28,8 @@ Edit webpart properties to set Document library Name. Initially, It has been set
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -21,7 +21,7 @@ extensions:
## Summary
this is a sample web part that illustrates the use of Angular and [ngOfficeUIFabric](http://ngofficeuifabric.com/) with the SharePoint Framework.
this is a sample web part that illustrates the use of Angular and [ngOfficeUIFabric](https://github.com/ngOfficeUIFabric) with the SharePoint Framework.
You can find a video recording walk-through this sample from [SharePoint PnP YouTube channel](https://www.youtube.com/watch?v=FS-_0KENJkI).
![Sample To do SharePoint Framework Client-Side Web Part built using Angular and ngOfficeUIFabric](./assets/preview.png)
@ -31,8 +31,8 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -36,8 +36,8 @@ The logic for querying the SharePoint Content Types in the properties of the web
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -27,8 +27,8 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -31,8 +31,8 @@ Sample To Do Web Part built with Angular2. This sample illustrates how you can u
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Prerequisites

View File

@ -24,8 +24,8 @@ Set of sample web parts illustrating how to use Angular Elements in the SharePoi
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -26,8 +26,8 @@ A sample web part illustrating how to use Angular Elements in the SharePoint Fra
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -30,8 +30,8 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
## Applies to
* [SharePoint Framework Developer GA](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer GA](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -23,8 +23,8 @@ This sample demonstrate how to set up SPFx to use [Handlebars](http://handlebars
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -29,8 +29,8 @@ This is a sample web Part that illustrates the use of jQuery and its plugins loa
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -33,8 +33,8 @@ simulates a pile of photos scattered about on a surface. Thumbnail clicks remove
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -44,8 +44,8 @@
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -25,8 +25,8 @@ This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoi
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -14,8 +14,8 @@ Post Button Click that imports jQuery and additional functionality:
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution
@ -53,7 +53,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Including a library in the separate bundled file.
## Additional Information:
- [Dynamic loading of packages in SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-loading)
- [Dynamic loading of packages in SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/dynamic-loading)
- Video Demonstration on using, building and code specifics for the sample web part:<br> http://warner.digital/dynamic-spfx-package-bundling/

View File

@ -42,8 +42,8 @@ Simple Web Part that demonstrates the use of SharePoint Framework for show casin
![drop](https://img.shields.io/badge/drop-1.8.0-green.svg)
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -1,16 +1,16 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: tools
technologies:
- SharePoint Framework
createdDate: 1/1/2016 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: tools
technologies:
- SharePoint Framework
createdDate: 1/1/2016 12:00:00 AM
---
# Integrating custom gulp tasks to SharePoint Framwork toolchain
## Summary
@ -34,8 +34,8 @@ Read the following documentation for detailed information on integrating gulp ta
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 First Release Tenants](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 First Release Tenants](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Pre-requisites

View File

@ -1,16 +1,16 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: tools
technologies:
- SharePoint Framework
createdDate: 1/1/2016 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: tools
technologies:
- SharePoint Framework
createdDate: 1/1/2016 12:00:00 AM
---
# Extending webpack in the SharePoint Framework toolchain
## Summary
@ -29,8 +29,8 @@ Read the following documentation for detailed information on working with webpac
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -8932,8 +8932,8 @@ websocket-driver@>=0.5.1:
websocket-extensions ">=0.1.1"
websocket-extensions@>=0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
version "0.1.4"
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
whatwg-fetch@2.0.3:
version "2.0.3"

View File

@ -9,8 +9,8 @@ Displays information from GitHub for a specified user.
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -1,16 +1,16 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
createdDate: 3/1/2017 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
createdDate: 3/1/2017 12:00:00 AM
---
# Modern Calendar
## Summary
@ -26,7 +26,7 @@ This is a modern webpart built on the GA version of the [SharePoint Framework](h
## Applies to
* [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
@ -37,12 +37,14 @@ None
Solution|Author(s)
--------|---------
js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.)
js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan))
## Version history
Version|Date|Comments
-------|----|--------
1.0.0.0|February 11, 2017|Initial release
1.0.0.1|June 05, 2020|Updated the external CDN references to public CDN references
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
@ -67,4 +69,4 @@ Version|Date|Comments
## Features
Renders a calendar from any list available on the selected site. Site, List, Start, End, Event Title,Event Details and Calendar Theme are user-definable in the web part properties, so that you could technically use a custom list as the source for calendar presentation.
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-modern-calendar)
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-modern-calendar)

View File

@ -1,14 +1,18 @@
{
"entries": [
{
"entry": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js",
"manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json",
"outputPath": "./dist/modern-calendar.bundle.js"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"modern-calendar.bundle": {
"components": [
{
"entrypoint": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js",
"manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json"
}
]
}
],
"externals": {
},
"localizedResources": {
"modernCalendarStrings": "webparts/modernCalendar/loc/{locale}.js"
}
"modernCalendarStrings": "lib/webparts/modernCalendar/loc/{locale}.js"
},
"externals": {}
}

View File

@ -1,8 +1,9 @@
{
"solution": {
"name": "spFX Modern Calendar",
"name": "SPFx Modern Calendar",
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
"version": "1.0.0.1"
"version": "1.0.0.1",
"includeClientSideAssets": true
},
"paths": {
"zippedPackage": "solution/modern-calendar.sppkg"

View File

@ -1,3 +1,4 @@
{
"cdnBasePath": "https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -34,7 +34,7 @@ export default class CalendarTemplate {
`;
}
public static themeBase: string = `https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/themes/`;
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeNames: Array<string> = [
'default',
@ -63,12 +63,12 @@ export default class CalendarTemplate {
'ui-darkness',
'ui-lightness',
'vader'
]
];
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function(name,index) {
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()})
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()});
});
return themes;
}

View File

@ -26,7 +26,7 @@ import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { Default as View } from 'fullcalendar/View';
export interface ISPLists {
@ -39,27 +39,27 @@ export interface ISPList {
}
export interface EventObjects {
value: EventObjectInput [];
value: EventObjectInput[];
}
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
public constructor() {
super();
//Modify with your a CDN or local path
SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/sweetalert2.min.css');
SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/fullcalendar.min.css');
// Modify with your a CDN or local path
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css');
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css');
}
public render(): void {
if (this.properties.theme != null){
if (this.properties.theme != null) {
SPComponentLoader.loadCss(this.properties.theme);
}
if (!this.properties.other){
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
}
//Check required properties before rendering list
if (this.properties.listTitle == null || this.properties.start == null || this.properties.end == null || this.properties.title == null || this.properties.detail == null) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(this.properties.description);
@ -74,120 +74,121 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
protected onPropertyPaneConfigurationStart(): void {
//Set a default theme
if (this.properties.theme == null){
//Set a default theme
if (this.properties.theme == null) {
this.properties.theme = CalendarTemplate.theme()[0].key.toString();
}
if (this.properties.site){
if (this.properties.site) {
this.listDisabled = false;
}
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)){
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)) {
//this._getColumnsAsync();
}
if (!this.properties.other){
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
}
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail){
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail) {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
this._getSiteRootWeb()
.then((response0) => {
this._getSiteRootWeb()
.then((response0) => {
this._getSites(response0['Url'])
.then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
sites.push({key:'other', text:'Other Site (Specify Url)'});
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']){
sites.push({key: response.value[_key]['Url'], text: response.value[_key]['Title']});
}
}
this._siteOptions = sites;
if (this.properties.site ){
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle,this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title']});
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
});
}
});
}
});
});
} else {
this._getSitesAsync();
this._getSitesAsync();
}
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
if (newValue == 'other' ){
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other){
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
if (newValue == 'other') {
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other) {
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue,siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({key: response.value[_key]['InternalName'], text: response.value[_key]['Title']});
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue, siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
}
}
private colsDisabled: boolean = true;
@ -265,16 +266,16 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
private _getSiteRootWeb(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListTitles(site: string): Promise<ISPLists> {
@ -284,7 +285,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
});
}
private _getListColumns(listNameColumns: string,listsite: string): Promise<any> {
private _getListColumns(listNameColumns: string, listsite: string): Promise<any> {
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
@ -292,89 +293,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
private _getListData(listName: string, site: string): Promise<any> {
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`,SPHttpClient.configurations.v1)
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _renderList(items: any[]): void {
var calItems: EventObjectInput [] = items.map((list: any) => {
return {
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
};
var calItems: EventObjectInput[] = items.map((list: any) => {
return {
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
};
});
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
const calendarOptions:EventObjectInput = {
const calendarOptions: EventObjectInput = {
title: "test",
theme: true,
events: calItems,
eventClick: (_event) => {
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title,eventDetail,'info');
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title, eventDetail, 'info');
}
};
jQuery('.spfxcalendar', this.domElement).fullCalendar(calendarOptions);
}
private _getSitesAsync(): void {
this._getSiteRootWeb()
this._getSiteRootWeb()
.then((response) => {
this._getSites(response['Url'])
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
sites.push({key:'other', text:'Other Site (Specify Url)'});
for (var _key in response1.value) {
sites.push({key: response1.value[_key]['Url'], text: response1.value[_key]['Title']});
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle,this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title']});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response1.value) {
sites.push({ key: response1.value[_key]['Url'], text: response1.value[_key]['Title'] });
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
});
});
});
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement,"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
}

View File

@ -30,7 +30,7 @@ The goal of the sample is to illustrate a single call calling pattern for the th
## Applies to
* [SharePoint Framework Release GA](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -26,9 +26,9 @@
## Applies to
* [SharePoint Online](https:/dev.office.com/sharepoint)
* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Microsoft Teams](https://products.office.com/en-US/microsoft-teams/group-chat-software)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties

View File

@ -14,7 +14,7 @@ An SPFx webpart that displays a Scalable Vector Graphics (SVG) image using prope
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [sp-dev-fx-property-controls](https://github.com/SharePoint/sp-dev-fx-property-controls)
* [PnP Man](https://github.com/thechriskent/PnPMan)

View File

@ -10,8 +10,8 @@ This web part lists all the public teams the current user is not yet a member of
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -29,8 +29,8 @@ See the demo:
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -20,7 +20,7 @@ This sample shows a possible approach of handling multiple editions (e.g. trial,
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Solution

View File

@ -18,7 +18,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* SharePoint 2019 on-premises

View File

@ -30,8 +30,8 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -26,16 +26,16 @@ Note: This approach will not "pollute" your solution with additional resources o
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)
![1.10.0](https://img.shields.io/badge/drop-1.10.0-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Prerequisites
* Office 365 subscription with SharePoint Online license
* SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
* SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
## Solution
@ -49,6 +49,7 @@ Version|Date|Comments
-------|----|--------
1.0|January 24, 2019|Initial release
1.1|February 05, 2020|Update to SPFx 1.10.0
1.2|June 04, 2020|Added full-width support
## Disclaimer

File diff suppressed because it is too large Load Diff

View File

@ -23,6 +23,7 @@
"properties": {
"requiresPageRefresh": false,
"customWorkbenchStyles": true,
"customWorkbenchStylesFullWidth": false,
"previewMode": true
}
}]

View File

@ -8,6 +8,7 @@ import * as strings from 'WorkbenchCustomizerWebPartStrings';
export interface IWorkbenchCustomizerWebPartProps {
requiresPageRefresh: boolean;
customWorkbenchStyles: boolean;
customWorkbenchStylesFullWidth: boolean;
previewMode: boolean;
}
@ -26,6 +27,10 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
await import('./styles/customWorkbenchStyles.module.scss');
}
if (this.properties.customWorkbenchStyles && this.properties.customWorkbenchStylesFullWidth) {
await import('./styles/customWorkbenchStylesFullWidth.module.scss');
}
if (this.properties.previewMode) {
const previewBtn = document.getElementsByName("Preview")[0];
previewBtn.click();
@ -68,6 +73,10 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
PropertyPaneToggle('customWorkbenchStyles', {
label: strings.CustomWorkbenchStylesFieldLabel
}),
PropertyPaneToggle('customWorkbenchStylesFullWidth', {
label: strings.customWorkbenchStylesFullWidthFieldLabel,
disabled: !this.properties.customWorkbenchStyles
}),
PropertyPaneToggle('previewMode', {
label: strings.PreviewModeFieldLabel
})

View File

@ -1,8 +1,9 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"PropertyPaneDescription": "Web part that can customize the behaviour of the workbench page to work around some of the existing limitations. It's recommended that you refresh the page after changing web part properties.",
"BasicGroupName": "Configuration",
"CustomWorkbenchStylesFieldLabel": "Enable custom styles for Workbench",
"customWorkbenchStylesFullWidthFieldLabel": "Enable custom styles for full-width",
"PreviewModeFieldLabel": "Enable Preview mode by default",
}
});

View File

@ -2,6 +2,7 @@ declare interface IWorkbenchCustomizerWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
CustomWorkbenchStylesFieldLabel: string;
customWorkbenchStylesFullWidthFieldLabel: string;
PreviewModeFieldLabel: string;
}

View File

@ -1,5 +1,4 @@
:global #workbenchPageContent {
// max-width: 1316px;
max-width: 100%;
left: 0;
right: 0;

View File

@ -0,0 +1,24 @@
:global #workbenchPageContent {
& > div {
& > div {
& > div {
.CanvasComponent {
.CanvasZone {
max-width: 100%;
padding-left: 0;
padding-right: 0;
.CanvasSection {
padding-left: 0;
padding-right: 0;
.ControlZone {
padding: 0;
}
}
}
}
}
}
}
}

View File

@ -1,18 +1,18 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- Knockout
createdDate: 1/1/2016 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- Knockout
createdDate: 1/1/2016 12:00:00 AM
---
# Sample Web Part implementing dependent properties in Property Pane
## Summary
@ -28,7 +28,7 @@ Sample Web Part illustrating
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Solution

View File

@ -1,18 +1,18 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- Knockout
createdDate: 3/1/2017 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- Knockout
createdDate: 3/1/2017 12:00:00 AM
---
# Sample showing the use of @pnp/sp library with Knockoutjs
## Summary
@ -26,8 +26,8 @@ This webpart demonstrates how to integrate the @pnp/sp library into the SharePoi
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365](http://dev.office.com/sharepoint)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365](https://docs.microsoft.com/sharepoint/)
## Solution

View File

@ -17334,9 +17334,9 @@
}
},
"websocket-extensions": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"dev": true
},
"whatwg-encoding": {

View File

@ -28,7 +28,7 @@ Sample Web Part illustrating
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Solution

View File

@ -1,18 +1,18 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 10/1/2017 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 10/1/2017 12:00:00 AM
---
# SharePoint Framework PnP Controls Sample
## Summary
@ -37,7 +37,7 @@ The sample makes use of the following controls:
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Solution

View File

@ -31,8 +31,8 @@ Sample SharePoint Framework client-side web part built using React showing upcom
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -26,8 +26,8 @@ Sample SharePoint Framework client-side web part illustrating communication with
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -11,8 +11,8 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -29,8 +29,8 @@ Below NPM packages are used to develop this sample.
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -12,8 +12,8 @@ A version of [react-adaptivecards](https://github.com/SharePoint/sp-dev-fx-webpa
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -16,8 +16,8 @@ This sample creates an Adaptive Cards Host web part that you can use to display
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -44,8 +44,8 @@ Path can be `/sites/mysc/style library/js/custom.js` or `/sites/mysc/style libra
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
### Package and Deploy

View File

@ -15,8 +15,8 @@ It needs Globlal Administrator or SharePoint Online Administrator permissions in
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -23,8 +23,8 @@ Webpart is developed using below technologies
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)

View File

@ -31,13 +31,13 @@ Azure DevOps pipelines configurations are included to demonstrate how the AppSet
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 Developer Tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 Developer Tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Prerequisites
- Office 365 subscription with SharePoint Online.
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
- SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
## Solution

View File

@ -57,8 +57,8 @@ Following are required to access the data using **[App Insights API](https://dev
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## SharePoint Frameword Pre-requisites

View File

@ -1,18 +1,18 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 5/1/2017 12:00:00 AM
---
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 5/1/2017 12:00:00 AM
---
# React sample showing the use of @pnp/js with Async / Await
## Summary
@ -26,8 +26,8 @@ This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with
## Applies to
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -11,8 +11,8 @@ This project contains two separate project folders:
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -21,8 +21,8 @@ But you can synchronize the Birthdays list with other applications HR Systems, o
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -33,8 +33,8 @@ where sample was demonstrated.
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
* [Microsoft Bot Framework](http://dev.botframework.com)
## Prerequisites

View File

@ -28,8 +28,8 @@ For more information about how this solution was built, including some design de
## Applies to
- [SharePoint Framework](https:/dev.office.com/sharepoint)
- [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
- [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -89,8 +89,8 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties

View File

@ -17,9 +17,9 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
## Applies to
* [SharePoint Online](https:/dev.office.com/sharepoint)
* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Microsoft Teams](https://products.office.com/en-US/microsoft-teams/group-chat-software)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties

View File

@ -174,8 +174,8 @@ This sample shows how to use X and Y coordinate data elements in a scatter chart
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -60,8 +60,8 @@ The file picker includes the following tabs:
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution
@ -152,7 +152,7 @@ You can also simply set each `PropertyPaneFilePicker`'s `disableWebSearchTab` pr
* [Fluent for Fabric](https://fluentfabric.azurewebsites.net/#/components)
* [Build custom controls for the property pane](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/build-custom-property-pane-controls)
* [Office UI Fabric](https://dev.office.com/fabric)
* [Office UI Fabric](https://developer.microsoft.com/fluentui/)
* [Button](https://developer.microsoft.com/en-us/fabric#/components/button)
* [CommandBar](https://developer.microsoft.com/en-us/fabric#/components/commandbar)
* [DetailsList](https://developer.microsoft.com/en-us/fabric#/components/detailslist)

View File

@ -10,8 +10,8 @@ Load React components and third-party packages on demand in SPFx
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -28,8 +28,8 @@ The `React Content Query WebPart` is a modern version of the good old `Content b
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution
@ -106,7 +106,7 @@ External scripts can be used to include either libraries such as *jQuery*, or ev
### Adding the WebPart to your page
To add the `React Content Query WebPart` to your site page you have two options :
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint))
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
- Or download the `react-content-query-webpart.sppkg` file available in the `sharepoint/solution` folder of the repository and add it directly in your app catalog in order to be able to use it in your site.
Note : The second method will only work for Office 365 sites, since the **.ppkg** file points to an Office 365 public CDN url which expects the referer to come from a valid https://**\*.sharepoint.com\*** url.

View File

@ -16,8 +16,8 @@ While the original web part was based on an **XSLT** templating engine, this *Re
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution
@ -176,7 +176,7 @@ Once connected to a source, you will able to connect any of the following proper
To add the **Content Query web part** to your site page you have two options:
* Either clone this repository, build the project yourself and connect it to SharePoint (see [Connect your client-side web part to SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
* Either clone this repository, build the project yourself and connect it to SharePoint (see [Connect your client-side web part to SharePoint](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
* Or download the `react-content-query-web part.sppkg` file available in the `sharepoint/solution` folder of the repository and add it directly in your app catalog in order to be able to use it in your site.
> Note: The second method will only work for Office 365 sites, since the `.sppkg` file points to an Office 365 public CDN URL which expects the referrer to come from a valid `https://**\*.sharepoint.com\***` URL.

View File

@ -17,8 +17,8 @@ While the original web part was based on an XSLT templating engine, this React w
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -16,8 +16,8 @@ The following info is displayed:
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -12,8 +12,8 @@ The web part demonstrates the usage of "CSS in JS" pattern with SharePoint Frame
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution

View File

@ -38,8 +38,8 @@ Cascading drop-downs in the property pane both using external data.
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -9,8 +9,8 @@ The abstract factory pattern will allow to define an interface for the creation
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -9,8 +9,8 @@ Builder pattern builds a complex object using simple objects and using a step by
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -13,8 +13,8 @@ Another definition which I liked more and fits perfectly my sample is the follo
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -12,7 +12,7 @@ I wanted to write this for so long but studying this subject, practicing and ach
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -9,8 +9,8 @@ A singleton is a pattern that guarantees there is a single instance of an object
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -10,8 +10,8 @@ Blog post here: https://dev.to/kayis/is-react-solid-630
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

View File

@ -14,7 +14,7 @@ One way to find devs from the same stack near you.
## Applies to
* [SharePoint Online](https:/dev.office.com/sharepoint)
* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
## Solution

View File

@ -35,9 +35,9 @@
## Applies to
* [SharePoint Online](https:/dev.office.com/sharepoint)
* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Microsoft Teams](https://products.office.com/en-US/microsoft-teams/group-chat-software)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties

View File

@ -31,8 +31,8 @@ Below NPM packages are used to develop this sample.
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution

View File

@ -25,13 +25,13 @@ This sample shows how to build web parts that display documents in accordance wi
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
- Office 365 subscription with SharePoint Online.
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
- SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
## Solution

View File

@ -27,8 +27,8 @@ This web part allows you to add custom CSS on a page to enhance list formatting.
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites

Some files were not shown because too many files have changed in this diff Show More