Added telemetry to every README.md file
This commit is contained in:
Hugo Bernier
parent
fca2c8047e
commit
242b8e5f9b
|
|
@ -1,3 +1,20 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-365
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJs
|
||||
createdDate: 2/15/2020 12:00:00 AM
|
||||
---
|
||||
|
||||
# AngularJS Greeting client-side web part
|
||||
|
||||
## Summary
|
||||
|
|
@ -53,3 +70,5 @@ This web part illustrates the following concepts on top of the SharePoint Framew
|
|||
* using non-reactive web part property pane
|
||||
* using conditional rendering for one-time web part setup
|
||||
* passing web part configuration to AngularJS and reacting to configuration changes
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-greeting" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 10/21/2016 12:00:00 AM
|
||||
---
|
||||
# Migrating existing Angular applications to SharePoint Framework sample
|
||||
|
||||
## Summary
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- ms-graph
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- Microsoft Graph
|
||||
services:
|
||||
- SharePoint
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- ms-graph
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- Microsoft Graph
|
||||
services:
|
||||
- SharePoint
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 2/16/2017 12:00:00 AM
|
||||
---
|
||||
## Angular MS Graph Web Part Built with Angular v1.x
|
||||
|
||||
## Summary
|
||||
|
|
@ -94,4 +94,4 @@ Version|Date|Comments
|
|||
1. Replace the **aad** and **redirect_uri** placeholder values with the application ID and redirect url of your registered Azure application in the GraphHelper.ts file Under
|
||||
src -> angularMsGraph -> GraphHelper.ts
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Angular multi-page client-side web part
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 11/1/2016 12:00:00 AM
|
||||
---
|
||||
# Angular multi-page client-side web part
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -98,4 +98,4 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
- reading and updating SharePoint list items using Angular
|
||||
- showing charts using [Chart.js](http://www.chartjs.org) and [Angular Chart directives](https://jtblin.github.io/angular-chart.js/)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-multipage" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-multipage" />
|
||||
|
|
|
|||
|
|
@ -1,68 +1,68 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Spfx Webpart: File Upload using AngularJs
|
||||
|
||||
## Summary
|
||||
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development), Gautam Sheth(SharePoint Consultant,RapidCircle,@gautamdsheth)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|November 24, 2016|Initial release
|
||||
2.0|May 26, 2017|GA release
|
||||
2.1|July 19, 2017|Bug fix
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `tsd install`
|
||||
- `gulp serve --nobrowser`
|
||||
|
||||
## Features
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
|
||||
|
||||
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
|
||||
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
|
||||
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 6/19/2017 12:00:00 AM
|
||||
---
|
||||
# Spfx Webpart: File Upload using AngularJs
|
||||
|
||||
## Summary
|
||||
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development), Gautam Sheth(SharePoint Consultant,RapidCircle,@gautamdsheth)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|November 24, 2016|Initial release
|
||||
2.0|May 26, 2017|GA release
|
||||
2.1|July 19, 2017|Bug fix
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `tsd install`
|
||||
- `gulp serve --nobrowser`
|
||||
|
||||
## Features
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
|
||||
|
||||
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
|
||||
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
|
||||
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- Office UI Fabric
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# Angular & ngOfficeUIFabric Client-Side Web Part
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- Office UI Fabric
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 8/29/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# Angular & ngOfficeUIFabric Client-Side Web Part
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Search Client-Side Web Part Built with Angular v1.x
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 2/4/2017 12:00:00 AM
|
||||
---
|
||||
# Search Client-Side Web Part Built with Angular v1.x
|
||||
|
||||
## Summary
|
||||
This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework
|
||||
|
|
@ -72,4 +72,4 @@ Version|Date|Comments
|
|||
> and not by id because then I would get everything that inherits from that content type. I only want the
|
||||
> the results for a specific content type and not everything that inherits that content type as well
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-search" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-search" />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 3/10/2017 12:00:00 AM
|
||||
---
|
||||
# Angular client-side web part
|
||||
|
||||
## Summary
|
||||
|
|
@ -51,4 +67,4 @@ This web part illustrates the following concepts on top of the SharePoint Framew
|
|||
* using conditional rendering for one-time web part setup
|
||||
* passing web part configuration to Angular and reacting to configuration changes
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-todo" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-todo" />
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Angular2 Web Part Prototype
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 8/14/2017 12:00:00 AM
|
||||
---
|
||||
# Angular2 Web Part Prototype
|
||||
|
||||
## Note to developers
|
||||
> This web part sample is currently in prototype phase and subject to change.
|
||||
|
|
@ -83,7 +83,7 @@ Though this is not a best practice, it helps build web parts successfully.
|
|||
We are trying to find better solutions to this problem. Specially, how to avoid creating a separate NgModule for each web part.
|
||||
|
||||
### Adding functionality
|
||||
To add functionality to this web part prototype the main file to edit is TodoWebPart.ts, here there are comments to help you alter the prototype.
|
||||
To add functionality to this web part prototype the main file to edit is `TodoWebPart.ts`, here there are comments to help you alter the prototype.
|
||||
|
||||
### Web part concepts
|
||||
The web part displays a title, button to add to dos and a button to print the to do items to the console.
|
||||
|
|
@ -92,4 +92,4 @@ This web part illustrates the following concepts on top of the SharePoint Framew
|
|||
- Changing a property (the title) of a web part using the PropertyPane
|
||||
- Manipulating properties in the Angular2 component class and saving to web part’s property bag
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular2-prototype" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular2-prototype" />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 6/1/2018 12:00:00 AM
|
||||
---
|
||||
# Angular Elements in SharePoint Framework
|
||||
|
||||
## Summary
|
||||
|
|
|
|||
|
|
@ -1,3 +1,20 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- AngularJS
|
||||
createdDate: 1/8/2019 12:00:00 AM
|
||||
---
|
||||
|
||||
# Angular Elements with HTML Template File in SharePoint Framework
|
||||
|
||||
## Summary
|
||||
|
|
@ -48,7 +65,7 @@ This web part illustrates the following concepts on top of the SharePoint Framew
|
|||
## Implementation
|
||||
|
||||
The below piece of code in gulpfile.js is the key to update the build pipeline:
|
||||
```
|
||||
```typescript
|
||||
//************START: Added to handle Template file url ************/
|
||||
|
||||
var inlineNgxTemplate = require('gulp-inline-ngx-template');
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- jQuery
|
||||
createdDate: 5/1/2017 12:00:00 AM
|
||||
---
|
||||
## Bootstrap Slider Built with jQueryr v1.x and Boostrap v3.x
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- jQuery
|
||||
createdDate: 5/1/2017 12:00:00 AM
|
||||
---
|
||||
## Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x
|
||||
|
||||
## Summary
|
||||
Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.
|
||||
|
|
@ -63,7 +64,7 @@ Version|Date|Comments
|
|||
- add the app to your SharePoint Online site
|
||||
- When the app is finished installing you should see a **SPFx List** in the **Site Contents** of the site
|
||||
|
||||
- Add items to the **SPFx List** inorder for slides to display in the webpart
|
||||
- Add items to the **SPFx List** in order for slides to display in the webpart
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/bootstrap-slider" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
---
|
||||
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
|
||||
platforms:
|
||||
- Handlebars
|
||||
createdDate: 3/5/2017 12:00:00 AM
|
||||
---
|
||||
## SPFx Sample with Handlebars.js
|
||||
|
||||
This sample demonstrate how to set up SPFX to use [Handlebars](http://handlebarsjs.com) through [webpack loader](https://webpack.github.io/docs/loaders.html).
|
||||
This sample demonstrate how to set up SPFx to use [Handlebars](http://handlebarsjs.com) through [webpack loader](https://webpack.github.io/docs/loaders.html).
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- JQuery
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# Using jQuery loaded from CDN
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- JQuery
|
||||
createdDate: 9/16/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# Using jQuery loaded from CDN
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -65,4 +66,4 @@ This web part illustrates the following concepts on top of the SharePoint Framew
|
|||
- using non-reactive web part Property Pane
|
||||
- using conditional rendering for one-time web part setup
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/jquery-cdn" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/jquery-cdn" />
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -86,3 +86,5 @@ This solution doesn't work on local mode.
|
|||
#### SharePoint Mode
|
||||
If you want to try on a real environment, open:
|
||||
[O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-advanced-commenting" />
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Display List JavaScript Client-Side Web Part
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 5/15/2017 12:00:00 AM
|
||||
---
|
||||
# Display List JavaScript Client-Side Web Part
|
||||
|
||||
## Summary
|
||||
This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list.
|
||||
|
||||
|
||||
.
|
||||
|
||||
> Does only show data when hosted in SharePoint. No mock data at this point for local testing the rendering.
|
||||
|
|
@ -71,4 +70,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* Logging
|
||||
* Rendering error messages.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-display-list" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-display-list" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
# Display Employee Spotlight JavaScript Client-Side Web Part
|
||||
|
||||
## Summary
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- skype
|
||||
- office-skype-business
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- skype
|
||||
- office-skype-business
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
# JavaScript Skype Status WebPart
|
||||
|
||||
## Summary
|
||||
|
|
@ -46,7 +46,7 @@ Version|Date|Comments
|
|||
1.4|March 27th, 2019|Upgrade to SPFx 1.8.0
|
||||
1.3|November 18th, 2018|Upgrade to SPFx 1.7.0
|
||||
1.2|July 4th, 2018|Fixed a bug when subscribing to the current user's status
|
||||
1.1|June 22nd, 2018|Upgraded to SPFX 1.5
|
||||
1.1|June 22nd, 2018|Upgraded to SPFx 1.5
|
||||
1.0|December 1, 2017|Initial release
|
||||
|
||||
## Disclaimer
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 9/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
createdDate: 9/1/2017 12:00:00 AM
|
||||
---
|
||||
# Handling Multiple Editions of SPFx Solution
|
||||
## Summary
|
||||
This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.
|
||||
This sample shows a possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -40,33 +40,33 @@ Version|Date|Comments
|
|||
## Description
|
||||
|
||||
### Use Case
|
||||
You are an ISV and developing some product that has multiple editions, let's say, trial, lite, full. You want to have separate package file (sppkg) for each edition and also reference different CDNs based on the edition.
|
||||
You are an ISV and developing some product that has multiple editions, let's say, trial, lite, full. You want to have a separate package file (`.sppkg`) for each edition and also reference different CDNs based on the edition.
|
||||
|
||||
### Problems to address
|
||||
Thinking about the use case in details we can point several problems that should be addressed:
|
||||
- When we're creating a new version we should create 3 separate sppkg files
|
||||
- Each sppkg file should contain manifest that references different CDN endpoints
|
||||
- When we're creating a new version we should create 3 separate `.sppkg` files
|
||||
- Each `.sppkg` file should contain manifest that references different CDN endpoints
|
||||
- It should be easy to upgrade customer from trial to lite and then to full; or directly from trial to full
|
||||
- You should know current edition in the code to execute the logic based on the edition's restrictions
|
||||
|
||||
### Approach
|
||||
This sample shows the approach that is based on custom Gulp task that should be run before bundling and packaging the solution.
|
||||
This sample shows the approach that is based on a custom Gulp task that should be run before bundling and packaging the solution.
|
||||
The name of the task is `change-build-edition`. Parameter: `edition`.
|
||||
The task updates SPFx solution configuration files to contain edition-specific information:
|
||||
- deploy-azure-storage.json is updated to contain correct `container` value
|
||||
- package-solution.json is updated to contain correct `solution.version` and `paths.zippedPackage` values. In this sample I'm using version's revision - 4th digit - to specify the edition: 0 for trial, 1 for lite, 2 for full. It allows to easily update customers. zippedPackage path is modified to create sppkg in subfolder based on edition configuration.
|
||||
- write-manifests.json is updated to contain correct CDN endpoint URL.
|
||||
- write-manifests.json is updated to contain the correct CDN endpoint URL.
|
||||
|
||||
Additionally, web part's source code folder contains `custom-config.json` file with `edition` property:
|
||||
Additionally, the web part's source code folder contains `custom-config.json` file with `edition` property:
|
||||
```
|
||||
{
|
||||
"edition": "full"
|
||||
}
|
||||
```
|
||||
This file is modified by custom task as well to contain correct edition.
|
||||
This file is modified by a custom task as well to contain the correct edition.
|
||||
Later `custom-config.json` is referenced (`require('./custom-config.json')`) in web part code to provide custom logic based on current edition.
|
||||
|
||||
Use following commands to build specific edition version:
|
||||
Use the following commands to build specific edition version:
|
||||
```
|
||||
gulp change-build-edition --edition lite
|
||||
gulp bundle --ship
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ This sample web part provides a user interface for applying a Modern Experience
|
|||
|
||||
The Theme Palette can be generated using the UI Fabric Theme Generator at: https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/9318/merge/theming-designer/index.html.
|
||||
|
||||
<h2>The following feature is available within this sample:</h2>
|
||||
### The following feature is available within this sample:
|
||||
|
||||
<b>Apply a theme:</b><br>
|
||||
#### Apply a theme:
|
||||
By providing a Site Collection URL, along with a theme name and palette, the theme will be applied to the Site Collection directly without being added to the tenant Company Theme options.<br>
|
||||
NOTE: This is a great option to provide theme management of a Site Collection without adding a theme to the "Company Themes" choices within the "Change the Look" options at the tenant level. The web part could be added to a Site Collection App Catalog to ensure availability of the web part is only available to those approved for theme management.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ This sample web part provides a user interface for creating, updating, deleting
|
|||
|
||||
The Theme Palette can be generated using the UI Fabric Theme Generator at: https://developer.microsoft.com/en-us/fabric#/styles/themegenerator
|
||||
|
||||
<h2>The following four features are available within this sample:</h2>
|
||||
### The following four features are available within this sample:
|
||||
|
||||
<b>Create a theme:</b><br>
|
||||
#### Create a theme:
|
||||
Using a provided theme name and theme color palette a Modern Experience them is created and available at the tenant level.
|
||||
|
||||
|
||||
<b>Update a theme:</b><br>
|
||||
#### Update a theme:
|
||||
By selecting a pre-existing theme from the dropdown, the theme at the tenant level will be updated with the palette provided in the Theme Palette texbox.
|
||||
|
||||
|
||||
<b>Delete a theme:</b><br>
|
||||
#### Delete a theme:
|
||||
By selecting a pre-existing theme from the dropdown, the theme will be deleted from the tenant level.
|
||||
|
||||
|
||||
<b>Appply a theme:</b><br>
|
||||
#### Apply a theme:
|
||||
By providing a Site Collection URL, along with a theme name and palette, the theme will be applied to the Site Collection directly without being added to the tenant Company Theme options.<br>
|
||||
NOTE: This is a great option to provide theme management of a Site Collection without adding a theme to the "Company Themes" choices within the "Change the Look" options at the tenant level. The web part could be added to a Site Collection App Catalog to ensure availability of the web part is only available to those approved for theme management.
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ The easiest way to use the solution is to package it up and deploy to the App Ca
|
|||
Alternatively, you can add the output files for the web part to a custom SPFx project and the web part will also be served and available both from the local or hosted Workbench page:
|
||||
|
||||
* Generate the output files for the solution by executing `gulp bundle --ship`
|
||||
* Copy all files from js-workbench-customizer\dist to the dist folder of your custom solution
|
||||
* Copy the workbenchCustomizer folder from js-workbench-customizer\lib\webparts to the corresponding webparts folder of your custom solution
|
||||
* Copy all files from `js-workbench-customizer\dist` to the `dist` folder of your custom solution
|
||||
* Copy the `workbenchCustomizer` folder from `js-workbench-customizer\lib\webparts` to the corresponding webparts folder of your custom solution
|
||||
|
||||
Note: This approach will not "pollute" your solution with additional resources or dependencies as the SPFx toolchain will ignore those additional files by default when you package your solution. You can also clean everything by running `gulp clean` as both the lib and dist folders are deleted and recreated again. Git will also ignore dist and lib folders by default, so the files will never be added to source control.
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ Note: This approach will not "pollute" your solution with additional resources o
|
|||
|
||||
## Prerequisites
|
||||
|
||||
* Office 365 subscription with SharePoint Online licence
|
||||
* 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.
|
||||
|
||||
## Solution
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
# Taxonomy Web Part
|
||||
|
||||
## Summary
|
||||
|
|
@ -66,4 +66,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
- creating custom Knockout components
|
||||
- styling HTML elements to match Fabric UI experience
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-taxonomy" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-taxonomy" />
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
## Summary
|
||||
|
||||
This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.
|
||||
This sub folder contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
In subfolder _Server-API_ you can find the sample REST API built using ASP.NET MVC.
|
||||
You will need to publish the web application on an hosting environment (for example an Azure App Service), configure CORS, and configure the application in the Azure AD tenant under the cover of your target SharePoint Online tenant.
|
||||
You will need to publish the web application on a hosting environment (for example an Azure App Service), configure CORS, and configure the application in the Azure AD tenant under the cover of your target SharePoint Online tenant.
|
||||
|
||||
## Solution
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ Now run the following command to install the npm packages:
|
|||
npm install
|
||||
```
|
||||
|
||||
This will install the required npm packages and depedencies to build and run the client-side project.
|
||||
This will install the required npm packages and dependencies to build and run the client-side project.
|
||||
|
||||
Once the npm packages are installed, run the command to preview your web parts in SharePoint Workbench:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- OAuth 2.0
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- OAuth 2.0
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Azure Active Directory implicit flow authentication samples
|
||||
|
||||
## Summary
|
||||
|
|
@ -64,7 +64,7 @@ Version|Date|Comments
|
|||
- enable OAuth implicit flow
|
||||
- grant the application the **Microsoft Graph/Read user calendars** permission
|
||||
- copy the application's ID
|
||||
- in the **src/webparts/upcomingMeetings/AdalConfig.ts** file in the **clientId** property enter the application ID registered in Azure
|
||||
- in the `src/webparts/upcomingMeetings/AdalConfig.ts` file in the `clientId` property enter the application ID registered in Azure
|
||||
- in the command line execute
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
|
|
@ -82,4 +82,4 @@ Sample web part in this solution illustrates the following concepts on top of th
|
|||
- using the ADAL JS library with SharePoint Framework web parts built using React
|
||||
- passing web part properties to React components
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -84,13 +84,13 @@ Version|Date|Comments
|
|||
|
||||
### Configure the web part
|
||||
|
||||
- in the command line change the working directory to the **webpart** folder
|
||||
- in the command line change the working directory to the `webpart` folder
|
||||
- in the command line run `npm i`
|
||||
- in your code editor open the **webpart** folder
|
||||
- in the **./src/webparts/recentOrders/AdalConfig.ts** file
|
||||
- replace the empty GUID in the **clientId** property with the application ID of the **Orders** application
|
||||
- in the **endpoints** property, replace the URL of the API with the URL of your API App and the empty GUID with the application ID of the **Orders API** app.
|
||||
- in the **./src/webparts/recentOrders/components/RecentOrders.tsx** file
|
||||
- in your code editor open the `webpart` folder
|
||||
- in the `./src/webparts/recentOrders/AdalConfig.ts` file
|
||||
- replace the empty GUID in the `clientId` property with the application ID of the **Orders** application
|
||||
- in the `endpoints` property, replace the URL of the API with the URL of your API App and the empty GUID with the application ID of the **Orders API** app.
|
||||
- in the `./src/webparts/recentOrders/components/RecentOrders.tsx` file
|
||||
- in line 155 replace the empty GUID with the application ID of the **Orders API** application
|
||||
- in line 185 replace the URL with the URL of your API App
|
||||
- in the command line execute `gulp serve`
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
### General
|
||||
|
||||
- performing SharePoint GET operation in React using inbuilt SP Http Client
|
||||
- Using Fabric UI button component for pagination
|
||||
- optimizing REST responses for performance using nometadata option of JSON light
|
||||
- Using Fabric UI button component for pagination
|
||||
- optimizing REST responses for performance using `nometadata` option of JSON light
|
||||
- using PnP Webpart title control of @pnp/spfx-controls-react library
|
||||
- showing SharePoint list data in Accordion format using React Accessible Accordion plugin
|
||||
- searching in the fetched data by making use of Search Box from Office Fabric UI
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ Version|Date|Comments
|
|||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repo
|
||||
- npm i
|
||||
- gulp serve --nobrowser
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Adaptive Cards Image Gallery"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
# SPFx React app settings webpart #
|
||||
|
||||
## Summary
|
||||
|
|
@ -75,5 +75,3 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
- The use of app settings and passing the app settings to React components.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-app-settings" />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
## Summary
|
||||
|
||||
This web part show images and videos in carousel
|
||||
This web part show images and videos in carousel
|
||||
|
||||
It uses Microsoft Graph API to get image/video url and use PnPjs to load files from Picture library the images/videos are loading in lazy mode, progressively.
|
||||
It uses Microsoft Graph API to get image/video url and use PnPjs to load files from Picture library the images/videos are loading in lazy mode, progressively.
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ Version|Date|Comments
|
|||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
* Insert the one of the webs part on a page
|
||||
* Insert one of the webs part on a page
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -33,3 +33,4 @@ react-check-flows|Aakash Bhardwaj
|
|||
**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.**
|
||||
|
||||
---
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-check-flows" />
|
||||
|
|
@ -16,7 +16,7 @@ This web part uses Microsoft Graph API to get all the Office 365 or AAD Security
|
|||
|
||||
This extension illustrates the following concepts:
|
||||
|
||||
* Requesting **Directory.Read.All** permission scope for Microsoft Graph through the webApiPermissionRequests property in package-solution.json
|
||||
* Requesting **Directory.Read.All** permission scope for Microsoft Graph through the `webApiPermissionRequests` property in `package-solution.json`
|
||||
* Using MSGraphClient to call the **/groups/{groupId}/members** API to get all the members in a group
|
||||
* Using MSGraphClient to call the **/users/${email}/memberOf** API to get all the groups a user is member of
|
||||
* Exporting the results to a CSV file using [**react-csv**](https://www.npmjs.com/package/react-csv) third party package
|
||||
|
|
@ -42,3 +42,4 @@ react-check-user-group | [Aakash Bhardwaj](https://twitter.com/aakash_316)
|
|||
**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.**
|
||||
|
||||
---
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-check-user-group" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Code Splitting in SharePoint Framework
|
||||
|
||||
## Summary
|
||||
Load React components and third party packages on demand in SPFx
|
||||
Load React components and third-party packages on demand in SPFx
|
||||
|
||||
|
||||
|
||||
|
|
@ -40,4 +40,4 @@ Version|Date|Comments
|
|||
## Features
|
||||
More details included in this blog post: https://www.vrdmn.com/2018/10/code-splitting-in-sharepoint-framework.html
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-components-dynamicloading" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-components-dynamicloading" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
# React Content Query WebPart
|
||||
|
||||
## Summary
|
||||
|
|
@ -276,7 +276,7 @@ Both functions provide the following parameters :
|
|||
|
||||
Parameter | Description
|
||||
----------------------|-------------
|
||||
**wpContext** | Represents the context of the WebPart who called the function, which exposes all kinds of usefull informations such as **wpContext.domElement** which represents the HTML element on which the current WebPart is being rendered.
|
||||
**wpContext** | Represents the context of the WebPart who called the function, which exposes all kinds of useful informations such as **wpContext.domElement** which represents the HTML element on which the current WebPart is being rendered.
|
||||
**handlebarsContext** | Represents the handlebars context used for generating the template of the current WebPart. Can be used for adding handlebar block helpers in the **onPreRender** function for example.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ Version|Date|Comments
|
|||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Using external APIs using httpClient
|
||||
* [Office Fabric UI REact](https://developer.microsoft.com/en-us/fabric#/)
|
||||
* [Office Fabric UI React](https://developer.microsoft.com/en-us/fabric#/)
|
||||
* [SPFx Controls React](https://sharepoint.github.io/sp-dev-fx-controls-react/)
|
||||
* [SPFx Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls/)
|
||||
* [Recharts](http://recharts.org/en-US/)
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Custom property pane controls built in React
|
||||
|
||||
## Summary
|
||||
|
|
@ -87,6 +87,6 @@ Sample web parts in this solution illustrate the following concepts on top of th
|
|||
- displaying a custom loading indicator
|
||||
- reacting to web part property changes
|
||||
- updating properties of web part property pane controls
|
||||
- refreshing the web part property pane from web part
|
||||
- refreshing the web part property pane from the web part
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,381 +1,381 @@
|
|||
# Abstract Factory Design Pattern
|
||||
|
||||
## Summary
|
||||
The abstract factory pattern will allow to define an interface for the creation of objects without specifying their concrete classes. The objective of this pattern is that a class depends on the behavior of the abstract factory, which in turn will be implemented by different concrete classes that are changed at runtime based on some kind of configuration or predefined parameter.
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\abstractfactory | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 2018|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Abstract factory pattern
|
||||
|
||||
A very good real life scenario where this pattern can be used is in Data Application Layers scenario, more than often developers and architects are faced with requirements where an application needs to be able to access different databases or event different database servers which have different drivers, but the users want to to that without changing a lot of code, something that can be switched from an easy parameter somewhere.
|
||||
|
||||
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a webpart developed that brings Customer Information from Sharepoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
|
||||
|
||||
The users wants to see their products in the same Sharepoint page using the same webpart, meaning that the webpart needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
|
||||
|
||||
### Project Structure
|
||||
|
||||
|
||||
As seen above we have a Factory component and in there we have all files that our project needs, lets discuss them one by one.
|
||||
|
||||
##### Customer.ts
|
||||
Our model or data access object, nothing to fancy, the idea is to show the pattern, not complex Data Transfer Objects.
|
||||
|
||||
```typescript
|
||||
class Customer{
|
||||
public id: string;
|
||||
public firstName: string;
|
||||
public lastName: string;
|
||||
}
|
||||
|
||||
export default Customer;
|
||||
|
||||
```
|
||||
|
||||
#### DatasourcesEnum.ts
|
||||
|
||||
Yay!, we have Enums on typescript, and this will allows to ease work with selections on dropdowns, checkboxlists, etc. In this case is just a dropdown list with 2 options, but I guess you see the benefit here.
|
||||
|
||||
```typescript
|
||||
|
||||
enum DataSources {
|
||||
SharepointList = "SharepointList",
|
||||
JsonData = "JsonData"
|
||||
}
|
||||
|
||||
export default DataSources;
|
||||
|
||||
```
|
||||
|
||||
##### DaoFactory.ts
|
||||
This is the abstract class DAO Factory that would need to be implemented, for the ease of sake, I am doing only one DAO, Customers, but you can use the same pattern for many different DTOs as well on the same class.
|
||||
|
||||
```typescript
|
||||
import ICustomerDAO from "./ICustomerDAO";
|
||||
|
||||
import DataSources from "./DatasourcesEnum";
|
||||
|
||||
abstract class DAOFactory {
|
||||
|
||||
public abstract getCustomerDAO(): ICustomerDAO;
|
||||
|
||||
public static getDAOFactory(whichFactory: DataSources): DAOFactory {
|
||||
switch (whichFactory) {
|
||||
case DataSources.SharepointList:
|
||||
return new SharepointListDAOFactory();
|
||||
case DataSources.JsonData:
|
||||
return new JsonDAOFactory();
|
||||
default :
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DAOFactory;
|
||||
import SharepointListDAOFactory from "./SharepointListDAOFactory";
|
||||
import JsonDAOFactory from "./JsonDAOFactory";
|
||||
|
||||
```
|
||||
|
||||
##### JsoDAOFactory.ts
|
||||
This class is just the implementation of the factory method
|
||||
```typescript
|
||||
import DAOFactory from "./DaoFactory";
|
||||
import JsonCustomerDAO from "./JsonCustomerDAO";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
|
||||
class JsonDAOFactory extends DAOFactory {
|
||||
public getCustomerDAO(): ICustomerDao{
|
||||
return new JsonCustomerDAO();
|
||||
}
|
||||
}
|
||||
|
||||
export default JsonDAOFactory;
|
||||
```
|
||||
|
||||
##### SharepointListDAOFactory.ts
|
||||
This class is just the implementation of the factory method
|
||||
```typescript
|
||||
import DaoFactory from "./DaoFactory";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import SharepointCustomerDao from "./SharepointCustomerDAO";
|
||||
|
||||
class SharepointListDAOFactory extends DaoFactory {
|
||||
public getCustomerDAO(): ICustomerDao{
|
||||
return new SharepointCustomerDao();
|
||||
}
|
||||
}
|
||||
|
||||
export default SharepointListDAOFactory;
|
||||
|
||||
```
|
||||
|
||||
|
||||
##### ICustomerDao.ts
|
||||
Now, this is the customer interface which defines the methods that would need to be implemented and that depends on the data source endpoint, database or driver, or whatever.
|
||||
|
||||
```typescript
|
||||
import Customer from "./Customer";
|
||||
|
||||
interface ICustomerDao {
|
||||
insertCustomer(): number;
|
||||
deleteCustomer(): boolean;
|
||||
findCustomer(): Customer;
|
||||
updateCustomer(): boolean;
|
||||
listCustomers(): Customer[];
|
||||
}
|
||||
|
||||
export default ICustomerDao;
|
||||
```
|
||||
|
||||
##### JsonCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import Customer from "./Customer";
|
||||
|
||||
class JsonCustomerDAO implements ICustomerDao{
|
||||
public insertCustomer(): number {
|
||||
// implementation to be done by reader
|
||||
return 1;
|
||||
}
|
||||
|
||||
public deleteCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public findCustomer(): Customer {
|
||||
// implementation to be done by reader
|
||||
return new Customer();
|
||||
}
|
||||
|
||||
public updateCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public listCustomers(): Customer[] {
|
||||
// implementation to be done by reader
|
||||
let c1: Customer= new Customer();
|
||||
let c2: Customer= new Customer();
|
||||
let list: Array<Customer> = [c1, c2 ];
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
export default JsonCustomerDAO;
|
||||
```
|
||||
##### SharepointCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import Customer from "./Customer";
|
||||
|
||||
class SharepointCustomerDao implements ICustomerDao {
|
||||
public insertCustomer(): number {
|
||||
// implementation to be done by reader
|
||||
return 1;
|
||||
}
|
||||
|
||||
public deleteCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public findCustomer(): Customer {
|
||||
// implementation to be done by reader
|
||||
return new Customer();
|
||||
}
|
||||
|
||||
public updateCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public listCustomers(): Customer[] {
|
||||
// implementation to be done by reader
|
||||
let c1: Customer = new Customer();
|
||||
let c2: Customer = new Customer();
|
||||
let list: Array<Customer> = [c1, c2 ];
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
export default SharepointCustomerDao;
|
||||
```
|
||||
|
||||
##### The component
|
||||
This is where we actually see the entire benefit of the abstract factory pattern, as you can see the code is really short here and easy to read, no custom business logic, and everything so easy to maintain.
|
||||
|
||||
We create a private property of type ICustomerDao to be instantiated on the setDaos method based on the input of the user in the property pane. This method is only called in the constructor once.
|
||||
|
||||
And then in the render method we just get the Customer items from the datasource, and as you can see, its totally generic, no custom logic based on the datasource selected.
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import { IAbstractfactoryProps } from "./IAbstractFactoryProps";
|
||||
import { IAbstractFactoryState } from "./IAbstractFactoryState";
|
||||
import styles from './Abstractfactory.module.scss';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import DaoFactory from "./DaoFactory";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import DataSources from "./DatasourcesEnum";
|
||||
|
||||
export default class Abstractfactory extends React.Component<IAbstractfactoryProps, {}> {
|
||||
private customerDao: ICustomerDao;
|
||||
|
||||
constructor(props: IAbstractfactoryProps, state: IAbstractFactoryState) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
this.setDaos(props.datasource);
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IAbstractfactoryProps> {
|
||||
this.state = {
|
||||
items: this.customerDao.listCustomers(),
|
||||
};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public setInitialState(): void {
|
||||
this.state = {
|
||||
items: []
|
||||
};
|
||||
}
|
||||
|
||||
private setDaos(datasource: string): void {
|
||||
const data: any = datasource === "Sharepoint" ? DataSources.SharepointList : DataSources.JsonData;
|
||||
this.customerDao = DaoFactory.getDAOFactory(data).getCustomerDAO();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
And just for your understanding, I show below the props and states clases
|
||||
|
||||
##### IAbstractfactoryProps.ts
|
||||
```typescript
|
||||
export interface IAbstractfactoryProps {
|
||||
datasource: string;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
##### IAbstractFactoryState.ts
|
||||
```typescript
|
||||
import Customer from "./Customer";
|
||||
|
||||
export interface IAbstractFactoryState {
|
||||
items: Customer[];
|
||||
}
|
||||
```
|
||||
|
||||
And finally the webpart code
|
||||
##### AbstractFactoryWebPart.ts
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
|
||||
import * as strings from 'AbstractfactoryWebPartStrings';
|
||||
import Abstractfactory from './components/Abstractfactory';
|
||||
import { IAbstractfactoryProps } from './components/IAbstractfactoryProps';
|
||||
import { IAbstractfactoryWebPartProps } from "./IAbstractfactoryWebPartProps";
|
||||
|
||||
|
||||
|
||||
|
||||
export default class AbstractfactoryWebPart extends BaseClientSideWebPart<IAbstractfactoryWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IAbstractfactoryProps > = React.createElement(
|
||||
Abstractfactory,
|
||||
{
|
||||
datasource: this.properties.datasource
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown("datasource", {
|
||||
label: "DataSource",
|
||||
options: [
|
||||
{ key: "1", text: "Sharepoint"},
|
||||
{ key: "2", text: "JSON" }
|
||||
],
|
||||
selectedKey: "1",
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
>Conclusion:
|
||||
We all know that Sharepoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintenable code, code that anyone can read, and later modify.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/abstractfactory" />
|
||||
# Abstract Factory Design Pattern
|
||||
|
||||
## Summary
|
||||
The abstract factory pattern will allow to define an interface for the creation of objects without specifying their concrete classes. The objective of this pattern is that a class depends on the behavior of the abstract factory, which in turn will be implemented by different concrete classes that are changed at runtime based on some kind of configuration or predefined parameter.
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\abstractfactory | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 2018|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Abstract factory pattern
|
||||
|
||||
A very good real life scenario where this pattern can be used is in Data Application Layers scenario, more than often developers and architects are faced with requirements where an application needs to be able to access different databases or event different database servers which have different drivers, but the users want to to that without changing a lot of code, something that can be switched from an easy parameter somewhere.
|
||||
|
||||
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a webpart developed that brings Customer Information from SharePoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
|
||||
|
||||
The users wants to see their products in the same SharePoint page using the same webpart, meaning that the webpart needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
|
||||
|
||||
### Project Structure
|
||||
|
||||
|
||||
As seen above we have a Factory component and in there we have all files that our project needs, lets discuss them one by one.
|
||||
|
||||
##### Customer.ts
|
||||
Our model or data access object, nothing to fancy, the idea is to show the pattern, not complex Data Transfer Objects.
|
||||
|
||||
```typescript
|
||||
class Customer{
|
||||
public id: string;
|
||||
public firstName: string;
|
||||
public lastName: string;
|
||||
}
|
||||
|
||||
export default Customer;
|
||||
|
||||
```
|
||||
|
||||
#### DatasourcesEnum.ts
|
||||
|
||||
Yay!, we have Enums on typescript, and this will allows to ease work with selections on dropdowns, checkboxlists, etc. In this case is just a dropdown list with 2 options, but I guess you see the benefit here.
|
||||
|
||||
```typescript
|
||||
|
||||
enum DataSources {
|
||||
SharepointList = "SharepointList",
|
||||
JsonData = "JsonData"
|
||||
}
|
||||
|
||||
export default DataSources;
|
||||
|
||||
```
|
||||
|
||||
##### DaoFactory.ts
|
||||
This is the abstract class DAO Factory that would need to be implemented, for the ease of sake, I am doing only one DAO, Customers, but you can use the same pattern for many different DTOs as well on the same class.
|
||||
|
||||
```typescript
|
||||
import ICustomerDAO from "./ICustomerDAO";
|
||||
|
||||
import DataSources from "./DatasourcesEnum";
|
||||
|
||||
abstract class DAOFactory {
|
||||
|
||||
public abstract getCustomerDAO(): ICustomerDAO;
|
||||
|
||||
public static getDAOFactory(whichFactory: DataSources): DAOFactory {
|
||||
switch (whichFactory) {
|
||||
case DataSources.SharepointList:
|
||||
return new SharepointListDAOFactory();
|
||||
case DataSources.JsonData:
|
||||
return new JsonDAOFactory();
|
||||
default :
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DAOFactory;
|
||||
import SharepointListDAOFactory from "./SharepointListDAOFactory";
|
||||
import JsonDAOFactory from "./JsonDAOFactory";
|
||||
|
||||
```
|
||||
|
||||
##### JsoDAOFactory.ts
|
||||
This class is just the implementation of the factory method
|
||||
```typescript
|
||||
import DAOFactory from "./DaoFactory";
|
||||
import JsonCustomerDAO from "./JsonCustomerDAO";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
|
||||
class JsonDAOFactory extends DAOFactory {
|
||||
public getCustomerDAO(): ICustomerDao{
|
||||
return new JsonCustomerDAO();
|
||||
}
|
||||
}
|
||||
|
||||
export default JsonDAOFactory;
|
||||
```
|
||||
|
||||
##### SharepointListDAOFactory.ts
|
||||
This class is just the implementation of the factory method
|
||||
```typescript
|
||||
import DaoFactory from "./DaoFactory";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import SharepointCustomerDao from "./SharepointCustomerDAO";
|
||||
|
||||
class SharepointListDAOFactory extends DaoFactory {
|
||||
public getCustomerDAO(): ICustomerDao{
|
||||
return new SharepointCustomerDao();
|
||||
}
|
||||
}
|
||||
|
||||
export default SharepointListDAOFactory;
|
||||
|
||||
```
|
||||
|
||||
|
||||
##### ICustomerDao.ts
|
||||
Now, this is the customer interface which defines the methods that would need to be implemented and that depends on the data source endpoint, database or driver, or whatever.
|
||||
|
||||
```typescript
|
||||
import Customer from "./Customer";
|
||||
|
||||
interface ICustomerDao {
|
||||
insertCustomer(): number;
|
||||
deleteCustomer(): boolean;
|
||||
findCustomer(): Customer;
|
||||
updateCustomer(): boolean;
|
||||
listCustomers(): Customer[];
|
||||
}
|
||||
|
||||
export default ICustomerDao;
|
||||
```
|
||||
|
||||
##### JsonCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import Customer from "./Customer";
|
||||
|
||||
class JsonCustomerDAO implements ICustomerDao{
|
||||
public insertCustomer(): number {
|
||||
// implementation to be done by reader
|
||||
return 1;
|
||||
}
|
||||
|
||||
public deleteCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public findCustomer(): Customer {
|
||||
// implementation to be done by reader
|
||||
return new Customer();
|
||||
}
|
||||
|
||||
public updateCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public listCustomers(): Customer[] {
|
||||
// implementation to be done by reader
|
||||
let c1: Customer= new Customer();
|
||||
let c2: Customer= new Customer();
|
||||
let list: Array<Customer> = [c1, c2 ];
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
export default JsonCustomerDAO;
|
||||
```
|
||||
##### SharepointCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import Customer from "./Customer";
|
||||
|
||||
class SharepointCustomerDao implements ICustomerDao {
|
||||
public insertCustomer(): number {
|
||||
// implementation to be done by reader
|
||||
return 1;
|
||||
}
|
||||
|
||||
public deleteCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public findCustomer(): Customer {
|
||||
// implementation to be done by reader
|
||||
return new Customer();
|
||||
}
|
||||
|
||||
public updateCustomer(): boolean {
|
||||
// implementation to be done by reader
|
||||
return true;
|
||||
}
|
||||
|
||||
public listCustomers(): Customer[] {
|
||||
// implementation to be done by reader
|
||||
let c1: Customer = new Customer();
|
||||
let c2: Customer = new Customer();
|
||||
let list: Array<Customer> = [c1, c2 ];
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
export default SharepointCustomerDao;
|
||||
```
|
||||
|
||||
##### The component
|
||||
This is where we actually see the entire benefit of the abstract factory pattern, as you can see the code is really short here and easy to read, no custom business logic, and everything so easy to maintain.
|
||||
|
||||
We create a private property of type ICustomerDao to be instantiated on the setDaos method based on the input of the user in the property pane. This method is only called in the constructor once.
|
||||
|
||||
And then in the render method we just get the Customer items from the datasource, and as you can see, its totally generic, no custom logic based on the datasource selected.
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import { IAbstractfactoryProps } from "./IAbstractFactoryProps";
|
||||
import { IAbstractFactoryState } from "./IAbstractFactoryState";
|
||||
import styles from './Abstractfactory.module.scss';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import DaoFactory from "./DaoFactory";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
import DataSources from "./DatasourcesEnum";
|
||||
|
||||
export default class Abstractfactory extends React.Component<IAbstractfactoryProps, {}> {
|
||||
private customerDao: ICustomerDao;
|
||||
|
||||
constructor(props: IAbstractfactoryProps, state: IAbstractFactoryState) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
this.setDaos(props.datasource);
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IAbstractfactoryProps> {
|
||||
this.state = {
|
||||
items: this.customerDao.listCustomers(),
|
||||
};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public setInitialState(): void {
|
||||
this.state = {
|
||||
items: []
|
||||
};
|
||||
}
|
||||
|
||||
private setDaos(datasource: string): void {
|
||||
const data: any = datasource === "Sharepoint" ? DataSources.SharepointList : DataSources.JsonData;
|
||||
this.customerDao = DaoFactory.getDAOFactory(data).getCustomerDAO();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
And just for your understanding, I show below the props and states clases
|
||||
|
||||
##### IAbstractfactoryProps.ts
|
||||
```typescript
|
||||
export interface IAbstractfactoryProps {
|
||||
datasource: string;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
##### IAbstractFactoryState.ts
|
||||
```typescript
|
||||
import Customer from "./Customer";
|
||||
|
||||
export interface IAbstractFactoryState {
|
||||
items: Customer[];
|
||||
}
|
||||
```
|
||||
|
||||
And finally the webpart code
|
||||
##### AbstractFactoryWebPart.ts
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
|
||||
import * as strings from 'AbstractfactoryWebPartStrings';
|
||||
import Abstractfactory from './components/Abstractfactory';
|
||||
import { IAbstractfactoryProps } from './components/IAbstractfactoryProps';
|
||||
import { IAbstractfactoryWebPartProps } from "./IAbstractfactoryWebPartProps";
|
||||
|
||||
|
||||
|
||||
|
||||
export default class AbstractfactoryWebPart extends BaseClientSideWebPart<IAbstractfactoryWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IAbstractfactoryProps > = React.createElement(
|
||||
Abstractfactory,
|
||||
{
|
||||
datasource: this.properties.datasource
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown("datasource", {
|
||||
label: "DataSource",
|
||||
options: [
|
||||
{ key: "1", text: "Sharepoint"},
|
||||
{ key: "2", text: "JSON" }
|
||||
],
|
||||
selectedKey: "1",
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
>Conclusion:
|
||||
We all know that SharePoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintenable code, code that anyone can read, and later modify.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/abstractfactory" />
|
||||
|
|
|
|||
|
|
@ -1,480 +1,480 @@
|
|||
# Builder Design Pattern
|
||||
|
||||
## Summary
|
||||
Builder pattern builds a complex object using simple objects and using a step by step approach. This type of design pattern comes under creational pattern as this pattern provides one of the best ways to create an object.
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\builder | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 2018|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Builder pattern
|
||||
|
||||
A Builder class builds the final object step by step. This builder is independent of other objects.
|
||||
|
||||
For this pattern, we have taken an existing example https://www.tutorialspoint.com/design_pattern/builder_pattern.htm and translated it to Typescript. Data Access implementation details are left to the reader.
|
||||
|
||||
The idea on this example is to show how you can build a Complex object from single objects, a Meal from (burger, fries, soda). Suppose you have a Sharepoint List for Burgers, another list for Sodas, another one for desserts, and you want to build different Meals (Menus), so this would be a perfect sample.
|
||||
|
||||
### UML
|
||||
This is more or less the diagram of the classes were are coding below.
|
||||
|
||||
|
||||
|
||||
|
||||
### Project structure
|
||||
We have created a component with all the needed class, lets discuss them one by one.
|
||||
|
||||
|
||||
|
||||
|
||||
### IItem.ts
|
||||
|
||||
This interface is the one that every item needs to implement to come with a common structure for all products.
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
interface IItem {
|
||||
name(): string;
|
||||
packing(): IPacking;
|
||||
price(): number;
|
||||
}
|
||||
|
||||
export default IItem;
|
||||
```
|
||||
|
||||
### IPacking.ts
|
||||
|
||||
This interface is the one that all packaging will use, eg: Bottle, Wrapper, etc, its the way to define common behavior and properties for each product packing.
|
||||
|
||||
```typescript
|
||||
interface IPacking {
|
||||
pack(): string;
|
||||
}
|
||||
|
||||
export default IPacking;
|
||||
```
|
||||
|
||||
### Bottle.ts
|
||||
This is one type of packing, it implements the IPacking interface.
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
class Bottle implements IPacking {
|
||||
public pack(): string {
|
||||
return "Bottle";
|
||||
}
|
||||
}
|
||||
|
||||
export default Bottle;
|
||||
```
|
||||
|
||||
|
||||
### Wrapper.ts
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
class Wrapper implements IPacking {
|
||||
public pack(): string {
|
||||
return "Wrapper";
|
||||
}
|
||||
}
|
||||
|
||||
export default Wrapper;
|
||||
```
|
||||
|
||||
### Burger.ts
|
||||
This is an abstract class from which all our specific burgers need to implement, its there to have a common structure for name, packing and pricing.
|
||||
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
import Wrapper from "./Wrapper";
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
abstract class Burger implements IItem {
|
||||
public name(): string {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
|
||||
public packing(): IPacking {
|
||||
return new Wrapper();
|
||||
}
|
||||
|
||||
public abstract price(): number ;
|
||||
|
||||
}
|
||||
|
||||
export default Burger;
|
||||
```
|
||||
|
||||
### ChickenBurger.ts
|
||||
```typescript
|
||||
import Burger from "./Burger";
|
||||
|
||||
class ChickenBurger extends Burger {
|
||||
public price(): number {
|
||||
return 15;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Chicken Burger";
|
||||
}
|
||||
}
|
||||
|
||||
export default ChickenBurger;
|
||||
|
||||
```
|
||||
|
||||
### VegBurger.ts
|
||||
```typescript
|
||||
import Burger from "./Burger";
|
||||
|
||||
class VegBurger extends Burger {
|
||||
public price(): number {
|
||||
return 11;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Veg Burger";
|
||||
}
|
||||
}
|
||||
|
||||
export default VegBurger;
|
||||
|
||||
```
|
||||
### Colddrink.ts
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
import IPacking from "./IPacking";
|
||||
import Bottle from "./Bottle";
|
||||
|
||||
abstract class ColdDrink implements IItem {
|
||||
public name(): string {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
public packing(): IPacking {
|
||||
return new Bottle();
|
||||
}
|
||||
|
||||
public abstract price(): number ;
|
||||
|
||||
}
|
||||
|
||||
export default ColdDrink;
|
||||
|
||||
```
|
||||
### Coke.ts
|
||||
```typescript
|
||||
import ColdDrink from "./ColdDrink";
|
||||
|
||||
class Coke extends ColdDrink {
|
||||
public price(): number {
|
||||
return 2.5;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Coca Cola";
|
||||
}
|
||||
}
|
||||
|
||||
export default Coke;
|
||||
|
||||
|
||||
```
|
||||
### Pepsi.ts
|
||||
```typescript
|
||||
import ColdDrink from "./ColdDrink";
|
||||
|
||||
class Pepsi extends ColdDrink {
|
||||
public price(): number {
|
||||
return 1.5;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Pepsi Cola";
|
||||
}
|
||||
}
|
||||
|
||||
export default Pepsi;
|
||||
|
||||
```
|
||||
### Meal.ts
|
||||
|
||||
This class will represent a full meal behavior, here we have the methods to add items to the Meal, get the cost and show the items belonging to the Meal.
|
||||
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
|
||||
class Meal {
|
||||
private items: IItem[] = [];
|
||||
|
||||
public addItem(item: IItem): void {
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
public getCost(): number {
|
||||
let cost: number = 0;
|
||||
for(let item of this.items) {
|
||||
cost+= item.price();
|
||||
}
|
||||
|
||||
return cost;
|
||||
}
|
||||
|
||||
public showItems(): string {
|
||||
let returnStr: string = "";
|
||||
for(let item of this.items) {
|
||||
returnStr +="Item:" + item.name();
|
||||
returnStr +=", Packing:" + item.packing().pack();
|
||||
returnStr +=", Price: " + item.price();
|
||||
}
|
||||
|
||||
returnStr += ", Total: " + this.getCost();
|
||||
return returnStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default Meal;
|
||||
```
|
||||
|
||||
### MealBuilder.ts
|
||||
|
||||
Mealbuilder its just the class that uses the classes explained before to construct any type of meal, for sake of simplicity, we created only 2 meals here.
|
||||
|
||||
```typescript
|
||||
import Meal from "./Meal";
|
||||
import VegBurger from "./VegBurger";
|
||||
import Coke from "./Coke";
|
||||
import ChickenBurger from "./ChickenBurger";
|
||||
|
||||
class MealBuilder {
|
||||
public prepareVegMeal(): Meal {
|
||||
let meal: Meal= new Meal();
|
||||
meal.addItem(new VegBurger());
|
||||
meal.addItem(new Coke());
|
||||
return meal;
|
||||
}
|
||||
|
||||
public prepareNonVegMeal(): Meal {
|
||||
let meal: Meal= new Meal();
|
||||
meal.addItem(new ChickenBurger());
|
||||
meal.addItem(new Coke());
|
||||
return meal;
|
||||
}
|
||||
}
|
||||
|
||||
export default MealBuilder;
|
||||
```
|
||||
|
||||
### IBuilderProps.ts
|
||||
We created a selectedMeal string property to take the decision on which meal to build.
|
||||
|
||||
```typescript
|
||||
export interface IBuilderProps {
|
||||
selectedMeal: string;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Builder.tsx
|
||||
|
||||
This is our component class, here we have a constructor and in the constructor we call the setMeal method, with the selected meal option as a parameter, and then we can define which meal to prepare. Once the meal is prepared, in the render method we can use the showItems method
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import styles from './Builder.module.scss';
|
||||
import { IBuilderProps } from './IBuilderProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import MealBuilder from "./MealBuilder";
|
||||
import Meal from "./Meal";
|
||||
import { IPropertyPaneConfiguration } from "@microsoft/sp-webpart-base";
|
||||
import {
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
import {Version} from "@microsoft/sp-core-library";
|
||||
import { IBuilderState } from './IBuilderState';
|
||||
|
||||
export default class Builder extends React.Component<IBuilderProps, IBuilderState> {
|
||||
|
||||
private mealBuilder: MealBuilder ;
|
||||
private items: string;
|
||||
private meal: Meal;
|
||||
|
||||
constructor(props: IBuilderProps, state: IBuilderState) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
//this.setMeal = this.setMeal.bind(this);
|
||||
this.mealBuilder = new MealBuilder();
|
||||
this.setMeal(props.selectedMeal);
|
||||
}
|
||||
|
||||
public setInitialState(): void {
|
||||
this.state = {
|
||||
items: ""
|
||||
};
|
||||
}
|
||||
|
||||
public componentWillReceiveProps(nextProps: IBuilderProps): void {
|
||||
if(nextProps.selectedMeal !== this.props.selectedMeal) {
|
||||
this.setMeal(nextProps.selectedMeal);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IBuilderProps> {
|
||||
return (
|
||||
<div className={styles.builder}>
|
||||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">Welcome to Mac Luis!</span>
|
||||
<p className="ms-font-l ms-fontColor-white">You have selected the following.</p>
|
||||
<div> {this.state.items}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
private setMeal(selectedMeal: string): void {
|
||||
if(selectedMeal===undefined){
|
||||
this.meal = this.mealBuilder.prepareVegMeal();
|
||||
}
|
||||
|
||||
if(selectedMeal === "0") {
|
||||
this.meal = this.mealBuilder.prepareVegMeal();
|
||||
}
|
||||
|
||||
if(selectedMeal === "1") {
|
||||
this.meal = this.mealBuilder.prepareNonVegMeal();
|
||||
}
|
||||
|
||||
this.state = {
|
||||
items: this.meal.showItems(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
And finally
|
||||
### BuilderWebPart.ts
|
||||
|
||||
Here what we do is just to use our component and sending the parameter of the selected meal, which is just a normal dropdown with 2 hardcoded values.
|
||||
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
|
||||
|
||||
import * as strings from 'BuilderWebPartStrings';
|
||||
import Builder from './components/Builder';
|
||||
import { IBuilderProps } from './components/IBuilderProps';
|
||||
|
||||
export interface IBuilderWebPartProps {
|
||||
selectedMeal: string;
|
||||
}
|
||||
|
||||
export default class BuilderWebPart extends BaseClientSideWebPart<IBuilderWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IBuilderProps > = React.createElement(
|
||||
Builder,
|
||||
{
|
||||
|
||||
selectedMeal: this.properties.selectedMeal
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
|
||||
this.properties[this.properties.selectedMeal] = newValue;
|
||||
this.render();
|
||||
super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: "Header"
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: "Group",
|
||||
groupFields: [
|
||||
PropertyPaneDropdown("selectedMeal", {
|
||||
label: "Select meal",
|
||||
options: [
|
||||
{ key: "0", text: "Veg" },
|
||||
{ key: "1", text: "Nonveg" }
|
||||
],
|
||||
selectedKey: 0
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Data source implementation is left to the reader
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/builder" />
|
||||
# Builder Design Pattern
|
||||
|
||||
## Summary
|
||||
Builder pattern builds a complex object using simple objects and using a step by step approach. This type of design pattern comes under creational pattern as this pattern provides one of the best ways to create an object.
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\builder | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 2018|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Builder pattern
|
||||
|
||||
A Builder class builds the final object step by step. This builder is independent of other objects.
|
||||
|
||||
For this pattern, we have taken an existing example https://www.tutorialspoint.com/design_pattern/builder_pattern.htm and translated it to Typescript. Data Access implementation details are left to the reader.
|
||||
|
||||
The idea on this example is to show how you can build a Complex object from single objects, a Meal from (burger, fries, soda). Suppose you have a SharePoint List for Burgers, another list for Sodas, another one for desserts, and you want to build different Meals (Menus), so this would be a perfect sample.
|
||||
|
||||
### UML
|
||||
This is more or less the diagram of the classes were are coding below.
|
||||
|
||||
|
||||
|
||||
|
||||
### Project structure
|
||||
We have created a component with all the needed class, lets discuss them one by one.
|
||||
|
||||
|
||||
|
||||
|
||||
### IItem.ts
|
||||
|
||||
This interface is the one that every item needs to implement to come with a common structure for all products.
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
interface IItem {
|
||||
name(): string;
|
||||
packing(): IPacking;
|
||||
price(): number;
|
||||
}
|
||||
|
||||
export default IItem;
|
||||
```
|
||||
|
||||
### IPacking.ts
|
||||
|
||||
This interface is the one that all packaging will use, eg: Bottle, Wrapper, etc, its the way to define common behavior and properties for each product packing.
|
||||
|
||||
```typescript
|
||||
interface IPacking {
|
||||
pack(): string;
|
||||
}
|
||||
|
||||
export default IPacking;
|
||||
```
|
||||
|
||||
### Bottle.ts
|
||||
This is one type of packing, it implements the IPacking interface.
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
class Bottle implements IPacking {
|
||||
public pack(): string {
|
||||
return "Bottle";
|
||||
}
|
||||
}
|
||||
|
||||
export default Bottle;
|
||||
```
|
||||
|
||||
|
||||
### Wrapper.ts
|
||||
|
||||
```typescript
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
class Wrapper implements IPacking {
|
||||
public pack(): string {
|
||||
return "Wrapper";
|
||||
}
|
||||
}
|
||||
|
||||
export default Wrapper;
|
||||
```
|
||||
|
||||
### Burger.ts
|
||||
This is an abstract class from which all our specific burgers need to implement, its there to have a common structure for name, packing and pricing.
|
||||
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
import Wrapper from "./Wrapper";
|
||||
import IPacking from "./IPacking";
|
||||
|
||||
abstract class Burger implements IItem {
|
||||
public name(): string {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
|
||||
public packing(): IPacking {
|
||||
return new Wrapper();
|
||||
}
|
||||
|
||||
public abstract price(): number ;
|
||||
|
||||
}
|
||||
|
||||
export default Burger;
|
||||
```
|
||||
|
||||
### ChickenBurger.ts
|
||||
```typescript
|
||||
import Burger from "./Burger";
|
||||
|
||||
class ChickenBurger extends Burger {
|
||||
public price(): number {
|
||||
return 15;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Chicken Burger";
|
||||
}
|
||||
}
|
||||
|
||||
export default ChickenBurger;
|
||||
|
||||
```
|
||||
|
||||
### VegBurger.ts
|
||||
```typescript
|
||||
import Burger from "./Burger";
|
||||
|
||||
class VegBurger extends Burger {
|
||||
public price(): number {
|
||||
return 11;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Veg Burger";
|
||||
}
|
||||
}
|
||||
|
||||
export default VegBurger;
|
||||
|
||||
```
|
||||
### Colddrink.ts
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
import IPacking from "./IPacking";
|
||||
import Bottle from "./Bottle";
|
||||
|
||||
abstract class ColdDrink implements IItem {
|
||||
public name(): string {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
public packing(): IPacking {
|
||||
return new Bottle();
|
||||
}
|
||||
|
||||
public abstract price(): number ;
|
||||
|
||||
}
|
||||
|
||||
export default ColdDrink;
|
||||
|
||||
```
|
||||
### Coke.ts
|
||||
```typescript
|
||||
import ColdDrink from "./ColdDrink";
|
||||
|
||||
class Coke extends ColdDrink {
|
||||
public price(): number {
|
||||
return 2.5;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Coca Cola";
|
||||
}
|
||||
}
|
||||
|
||||
export default Coke;
|
||||
|
||||
|
||||
```
|
||||
### Pepsi.ts
|
||||
```typescript
|
||||
import ColdDrink from "./ColdDrink";
|
||||
|
||||
class Pepsi extends ColdDrink {
|
||||
public price(): number {
|
||||
return 1.5;
|
||||
}
|
||||
|
||||
public name(): string {
|
||||
return "Pepsi Cola";
|
||||
}
|
||||
}
|
||||
|
||||
export default Pepsi;
|
||||
|
||||
```
|
||||
### Meal.ts
|
||||
|
||||
This class will represent a full meal behavior, here we have the methods to add items to the Meal, get the cost and show the items belonging to the Meal.
|
||||
|
||||
```typescript
|
||||
import IItem from "./IItem";
|
||||
|
||||
class Meal {
|
||||
private items: IItem[] = [];
|
||||
|
||||
public addItem(item: IItem): void {
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
public getCost(): number {
|
||||
let cost: number = 0;
|
||||
for(let item of this.items) {
|
||||
cost+= item.price();
|
||||
}
|
||||
|
||||
return cost;
|
||||
}
|
||||
|
||||
public showItems(): string {
|
||||
let returnStr: string = "";
|
||||
for(let item of this.items) {
|
||||
returnStr +="Item:" + item.name();
|
||||
returnStr +=", Packing:" + item.packing().pack();
|
||||
returnStr +=", Price: " + item.price();
|
||||
}
|
||||
|
||||
returnStr += ", Total: " + this.getCost();
|
||||
return returnStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default Meal;
|
||||
```
|
||||
|
||||
### MealBuilder.ts
|
||||
|
||||
Mealbuilder its just the class that uses the classes explained before to construct any type of meal, for sake of simplicity, we created only 2 meals here.
|
||||
|
||||
```typescript
|
||||
import Meal from "./Meal";
|
||||
import VegBurger from "./VegBurger";
|
||||
import Coke from "./Coke";
|
||||
import ChickenBurger from "./ChickenBurger";
|
||||
|
||||
class MealBuilder {
|
||||
public prepareVegMeal(): Meal {
|
||||
let meal: Meal= new Meal();
|
||||
meal.addItem(new VegBurger());
|
||||
meal.addItem(new Coke());
|
||||
return meal;
|
||||
}
|
||||
|
||||
public prepareNonVegMeal(): Meal {
|
||||
let meal: Meal= new Meal();
|
||||
meal.addItem(new ChickenBurger());
|
||||
meal.addItem(new Coke());
|
||||
return meal;
|
||||
}
|
||||
}
|
||||
|
||||
export default MealBuilder;
|
||||
```
|
||||
|
||||
### IBuilderProps.ts
|
||||
We created a selectedMeal string property to take the decision on which meal to build.
|
||||
|
||||
```typescript
|
||||
export interface IBuilderProps {
|
||||
selectedMeal: string;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Builder.tsx
|
||||
|
||||
This is our component class, here we have a constructor and in the constructor we call the setMeal method, with the selected meal option as a parameter, and then we can define which meal to prepare. Once the meal is prepared, in the render method we can use the showItems method
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import styles from './Builder.module.scss';
|
||||
import { IBuilderProps } from './IBuilderProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import MealBuilder from "./MealBuilder";
|
||||
import Meal from "./Meal";
|
||||
import { IPropertyPaneConfiguration } from "@microsoft/sp-webpart-base";
|
||||
import {
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
import {Version} from "@microsoft/sp-core-library";
|
||||
import { IBuilderState } from './IBuilderState';
|
||||
|
||||
export default class Builder extends React.Component<IBuilderProps, IBuilderState> {
|
||||
|
||||
private mealBuilder: MealBuilder ;
|
||||
private items: string;
|
||||
private meal: Meal;
|
||||
|
||||
constructor(props: IBuilderProps, state: IBuilderState) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
//this.setMeal = this.setMeal.bind(this);
|
||||
this.mealBuilder = new MealBuilder();
|
||||
this.setMeal(props.selectedMeal);
|
||||
}
|
||||
|
||||
public setInitialState(): void {
|
||||
this.state = {
|
||||
items: ""
|
||||
};
|
||||
}
|
||||
|
||||
public componentWillReceiveProps(nextProps: IBuilderProps): void {
|
||||
if(nextProps.selectedMeal !== this.props.selectedMeal) {
|
||||
this.setMeal(nextProps.selectedMeal);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IBuilderProps> {
|
||||
return (
|
||||
<div className={styles.builder}>
|
||||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">Welcome to Mac Luis!</span>
|
||||
<p className="ms-font-l ms-fontColor-white">You have selected the following.</p>
|
||||
<div> {this.state.items}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
private setMeal(selectedMeal: string): void {
|
||||
if(selectedMeal===undefined){
|
||||
this.meal = this.mealBuilder.prepareVegMeal();
|
||||
}
|
||||
|
||||
if(selectedMeal === "0") {
|
||||
this.meal = this.mealBuilder.prepareVegMeal();
|
||||
}
|
||||
|
||||
if(selectedMeal === "1") {
|
||||
this.meal = this.mealBuilder.prepareNonVegMeal();
|
||||
}
|
||||
|
||||
this.state = {
|
||||
items: this.meal.showItems(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
And finally
|
||||
### BuilderWebPart.ts
|
||||
|
||||
Here what we do is just to use our component and sending the parameter of the selected meal, which is just a normal dropdown with 2 hardcoded values.
|
||||
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneDropdown
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
|
||||
|
||||
import * as strings from 'BuilderWebPartStrings';
|
||||
import Builder from './components/Builder';
|
||||
import { IBuilderProps } from './components/IBuilderProps';
|
||||
|
||||
export interface IBuilderWebPartProps {
|
||||
selectedMeal: string;
|
||||
}
|
||||
|
||||
export default class BuilderWebPart extends BaseClientSideWebPart<IBuilderWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IBuilderProps > = React.createElement(
|
||||
Builder,
|
||||
{
|
||||
|
||||
selectedMeal: this.properties.selectedMeal
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
|
||||
this.properties[this.properties.selectedMeal] = newValue;
|
||||
this.render();
|
||||
super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: "Header"
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: "Group",
|
||||
groupFields: [
|
||||
PropertyPaneDropdown("selectedMeal", {
|
||||
label: "Select meal",
|
||||
options: [
|
||||
{ key: "0", text: "Veg" },
|
||||
{ key: "1", text: "Nonveg" }
|
||||
],
|
||||
selectedKey: 0
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Data source implementation is left to the reader
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/builder" />
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +1,4 @@
|
|||
# Design Patterns applied to Sharepoint Framework
|
||||
# Design Patterns applied to SharePoint Framework
|
||||
|
||||
## Summary
|
||||
In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn't a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.
|
||||
|
|
|
|||
|
|
@ -59,3 +59,4 @@ Version|Date|Comments
|
|||
- `gulp package-solution --ship`
|
||||
- `Add to AppCatalog and deploy`
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-dev-radar" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ At the time of developing this sample, the Office 365 UI fabric does not have an
|
|||
|
||||
![Web part preview][figure1]
|
||||
|
||||
The web part is configured to render the mock data when added to local SharePoint workbench.
|
||||
The web part is configured to render the mock data when added to the local SharePoint workbench.
|
||||
![Local SharePoint Workbench Run][figure2]
|
||||
|
||||
When added to SharePoint site, the source list containing hierarchical information can be configured from web part properties.
|
||||
|
|
@ -60,9 +60,9 @@ Version|Date|Comments
|
|||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repo
|
||||
- npm i
|
||||
- gulp serve --nobrowser
|
||||
- Open workbench on your tennant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- Open workbench on your tenant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Display Hierarchy"
|
||||
|
||||
## Features
|
||||
|
|
|
|||
|
|
@ -172,3 +172,5 @@ This package produces the following:
|
|||
* gulp package-solution - Packages the solution
|
||||
* gulp dev -- Builds a clean instance of the solution for development purposes
|
||||
* gulp dist -- Builds a clean instance of the solution for distribution purposes
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-enhanced-list-formatting" />
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ Version|Date|Comments
|
|||
* `npm install`
|
||||
* `gulp bundle --ship`
|
||||
* `gulp package-solution --ship`
|
||||
* from the _sharepoint/solution_ folder, deploy the .sppkg file to the App catalog in your tenant
|
||||
* from the `sharepoint/solution` folder, deploy the `.sppkg` file to the App catalog in your tenant
|
||||
* in the site where you want to test this solution
|
||||
* add the app named _react-events-dynamicdata-client-side-solution_
|
||||
* edit a page
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
# Deployment of SharePoint assets as part of SPFx package
|
||||
|
||||
## Summary
|
||||
|
|
@ -28,7 +28,7 @@ Demonstrated assets getting deployed to SharePoint site are following
|
|||
|
||||
When you install SPFx so site, web scoped feature is activated and associated element.xml files are being processed. Technically you could also provision SharePoint assets using JavaScript, but it is limited to context of the current user using that component. If the user doesn't have sufficient permissions to create or modify SharePoint items, the JavaScript code will not provision those items.
|
||||
|
||||
More details on the capability is available from following article
|
||||
More details on the capability is available from the following article
|
||||
|
||||
* [Provision SharePoint assets with your solution package](https://dev.office.com/sharepoint/docs/spfx/toolchain/provision-sharepoint-assets)
|
||||
|
||||
|
|
@ -63,19 +63,19 @@ Version|Date|Comments
|
|||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repositoru
|
||||
- Clone this repository
|
||||
- Move to /samples/react-feature-framework folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp bundle`
|
||||
- `gulp package-solution`
|
||||
- Install `react-feature-framework.sppkg` from /sharepoint/solution to app catalog in your tenant
|
||||
- Install `react-feature-framework.sppkg` from `/sharepoint/solution` to app catalog in your tenant
|
||||
- Install solution to SharePoint site
|
||||
|
||||
Following items are being provisioned
|
||||
|
||||
- SPFxAmount and SPFxCostCenter fields under 'SPFx Columns' group - visible in the Site Column Gallery
|
||||
- Cost Center content type using 'SPFx Content Types' group using custom fields - visible in Site Content Types Gallery
|
||||
- List called 'SPFx List' using custom schema.xml file using custom content tyep - visible in site contents page
|
||||
- List called 'SPFx List' using custom schema.xml file using custom content type - visible in site contents page
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-feature-framework" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-feature-framework" />
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ Notice that we just take the teamsList (our state variable) and use a *map* func
|
|||
|
||||
## Team.tsx Component
|
||||
|
||||
The Teams.tsx component is only responsible for rendering an individual team, and the structure of the component follows a similar pattern to that of TeamTracker.tsx. Notice first that we use a different approach to using the props by using the object destructuring operator to unpack the individual values from the outset, which can sometimes make the subsequent code a little clearer:
|
||||
The `Teams.tsx` component is only responsible for rendering an individual team, and the structure of the component follows a similar pattern to that of TeamTracker.tsx. Notice first that we use a different approach to using the props by using the object destructuring operator to unpack the individual values from the outset, which can sometimes make the subsequent code a little clearer:
|
||||
|
||||
```
|
||||
export default function Team({ channelID, displayName, showChannels }) {
|
||||
|
|
@ -126,12 +126,13 @@ Again we use state to manage a list of channels and initialise it to an empty ar
|
|||
}, [showChannels]);
|
||||
```
|
||||
|
||||
The rest of Team.tsx simply returns the rendering of the component with the name of the Team and a list of channels. If the *channelsList* is empty it will just render an empty <ul>.
|
||||
The rest of `Team.tsx` simply returns the rendering of the component with the name of the Team and a list of channels. If the *channelsList* is empty it will just render an empty <ul>.
|
||||
|
||||
If this were a real application, rather than a demonstration, you would need to decide whether it was efficient to make multiple graph calls, or whether to batch the calls in some way, which would probably make the code a little more complicated. If you end up with a large hierarchy of nested components you might also use the *useContext* hook to manage data that you retrieve at a higher level, to be referenced in lower level components without having to pass everything down through props.
|
||||
|
||||
## Building and testing
|
||||
|
||||
In the react-functional-component directory, run **npm install** to resolve all the dependencies. Once this has completed you can run **gulp serve --nobrowser** to test the web part in the workbench of your tenant (*https://mytenant.sharepoint.com/_layouts/15/workbench.aspx*). You could run it in the local workbench, but the PnPJS promise will never return and so you will just see the loading spinner.
|
||||
In the `react-functional-component` directory, run `npm install` to resolve all the dependencies. Once this has completed you can run `gulp serve --nobrowser` to test the web part in the workbench of your tenant (*https://mytenant.sharepoint.com/_layouts/15/workbench.aspx*). You could run it in the local workbench, but the PnPJS promise will never return and so you will just see the loading spinner.
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-functional-component-with-data-fetch" />
|
||||
|
|
|
|||
|
|
@ -59,23 +59,24 @@ It also introduces React Functional Components which offers a simpler way of bui
|
|||
|
||||
## HelloWorldWebPart.ts Simplification
|
||||
|
||||
A number of simplifications have been made to the HelloWorldWebPart.ts file to make it easier to follow.
|
||||
A number of simplifications have been made to the `HelloWorldWebPart.ts` file to make it easier to follow.
|
||||
|
||||
The use of an external string collection has been removed. This is only needed in multilingual situations and can be added as and when needed. For a first web part there is really no need to have the student wondering where these strings are defined. For this sample they are simply hard coded into the file to make it clear how the property pane configuration works.
|
||||
|
||||
The external interface to define the properties is moved from a separate file and inline into HelloWorldWebPart.ts. This interface is used by the web part and the component on the assumption that all the properties will be passed to the component as props. Adding more properties is simply a matter of adding them to the IHelloWorldProps interface, adding a section to the getPropertyPaneConfiguration return value and adding a default to the manifest file if needed. The property will then be available to the component through its **props** collection.
|
||||
The external interface to define the properties is moved from a separate file and inline into `HelloWorldWebPart.ts`. This interface is used by the web part and the component on the assumption that all the properties will be passed to the component as props. Adding more properties is simply a matter of adding them to the IHelloWorldProps interface, adding a section to the getPropertyPaneConfiguration return value and adding a default to the manifest file if needed. The property will then be available to the component through its **props** collection.
|
||||
|
||||
## Functional Component
|
||||
|
||||
The HelloWorld.tsx React Component has been refactored as a pure functional component. This simplifies the code structure and will also gain you additional kudos when talking to computer scientists and functional code enthusiasts. The structure is a simple JavaScript function with the name of the component, a single argument containing the React props, and a simple return of the component rendering. Because it is just a function, there is no need to worry about **this** or **that**, constructors etc.
|
||||
The `HelloWorld.tsx` React Component has been refactored as a pure functional component. This simplifies the code structure and will also gain you additional kudos when talking to computer scientists and functional code enthusiasts. The structure is a simple JavaScript function with the name of the component, a single argument containing the React props, and a simple return of the component rendering. Because it is just a function, there is no need to worry about **this** or **that**, constructors etc.
|
||||
|
||||
In addition the React elements returned have been simplified. In particular the "Learn more" button, which was constructed from HTML primitives in the Yeoman-generated sample, has been replaced by an Office-UI-Fabric PrimaryButton component. This also means that it has been possible to greatly simplify the SASS file HelloWorld.module.scss.
|
||||
In addition the React elements returned have been simplified. In particular the "Learn more" button, which was constructed from HTML primitives in the Yeoman-generated sample, has been replaced by an Office-UI-Fabric PrimaryButton component. This also means that it has been possible to greatly simplify the SASS file `HelloWorld.module.scss`.
|
||||
|
||||
## Adding State
|
||||
|
||||
You may be wondering how maintaining state, side effects or other complexities can be accomodated with functional components like the one used. This can be achieved using a fairly new feature called [React Hooks](https://reactjs.org/docs/hooks-intro.html) and will be demonstrated using [another sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-functional-stateful-component).
|
||||
You may be wondering how maintaining state, side effects or other complexities can be accommodated with functional components like the one used. This can be achieved by using a fairly new feature called [React Hooks](https://reactjs.org/docs/hooks-intro.html) and will be demonstrated using [another sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-functional-stateful-component).
|
||||
|
||||
## Building and testing
|
||||
|
||||
In the react-functional-component directory run **npm install** to resolve all the dependencies. Once this has completed you can run **gulp serve** to test the web part in the local workbench.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-functional-component" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# Consuming SPFX Service Scopes using React Hooks
|
||||
# Consuming SPFx Service Scopes using React Hooks
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ Version|Date|Comments
|
|||
* At the command line run:
|
||||
* `gulp serve`
|
||||
* Navigate to remote workbench `https://tenant.sharepoint.com/_layouts/15/workbench.aspx`
|
||||
* Add `HelloWorld` web part to workbench
|
||||
* Add `HelloWorld` web part to the workbench
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -1,280 +0,0 @@
|
|||
# Upgrade project C:\github\sp-dev-fx-webparts\samples\react-github-badge to v1.8.2
|
||||
|
||||
Date: 2019-6-6
|
||||
|
||||
## Findings
|
||||
|
||||
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.8.2. [Summary](#Summary) of the modifications is included at the end of the report.
|
||||
|
||||
### FN001001 @microsoft/sp-core-library | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-core-library@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001002 @microsoft/sp-lodash-subset | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-lodash-subset@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-office-ui-fabric-core@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001004 @microsoft/sp-webpart-base | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-webpart-base@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001005 @types/react | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @types/react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @types/react@16.7.22 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001006 @types/react-dom | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @types/react-dom
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @types/react-dom@16.8.0 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001021 @microsoft/sp-property-pane | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-property-pane@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001022 office-ui-fabric-react | Required
|
||||
|
||||
Install SharePoint Framework dependency package office-ui-fabric-react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i office-ui-fabric-react@6.143.0 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002001 @microsoft/sp-build-web | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-build-web@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002002 @microsoft/sp-module-interfaces | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-module-interfaces@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002003 @microsoft/sp-webpart-workbench | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-webpart-workbench@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002009 @microsoft/sp-tslint-rules | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-tslint-rules@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002010 @microsoft/rush-stack-compiler-2.7 | Required
|
||||
|
||||
Remove SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.7
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm un @microsoft/rush-stack-compiler-2.7 -D
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002011 @microsoft/rush-stack-compiler-2.9 | Required
|
||||
|
||||
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.9
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/rush-stack-compiler-2.9@0.7.7 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN010001 .yo-rc.json version | Recommended
|
||||
|
||||
Update version in .yo-rc.json
|
||||
|
||||
In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./.yo-rc.json](./.yo-rc.json)
|
||||
|
||||
### FN012017 tsconfig.json extends property | Required
|
||||
|
||||
Update tsconfig.json extends property
|
||||
|
||||
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
File: [./tsconfig.json](./tsconfig.json)
|
||||
|
||||
### FN020001 @types/react | Required
|
||||
|
||||
Add resolution for package @types/react
|
||||
|
||||
In file [./package.json](./package.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN017001 Run npm dedupe | Optional
|
||||
|
||||
If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
## Summary
|
||||
|
||||
### Execute script
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-core-library@1.8.2 @microsoft/sp-lodash-subset@1.8.2 @microsoft/sp-office-ui-fabric-core@1.8.2 @microsoft/sp-webpart-base@1.8.2 @types/react@16.7.22 @types/react-dom@16.8.0 @microsoft/sp-property-pane@1.8.2 office-ui-fabric-react@6.143.0 -SE
|
||||
npm i @microsoft/sp-build-web@1.8.2 @microsoft/sp-module-interfaces@1.8.2 @microsoft/sp-webpart-workbench@1.8.2 @microsoft/sp-tslint-rules@1.8.2 @microsoft/rush-stack-compiler-2.9@0.7.7 -DE
|
||||
npm un @microsoft/rush-stack-compiler-2.7 -D
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
### Modify files
|
||||
|
||||
#### [./.yo-rc.json](./.yo-rc.json)
|
||||
|
||||
Update version in .yo-rc.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### [./tsconfig.json](./tsconfig.json)
|
||||
|
||||
Update tsconfig.json extends property:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
#### [./package.json](./package.json)
|
||||
|
||||
Add resolution for package @types/react:
|
||||
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
### Summary
|
||||
|
||||
This sample demonstrates integration of Google Fit information with SharePoint Framework. The Google Fitness REST APIs allows developers to extend it further and create their own dashboards. Google Fitness REST APIs are useful if you have fitness app and you want to integrate your data with google fit or if you just want to collect Fitness data and display some information to the users. This web part helps to display the key fitness information (activity time spent, distance travelled, calories burned, step count) from the Google fit data source.
|
||||
This sample demonstrates the integration of Google Fit information with SharePoint Framework. The Google Fitness REST APIs allows developers to extend it further and create their own dashboards. Google Fitness REST APIs are useful if you have fitness app and you want to integrate your data with google fit or if you just want to collect Fitness data and display some information to the users. This web part helps to display the key fitness information (activity time spent, distance travelled, calories burned, step count) from the Google fit data source.
|
||||
|
||||
![Web part preview][figure1]
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ Version|Date|Comments
|
|||
- Clone this repo
|
||||
- npm i
|
||||
- gulp serve --nobrowser
|
||||
- Open workbench on your tennant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
|
||||
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Google Fit Activity Viewer"
|
||||
|
||||
## Features
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ This sample contains a class that evaluates the url input of a text field agains
|
|||
* Web Site
|
||||
* Lists and Document libraries
|
||||
|
||||
The web part shows all those three example and the reuslt returned by the Microsoft Graph.
|
||||
The web part shows all those three examples and the results returned by the Microsoft Graph.
|
||||
|
||||
![Evaluation Client searching for suitable site collection][figure1]
|
||||
|
||||
### Usage
|
||||
|
||||
To evaluate the web part the input for site collection, web site or list and document library simply place a URL from your tennant in one of the text fields shown above. After the text field loses `onblur` its focus the evaluation happens automatically in the background and showing the debug information in the debugging information.
|
||||
To evaluate the web part the input for site collection, web site or list and document library simply place a URL from your tenant in one of the text fields shown above. After the text field loses `onblur` its focus the evaluation happens automatically in the background and showing the debug information in the debugging information.
|
||||
|
||||
![Evaluation of web site with current debug informations][figure2]
|
||||
![Evaluation of web site with current debug information][figure2]
|
||||
|
||||
### Project Setup and important files
|
||||
|
||||
|
|
@ -76,12 +76,12 @@ Version|Date|Comments
|
|||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp serve --nobrowser`
|
||||
- Open workbench on your tennant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx
|
||||
- Open workbench on your tenant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Graph - Eval Url"
|
||||
|
||||
## Features
|
||||
|
||||
This sample web part shows how URLs in SharePoint can be checked and evaluated agains the Microsoft Graph. This scenario and the introduced class can be use to evluate not only user input but can also be used in the configuration panel of web parts. The benefit is that the URL of the target location remains visible and can be use for debugging reasons to.
|
||||
This sample web part shows how URLs in SharePoint can be checked and evaluated against the Microsoft Graph. This scenario and the introduced class can be use to evluate not only user input but can also be used in the configuration panel of web parts. The benefit is that the URL of the target location remains visible and can be use for debugging reasons to.
|
||||
The class returns all the Graph objects identified during the evaluation process. It can also be used in backend code.
|
||||
|
||||
- using React for building SharePoint Framework Client-side Web Parts
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
## react-graph-reports
|
||||
|
||||
## Summary
|
||||
This sample describe a SPFX application which retrieve an office 365 usage reports using Microsoft Graph API. This application also use chartjs library to generate graph.
|
||||
This sample describe a SPFx application which retrieve an office 365 usage reports using Microsoft Graph API. This application also use chartjs library to generate graph.
|
||||
|
||||
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ If you have not previously granted the required Microsoft Graph permissions, you
|
|||
|
||||
- Run `gulp bundle --ship`
|
||||
- Run `gulp package-solution --ship`
|
||||
- Install the .sppkg file (under .\sharepoint\solution) to the SP app catalog
|
||||
- Install the `.sppkg` file (under `.\sharepoint\solution`) to the SP app catalog
|
||||
- Approve the API permissions in the new SP admin center
|
||||
|
||||
## Features
|
||||
|
|
@ -56,6 +56,6 @@ Here are main features for this application
|
|||
- Material UI Components (Tab)
|
||||
- Microsoft Graph API to retrieve Office 365 Usage reports
|
||||
- ChartJS integrations
|
||||
- Dependency Injection in SPFX using Service Scope
|
||||
- Dependency Injection in SPFx using Service Scope
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-reports" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Filterable Image Gallery Web Part
|
||||
|
||||
## Summary
|
||||
This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.
|
||||
This sample describes an SPFx application which implements an image gallery with taxonomy base filtering and typed search. This application also implements pagination.
|
||||
|
||||
|
||||
|
||||
|
|
@ -45,11 +45,11 @@ Version|Date|Comments
|
|||
- Also fill in Title field for each image, this is require for typed search functionality
|
||||
|
||||
## Features
|
||||
Here are main features for this application
|
||||
Here are the main features for this application
|
||||
|
||||
- Taxonomy based filtering
|
||||
- Taxonomy-based filtering
|
||||
- Typed Search
|
||||
- Right side popup panel
|
||||
- Server side pagination using REST API
|
||||
- Right-side popup panel
|
||||
- Server-side pagination using REST API
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-image-gallery" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
# Image Magnifier
|
||||
|
||||
## Summary
|
||||
|
|
@ -60,7 +60,7 @@ Version|Date|Comments
|
|||
## Features
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
- Image Magnifier - How obtain best resolution from an image.
|
||||
- Image Magnifier - How to obtain the best resolution from an image.
|
||||
- How to leverage the capabilities of the property pane.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-image-magnifier" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-image-magnifier" />
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ Following this pattern greatly improves the modularity, maintainability, and tes
|
|||
|
||||
The example includes 100% test coverage, using Jest and Enzyme, of .ts and .tsx files, excluding *WebPart.ts files. A dependency resolver class specific to a web part class is used to map web part properties to component properties and create any dependent services/providers.
|
||||
|
||||
This pattern is implemented to seperate testable logic from the untestable *WebPart.ts file and hence ensure that all relevant web part logic is tested. To this end, a Service class is paired with a ServiceExecutor class which should extract the actual service requests from other service logic ensuring that the Service class remains fully testable. *Executor classes are excluded from test coverage as they cannot be unit tested by design - as they are points integration.
|
||||
This pattern is implemented to separate testable logic from the untestable *WebPart.ts file and hence ensure that all relevant web part logic is tested. To this end, a Service class is paired with a ServiceExecutor class which should extract the actual service requests from other service logic ensuring that the Service class remains fully testable. *Executor classes are excluded from test coverage as they cannot be unit tested by design - as they are points integration.
|
||||
|
||||
Included in the coverage is a cache and logger class, along with a service class that fetches data asychronously using @pnp/sp 2.x
|
||||
Included in the coverage is a cache and logger class, along with a service class that fetches data asynchronously using @pnp/sp 2.x
|
||||
|
||||
The example also includes a pipeline definition .yaml file for Azure DevOps CI build pipeline (/pipelines/) which includes the build, running tests, and posting the test coverage results.
|
||||
|
||||
|
|
@ -70,4 +70,4 @@ https://github.com/estruyf/spfx-testing-jest
|
|||
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-ioc-tests" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-ioc-tests" />
|
||||
|
|
|
|||
|
|
@ -44,13 +44,14 @@ Version|Date|Comments
|
|||
|
||||
## Features
|
||||
This listview command is used to show the past versions of the selected list item in a grid.
|
||||
Add-PnPCustomAction `
|
||||
-Name 'Item History(GRID)' `
|
||||
-Title 'Item History(GRID)' `
|
||||
-Location 'ClientSideExtension.ListViewCommandSet.CommandBar' `
|
||||
-ClientSideComponentId "f6b9bab2-00a1-4ff1-8bc2-04fea3d64fed" `
|
||||
-RegistrationType List `
|
||||
-RegistrationId "101" `
|
||||
```bash
|
||||
Add-PnPCustomAction
|
||||
-Name 'Item History(GRID)'
|
||||
-Title 'Item History(GRID)'
|
||||
-Location 'ClientSideExtension.ListViewCommandSet.CommandBar'
|
||||
-ClientSideComponentId "f6b9bab2-00a1-4ff1-8bc2-04fea3d64fed"
|
||||
-RegistrationType List
|
||||
-RegistrationId "101"
|
||||
-ClientSideComponentProperties "{}"
|
||||
|
||||
```
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-item-history" />
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ Version|Date|Comments
|
|||
- `npm i`
|
||||
- `npm test` **(NOT gulp test)**
|
||||
|
||||
Note: You migh want to switch to a test fake offline provider to use the full functionality of the web part when on local workbench. You can do so by replacing the real pnpjs provider in IceCreamShopWebPart.ts with its fake one at line 37. Just replace IceCreamPnPJsProvider() with IceCreamFakeProvider().
|
||||
Note: You might want to switch to a test fake offline provider to use the full functionality of the web part when on local workbench. You can do so by replacing the real pnpjs provider in IceCreamShopWebPart.ts with its fake one at line 37. Just replace IceCreamPnPJsProvider() with IceCreamFakeProvider().
|
||||
```
|
||||
iceCreamProvider: new IceCreamPnPJsProvider(sp), //new IceCreamFakeProvider() // replace with Fake provider when offline workbench.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
# React List Form WebPart
|
||||
|
||||
## Summary
|
||||
|
|
@ -65,6 +65,6 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
- Using SharePoint REST services to retrieve and update schema and data for lists and fields.
|
||||
- Using Office UI Fabric React components and styles for building user experience consistent with SharePoint and Office.
|
||||
- Integrating drag and drop to provide better user experience for configuring web parts visually.
|
||||
- Using custom drop down property editors in the property pane.
|
||||
- Using custom drop-down property editors in the property pane.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-list-form" />
|
||||
|
|
|
|||
|
|
@ -204,3 +204,5 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
- Using Office UI Fabric controls for building SharePoint Framework client-side web parts
|
||||
- Passing web part properties to React components
|
||||
- Call MS Flow (Power Automate) flow from SharePoint Framework web part
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-manage-o365-groups" />
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This web part acts as a centralized place where admin can manage SPFx solutions
|
|||
|
||||
|
||||
**Note:**
|
||||
This webpart is mainly build for tenant and sharepoint admins, since most of the operation requires admininstrator privileges.
|
||||
This webpart is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -39,4 +39,5 @@ React-Manage-SPFx-Solutions-ALM|Ramakrishnan Raman
|
|||
|
||||
**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.**
|
||||
|
||||
---
|
||||
---
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-manage-spfx-solutions-alm" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
# Modern Charts
|
||||
|
||||
## Summary
|
||||
|
|
@ -77,14 +77,14 @@ Version|Date|Comments
|
|||
|
||||
## Prerequisites
|
||||
|
||||
- SharePoint Online tenant with Office Graph content enabled
|
||||
- SharePoint Online tenant with Office Graph content-enabled
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp serve`
|
||||
- if deploying to Office 365, upadte the CDN path in write-manifests.json
|
||||
- `npm i`
|
||||
- `gulp serve`
|
||||
- if deploying to Office 365, update the CDN path in write-manifests.json
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
## react-msgraph-extension
|
||||
|
||||
## Summary
|
||||
This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses **User** Resource to create Open Extension.
|
||||
This sample shows how to managed Microsoft Graph Open Extension in SPFx. This application uses **User** Resource to create Open Extension.
|
||||
|
||||
## ScreenShots
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ If you have not previously granted the required Microsoft Graph permissions, you
|
|||
|
||||
- Run `gulp bundle --ship`
|
||||
- Run `gulp package-solution --ship`
|
||||
- Install the .sppkg file (under .\sharepoint\solution) to the SP app catalog
|
||||
- Install the `.sppkg` file (under `.\sharepoint\solution`) to the SP app catalog
|
||||
- Approve the API permissions in the new SP admin center
|
||||
|
||||
## Features
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# SPFX React Grid
|
||||
# SPFx React Grid
|
||||
|
||||
## Summary
|
||||
React-multilist-grid is an SPFX webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the webpart which fields to show in which columns of the grid.
|
||||
React-multilist-grid is an SPFx webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the webpart which fields to show in which columns of the grid.
|
||||
|
||||
The configuration panel of the webpart is show below. It has two buttons—one to configure the columns that will be displayed on the grid, and another to configure the lists that contain the data to be edited.
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ Version|Date|Comments
|
|||
> Include any additional steps as needed.
|
||||
|
||||
## Features
|
||||
An SPFX Webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from multiple Webs and Multiple Sites in a single grid.
|
||||
An SPFx Webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from multiple Webs and Multiple Sites in a single grid.
|
||||
|
||||
Usage:
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ number images to load | number| yes | number between 1 and 200
|
|||
|
||||
|
||||
## Solution
|
||||
The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react components, react-slick Compoment
|
||||
The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react components, react-slick Component
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ gulp serve --nobrowser
|
|||
|
||||
Navigate to the hosted version of SharePoint workbench, eg. https://contoso.sharepoint.com/_layouts/15/workbench.aspx
|
||||
|
||||
### Grant the service principal permission to the MicroSoft Graph API
|
||||
### Grant the service principal permission to the Microsoft Graph API
|
||||
|
||||
Once installed, the solution will request the required permissions via the Office 365 admin portal.
|
||||
If you prefer to approve the permissions in advance, for example when testing the solution in the Workbench page without installing it, you can do so using Office 365 CLI:
|
||||
|
|
|
|||
|
|
@ -1,104 +1,104 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# React & Office Graph Web Part samples
|
||||
|
||||
## Summary
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.
|
||||
|
||||
### Trending in this site
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents trending in the current site.
|
||||
|
||||
|
||||
|
||||
### Working with
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing people with whom the current user has recently been working with.
|
||||
|
||||
|
||||
|
||||
### My recent documents
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents recently viewed or modified by the current user.
|
||||
|
||||
|
||||
|
||||
### Trending in the sites I follow
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents trending in the sites followed by the current user.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-officegraph|Waldek Mastykarz (MVP, Rencore, @waldekm), Gautam Sheth(SharePoint Consultant,Rapid Circle,@gautamdsheth)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
2.0 |May 31, 2017| GA release
|
||||
1.3.0|September 20, 2016|Added the Trending in the sites I follow sample
|
||||
1.2.0|September 20, 2016|Added the My recent documents sample
|
||||
1.1.0|September 19, 2016|Added the Working with sample
|
||||
1.0.0|September 9, 2016|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- SharePoint Online tenant with Office Graph content
|
||||
- Site Collection created under the **/sites/** Managed Path
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp serve --nobrowser`
|
||||
- create a copy of the **./temp/workbench.html** file and change its extension to **.aspx**
|
||||
- in the contents of the **workbench.aspx** file change the URL of the **webAbsoluteUrl** property to the URL of your site, eg. `https://contoso.sharepoint.com/sites/my-team`
|
||||
- upload the **workbench.aspx** file to the Document Library in your site
|
||||
- navigate to the workbench page uploaded to your SharePoint site, ie. _https://contoso.sharepoint.com/sites/my-team/documents/workbench.aspx_
|
||||
|
||||
## Features
|
||||
|
||||
Sample Web Parts in this solution illustrate the following concepts on top of the SharePoint Framework:
|
||||
|
||||
- using React for building SharePoint Framework Client-Side Web Parts
|
||||
- using Office UI Fabric React components for building user experience consistent with SharePoint and Office
|
||||
- communicating with SharePoint using its REST API
|
||||
- communicating with the Office Graph via the SharePoint Search REST API
|
||||
- passing Web Part properties to React components
|
||||
- using ES6 Promises with vanilla-JavaScript web requests
|
||||
|
||||
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-365
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
scenarios:
|
||||
- Embed
|
||||
---
|
||||
# React & Office Graph Web Part samples
|
||||
|
||||
## Summary
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.
|
||||
|
||||
### Trending in this site
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents trending in the current site.
|
||||
|
||||
|
||||
|
||||
### Working with
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing people with whom the current user has recently been working with.
|
||||
|
||||
|
||||
|
||||
### My recent documents
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents recently viewed or modified by the current user.
|
||||
|
||||
|
||||
|
||||
### Trending in the sites I follow
|
||||
|
||||
Sample SharePoint Framework Client-Side Web Part built using React showing documents trending in the sites followed by the current user.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-officegraph|Waldek Mastykarz (MVP, Rencore, @waldekm), Gautam Sheth(SharePoint Consultant,Rapid Circle,@gautamdsheth)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
2.0 |May 31, 2017| GA release
|
||||
1.3.0|September 20, 2016|Added the Trending in the sites I follow sample
|
||||
1.2.0|September 20, 2016|Added the My recent documents sample
|
||||
1.1.0|September 19, 2016|Added the Working with sample
|
||||
1.0.0|September 9, 2016|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- SharePoint Online tenant with Office Graph content
|
||||
- Site Collection created under the **/sites/** Managed Path
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp serve --nobrowser`
|
||||
- create a copy of the **./temp/workbench.html** file and change its extension to **.aspx**
|
||||
- in the contents of the **workbench.aspx** file change the URL of the **webAbsoluteUrl** property to the URL of your site, eg. `https://contoso.sharepoint.com/sites/my-team`
|
||||
- upload the **workbench.aspx** file to the Document Library in your site
|
||||
- navigate to the workbench page uploaded to your SharePoint site, i.e. _https://contoso.sharepoint.com/sites/my-team/documents/workbench.aspx_
|
||||
|
||||
## Features
|
||||
|
||||
Sample Web Parts in this solution illustrate the following concepts on top of the SharePoint Framework:
|
||||
|
||||
- using React for building SharePoint Framework Client-Side Web Parts
|
||||
- using Office UI Fabric React components for building user experience consistent with SharePoint and Office
|
||||
- communicating with SharePoint using its REST API
|
||||
- communicating with the Office Graph via the SharePoint Search REST API
|
||||
- passing Web Part properties to React components
|
||||
- using ES6 Promises with vanilla-JavaScript web requests
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2018 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2018 12:00:00 AM
|
||||
---
|
||||
# Offline First React Webpart built using LocalForage, Whatwg-Fetch, ES6-Promise
|
||||
|
||||
## Summary
|
||||
|
|
@ -47,7 +47,7 @@ react-offline-first |[Austin Breslin](https://github.com/AustinBreslinDev)
|
|||
Version |Date | Comments
|
||||
------- |---- | --------
|
||||
0.0.1 |17/Feb/18 | Got the HTTP Requests to work.
|
||||
0.0.2 |17/Feb/18 | Seperated interfaces into their own files.
|
||||
0.0.2 |17/Feb/18 | Separated interfaces into their own files.
|
||||
0.0.3 |18/Feb/18 | Updated JSDocs, and and created readme.
|
||||
|
||||
## Disclaimer
|
||||
|
|
@ -88,6 +88,6 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
HTTP requests.
|
||||
- Async looping, can be found in the Queue System.
|
||||
- Performance techniques for browsers, async looping does not block render,
|
||||
using local storage first reduces the time to draw the inital page load.
|
||||
using local storage first reduces the time to draw the initial page load.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-offline-first" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-offline-first" />
|
||||
|
|
|
|||
|
|
@ -38,15 +38,15 @@ Version|Date|Comments
|
|||
* `npm install`
|
||||
* `gulp bundle --ship`
|
||||
* `gulp package-solution --ship`
|
||||
* from the _sharepoint/solution_ folder, deploy the .sppkg file to the App catalog in your tenant
|
||||
* from the `sharepoint/solution` folder, deploy the `.sppkg` file to the App catalog in your tenant
|
||||
* create Term Store group as shown on the screenshot below:\
|
||||
|
||||
* in the site where you want to test this solution
|
||||
* create Country list as a standard Custom list and add few items in there
|
||||
* create Journeys list with the next columns:
|
||||
* Title - Single line of text
|
||||
* JorneyDate - Date and Time
|
||||
* VisitedCountries - Lookup with multiselection. Referenced list - Contry
|
||||
* JourneyDate - Date and Time
|
||||
* VisitedCountries - Lookup with multiselection. Referenced list - Country
|
||||
* Experience - Choice with next choices: Bad, Normal, Good
|
||||
* Picture - Hyperlink or Picture, display as Picture
|
||||
* JourneyType - Managed Metadata connected to the Term Set created above
|
||||
|
|
@ -57,3 +57,5 @@ Version|Date|Comments
|
|||
## Features
|
||||
|
||||
This sample demonstrates how to combine different parts of PnP Reusable React controls to create rich solutions. It also partially answers the question from [Issue 493](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/493) in PnP Reusable Controls repo.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-pnp-controls-list-view-fields" />
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-project
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 11/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- office-project
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 11/1/2017 12:00:00 AM
|
||||
---
|
||||
# React Project Online
|
||||
|
||||
## Summary
|
||||
|
|
@ -34,7 +34,7 @@ The web part is currently returning project tasks as a simple proof of concept.
|
|||
|
||||
## Prerequisites
|
||||
|
||||
- Office 365 subscription with SharePoint Online and Project Online licence
|
||||
- Office 365 subscription with SharePoint Online and Project Online license
|
||||
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
|
||||
-Project site with some tasks available.
|
||||
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ This webpart displays a list of all sites that meet the criteria specified in th
|
|||
|
||||
|
||||
|
||||
Additionally, it lets the user narrow down the list of sites displayed by applying metadata filters that are set up by the administrator in the Property Pane( Businsess Unit and Continent in the example above):
|
||||
Additionally, it lets the user narrow down the list of sites displayed by applying metadata filters that are set up by the administrator in the Property Pane( Business Unit and Continent in the example above):
|
||||
|
||||
|
||||
|
||||
|
|
@ -148,6 +148,6 @@ In the PropertyPane, an administrator just needs to specify which Managed Proper
|
|||
|
||||
|
||||
|
||||
If desired, the admin can also specify which site templates should be included in the menu, as wall as any additional filters. Additional Filteres can be specified in the format 'ManagedPropertyName=value';
|
||||
If desired, the admin can also specify which site templates should be included in the menu, as wall as any additional filters. Additional Filters can be specified in the format 'ManagedPropertyName=value';
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-property-bag-editor" />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
* **_Start Date_** - Date when the end user can start seeing the poll question.
|
||||
* **_End Date_** - Last day of the poll question visible to the end user.
|
||||
|
||||
3. **_Success Message_** - Message to be displayed to the user after successfull submission. It is optional, if not provided the default message '**Thank you for your submission**' will be displayed.
|
||||
3. **_Success Message_** - Message to be displayed to the user after successful submission. It is optional, if not provided the default message '**Thank you for your submission**' will be displayed.
|
||||
|
||||
4. **_Response Message_** - Message to be displayed to the user with the user response, once the user has submitted. It is optional, if not provided the default message '**You voted for: ~User Response~**' will be displayed below the chart.
|
||||
|
||||
|
|
@ -91,4 +91,6 @@ This solution doesn't work on local mode.
|
|||
|
||||
#### SharePoint Mode
|
||||
If you want to try on a real environment, open:
|
||||
[O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)
|
||||
[O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-quick-poll" />
|
||||
|
|
|
|||
|
|
@ -72,6 +72,6 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* Using react framework in SPFx webpart
|
||||
* Using [PnP Placeholder control](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/Placeholder/) to configure webpart.
|
||||
* Using [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) npm package in SPFx webpart
|
||||
* Validate if captcha is resolved before submiting data.
|
||||
* Validate if captcha is resolved before submitting data.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recaptcha" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recaptcha" />
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ Show Publication Date | Display the publication date
|
|||
Show Description | Display the content or description of each feed listing
|
||||
Description Character Limit | The maximum number of description characters to display
|
||||
Link Target | The "target" of a listing link, default: _blank
|
||||
Date Format | The Momment based format format of the listing date, i.e. DD/MM/YYYY (European), default: MM/DD/YYYY
|
||||
Date Format | The Moment based format format of the listing date, i.e. DD/MM/YYYY (European), default: MM/DD/YYYY
|
||||
Title Color | Color override for a listing title
|
||||
Background Color | Color override for the webpart background
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: tools
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 9/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: tools
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 9/1/2017 12:00:00 AM
|
||||
---
|
||||
# SPFx ReactiveX (RxJs) Event Emitter Sample #
|
||||
|
||||
## Summary
|
||||
|
|
@ -76,5 +76,3 @@ There is a very good [blog post](https://blog.mastykarz.nl/dll-code-sharepoint-f
|
|||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-rxjs-event-emitter" />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -158,12 +158,12 @@ If you however want to allow the web part for non-script sites like Office 365 G
|
|||
```
|
||||
|
||||
### Deploy tenant wide
|
||||
By default you have to install this web part per site collection where you want it availble. If you want it enabled by default on all sites you have to edit `package-solution.json` with the following change:
|
||||
By default you have to install this web part per site collection where you want it available. If you want it enabled by default on all sites you have to edit `package-solution.json` with the following change:
|
||||
```
|
||||
"skipFeatureDeployment": true
|
||||
```
|
||||
|
||||
In order to make it availble to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
|
||||
In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
|
||||
|
||||
## Features
|
||||
This web part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ By default you have to install this web part per site collection where you want
|
|||
"skipFeatureDeployment": true
|
||||
```
|
||||
|
||||
In order to make it availble to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
|
||||
In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
|
||||
|
||||
## Features
|
||||
This web part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# Search Client-Side Web Part built with React and Flux
|
||||
|
||||
## Summary
|
||||
|
|
@ -40,7 +40,7 @@ react-search-wp|Elio Struyf (MVP, U2U, [@eliostruyf](https://twitter.com/eliostr
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
0.0.4|September 08, 2016|Initial release
|
||||
0.0.5|September 27, 2016|Updates for drop 4. Added the abilty to use various search tokens. Plus a logging field to watch search calls.
|
||||
0.0.5|September 27, 2016|Updates for drop 4. Added the ability to use various search tokens. Plus a logging field to watch search calls.
|
||||
0.0.6|October 19, 2016|Updates for drop 5.
|
||||
0.1.0|January 18, 2017|Updates to support RC0.
|
||||
1.0.0|February 28, 2017|Updates to support GA.
|
||||
|
|
@ -64,7 +64,7 @@ Version|Date|Comments
|
|||
|
||||
The search web part is a sample client-side web part built on the SharePoint Framework. The web part makes use of React and the Flux pattern.
|
||||
|
||||
The web part has built in templating support for internal (created within the project) and external (loaded from a URL) templates.
|
||||
The web part has built-in templating support for internal (created within the project) and external (loaded from a URL) templates.
|
||||
|
||||
When adding your query you are able to make use of the following tokens: {Today}, {Today+Number}, {Today-Number}, {CurrentDisplayLanguage}, {User}, {User.Name}, {User.Email}, {Site}, {SiteCollection}.
|
||||
|
||||
|
|
@ -92,4 +92,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
- loading external templates to render
|
||||
- loading scripts and stylesheets which are required in the external template (example: loading jQuery or a custom stylesheet).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-search" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-search" />
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
# SPFX React Grid
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
# SPFx React Grid
|
||||
|
||||
## Summary
|
||||
|
||||
React-securitygrid is an SPFX webpart that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web as shown here:
|
||||
React-securitygrid is an SPFx webpart that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web as shown here:
|
||||
|
||||
|
||||
|
||||
Empty libraries are displayed withh a black folder icon, those with items are displayed with a white folder. The user can expand a list or library by clicking on the desired row. For deeply nested folders the Title column can be resized by drag and drop. The display shows a 'filled-in' circle if the user has the selected permission to the given list, library, file or folder. (NOTE:The grid does not currently take into account access give via membership in an active directory group). The user must have permissions to access lists and enumerate permissions in order to view the grid.
|
||||
Empty libraries are displayed with a black folder icon, those with items are displayed with a white folder. The user can expand a list or library by clicking on the desired row. For deeply nested folders the Title column can be resized by drag and drop. The display shows a 'filled-in' circle if the user has the selected permission to the given list, library, file or folder. (NOTE:The grid does not currently take into account access give via membership in an active directory group). The user must have permissions to access lists and enumerate permissions in order to view the grid.
|
||||
|
||||
The user can change the permission being tested by cliking the Permission in the command bar and selecting a new Permission:
|
||||
The user can change the permission being tested by clicking the Permission in the command bar and selecting a new Permission:
|
||||
|
||||
|
||||
|
||||
|
|
@ -58,8 +58,8 @@ Display Settings
|
|||
|
||||
The Initial Title column width determines the initial width of the Title column(it can be resized).
|
||||
|
||||
The second configuarion pannel allows the owner to configure the List Settings
|
||||
|
||||
The second configuration panel allows the owner to configure the List Settings
|
||||
|
||||
|
||||
List Settings
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- skype
|
||||
- office-skype-business
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
- skype
|
||||
- office-skype-business
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 12/1/2017 12:00:00 AM
|
||||
---
|
||||
# React Skype Status WebPart
|
||||
|
||||
## Summary
|
||||
This sample demonstrates how to use the *UCWA JS SDK* for skype with the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the [documentation](https://msdn.microsoft.com/en-us/skype/websdk/docs/generalreference?f=255&MSPPError=-2147217396)
|
||||
It allows leverages the *Office UI Fabric* Persona card to display comprehensive information about the user.
|
||||
|
||||
Allows you to properly display and subscribe to change of users' availibility.
|
||||
Allows you to properly display and subscribe to change of users' availability.
|
||||
See the demo:
|
||||
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ react-skype-status|[Vincent Biret](https://github.com/baywet)
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.4|March 27th, 2019|Upgrade to SPFx 1.8.0
|
||||
1.3|November 18th, 2018|Upgrade to SPFX 1.7.0
|
||||
1.3|November 18th, 2018|Upgrade to SPFx 1.7.0
|
||||
1.2|July 4th, 2018|Fixed a bug when subscribing to the current user's status
|
||||
1.1|June 25th, 2018|Upgrade to 1.5
|
||||
1.0|December 1, 2017|Initial release
|
||||
|
|
@ -58,7 +58,7 @@ Version|Date|Comments
|
|||
## Minimal Path to Awesome
|
||||
### Authentication
|
||||
Because the Skype API's are secured, you first need to register an Azure Active Directory application.
|
||||
To do that go to `portal.azure.com` and sign in as your tenant adminstrator.
|
||||
To do that go to `portal.azure.com` and sign in as your tenant administrator.
|
||||
|
||||
Click on `Azure Active Directory`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2018 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2018 12:00:00 AM
|
||||
---
|
||||
# React TinyMCE Editor WebPart Integration with SharePoint
|
||||
|
||||
## Summary
|
||||
|
|
@ -67,7 +67,7 @@ Description of the web part with possible additional details than in short summa
|
|||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
- Rich text editing, that has more features than the Out of the box.
|
||||
- Uses an Open Source, community driven Editor.
|
||||
- Uses an Open Source, community-driven Editor.
|
||||
- Can be extended to accept copy/paste from using Paste Plugin.
|
||||
- Can be extended to accept images using the manager in the Editor.
|
||||
- Can write your own Styles for all content on your site.
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: tools
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: tools
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
## Summary
|
||||
A simple todo web part built using react to showcase some of the SharePoint Framework developer features, utilities and best practices in building react based web parts.
|
||||
|
||||
|
|
@ -359,5 +359,3 @@ private _resolveBatch(batch: SPHttpClientBatch, promises: Promise<{}>[]): Promis
|
|||
```
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-todo-basic" />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# react-tour-pnpjs - SharePoint modern page tutorial: SPFX Tour sample WebPart.
|
||||
# react-tour-pnpjs - SharePoint modern page tutorial: SPFx Tour sample WebPart.
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -67,4 +67,3 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* How to include external React Component [ReactTourJS](https://reactour.js.org/)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/react-tour-pnpjs" />
|
||||
|
||||
|
|
|
|||
|
|
@ -49,3 +49,5 @@ Version|Date|Comments
|
|||
|
||||
This sample illustrates how to use [react-twitter-embed](https://www.npmjs.com/package/react-twitter-embed) module to display Twitter timeline of specific profile, likes, list, collection or url.
|
||||
It also uses [PnP React Controls](https://github.com/SharePoint/sp-dev-fx-controls-react) and [PnP Property Controls](https://github.com/SharePoint/sp-dev-fx-property-controls) for rich web part and property pane components.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-twitter" />
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 1/1/2016 12:00:00 AM
|
||||
---
|
||||
# React Video Library
|
||||
|
||||
## Summary
|
||||
A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick)
|
||||
A set of 3 SPFx webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick)
|
||||
to display videos stored on an Office 365 Video Channel. The idea being to display a carousel of the thumbnail images, and then
|
||||
when a user clicks on one of the thumbnails, replace the tumbnail with a video player, or an Iframe playing the video.
|
||||
when a user clicks on one of the thumbnails, replace the thumbnail with a video player, or an Iframe playing the video.
|
||||
|
||||
All 3 webparts share a common utility class (O365Vutilities) that is used to talk to the tenants Video Service through its rest
|
||||
API (https://msdn.microsoft.com/en-us/office/office365/api/video-rest-operations)
|
||||
|
|
@ -104,7 +104,7 @@ Version|Date|Comments
|
|||
> Include any additional steps as needed.
|
||||
|
||||
## Features
|
||||
A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick)
|
||||
A set of 3 SPFx webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick)
|
||||
to display videos stored on an O365 Video Channel.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ react-zpl-viewer | Zach Roberts [spodev](https://spodev.com)
|
|||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|Feburary 13, 2020|Initial release
|
||||
1.0|February 13, 2020|Initial release
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue