honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding missing telemetry images for readme files

This commit is contained in:
VesaJuvonen 2019-04-15 12:49:10 +03:00
parent d32bfd5521
commit 22318b95a3
110 changed files with 302 additions and 30346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
samples/README-template.md
View File

@ -1,11 +1,13 @@
# title of the sample # title of the sample
## Summary ## Summary
Short summary on functionality and used technologies. Short summary on functionality and used technologies.
[picture of the web part in action] [picture of the web part in action]
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg) ![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to ## Applies to
@ -33,25 +35,27 @@ Version|Date|Comments
1.0|August 29, 2025|Initial release 1.0|August 29, 2025|Initial release
## Disclaimer ## 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.** **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 ## Minimal Path to Awesome
- Clone this repository * Clone this repository
- in the command line run: * in the command line run:
- `npm install` * `npm install`
- `gulp serve` * `gulp serve`
> Include any additional steps as needed. > Include any additional steps as needed.
## Features ## Features
Description of the web part with possible additional details than in short summary. Description of the web part with possible additional details than in short summary.
This Web Part illustrates the following concepts on top of the SharePoint Framework: This Web Part illustrates the following concepts on top of the SharePoint Framework:
- topic 1 * topic 1
- topic 2 * topic 2
- topic 3 * topic 3
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />

2
samples/js-dynamic-bundling-libraries/README.md
View File

@ -57,4 +57,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Video Demonstration on using, building and code specifics for the sample web part:<br> http://warner.digital/dynamic-spfx-package-bundling/ - Video Demonstration on using, building and code specifics for the sample web part:<br> http://warner.digital/dynamic-spfx-package-bundling/
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-dynamic-bundling-libraries" />

1
samples/js-employee-spotlight/README.md
View File

@ -77,3 +77,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* Logging. * Logging.
* Rendering error messages. * Rendering error messages.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-employee-spotlight" />

2
samples/js-powerbi-embedded/README.md
View File

@ -47,3 +47,5 @@ The _PowerBI Embedded_ Client-Side Web Part is built on the SharePoint Framework
All authentication and rendering happens client-side, there is no server-side component required. All authentication and rendering happens client-side, there is no server-side component required.
It uses the [PowerBI Client](https://www.npmjs.com/package/powerbi-client) for rendering the PowerBI report. It uses the [PowerBI Client](https://www.npmjs.com/package/powerbi-client) for rendering the PowerBI report.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-powerbi-embedded" />

2
samples/js-solution-editions/README.md
View File

@ -63,3 +63,5 @@ gulp deploy-azure-storage
## Resources ## Resources
[Handling Multiple Editions of SPFx Solution](http://tricky-sharepoint.blogspot.com/2017/08/handling-multiple-editions-of-spfx.html) [Handling Multiple Editions of SPFx Solution](http://tricky-sharepoint.blogspot.com/2017/08/handling-multiple-editions-of-spfx.html)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-solution-editions" />

1
samples/js-theme-manager/README.md
View File

@ -67,6 +67,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Using the SharePoint Online REST API to manage Modern Experience Themes - Using the SharePoint Online REST API to manage Modern Experience Themes
## Additional Information: ## Additional Information:
- [Office UI Fabric Theme Palette Generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) - [Office UI Fabric Theme Palette Generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-theme-manager" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-theme-manager" />

2
samples/js-workbench-customizer/README.md
View File

@ -45,3 +45,5 @@ Version|Date|Comments
* in the command line run: * in the command line run:
* `npm install` * `npm install`
* `gulp serve` * `gulp serve`
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-workbench-customizer" />

2
samples/knockout-dependent-properties/README.md
View File

@ -52,4 +52,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- styling components to match Fabric UI experience - styling components to match Fabric UI experience
- creating custom Property Pane fields (custom markup, logic) based on Knockout.js framework - creating custom Property Pane fields (custom markup, logic) based on Knockout.js framework
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/ko-dependent-properties" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-dependent-properties" />

2
samples/pnp-controls/README.md
View File

@ -55,4 +55,4 @@ npm install
gulp serve --nobrowser gulp serve --nobrowser
``` ```
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/pnp-controls) <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/pnp-controls" />

3
samples/react-3rd-party-api/README.md
View File

@ -69,4 +69,5 @@ Once the npm packages are installed, run the command to preview your web parts i
``` ```
gulp serve gulp serve
``` ```
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorials" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/react-3rd-party-api" />

25
samples/react-RelayService/.editorconfig
View File

@ -1,25 +0,0 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

32
samples/react-RelayService/.gitignore vendored
View File

@ -1,32 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

8
samples/react-RelayService/.yo-rc.json
View File

@ -1,8 +0,0 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.4.1",
"libraryName": "react-relay-service",
"libraryId": "3d8b2b8b-cc29-4cf9-b3f1-62edd5ca9b52",
"environment": "spo"
}
}

26
samples/react-RelayService/README.md
View File

@ -1,26 +0,0 @@
## react-relay-service
This is where you include your WebPart documentation.
### Building the code
```bash
git clone the repo
npm i
npm i -g gulp
gulp
```
This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO

BIN
samples/react-RelayService/VisualStudioSolution/RelayServiceDemoService.zip
View File

Binary file not shown.

18
samples/react-RelayService/config/config.json
View File

@ -1,18 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"hello-azure-relay-service-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/helloAzureRelayService/HelloAzureRelayServiceWebPart.js",
"manifest": "./src/webparts/helloAzureRelayService/HelloAzureRelayServiceWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"HelloAzureRelayServiceWebPartStrings": "lib/webparts/helloAzureRelayService/loc/{locale}.js"
}
}

4
samples/react-RelayService/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

7
samples/react-RelayService/config/deploy-azure-storage.json
View File

@ -1,7 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-relay-service",
"accessKey": "<!-- ACCESS KEY -->"
}

13
samples/react-RelayService/config/package-solution.json
View File

@ -1,13 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-relay-service-client-side-solution",
"id": "3d8b2b8b-cc29-4cf9-b3f1-62edd5ca9b52",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
},
"paths": {
"zippedPackage": "solution/react-relay-service.sppkg"
}
}

10
samples/react-RelayService/config/serve.json
View File

@ -1,10 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

45
samples/react-RelayService/config/tslint.json
View File

@ -1,45 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false
}
}
}

4
samples/react-RelayService/config/write-manifests.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

7
samples/react-RelayService/gulpfile.js vendored
View File

@ -1,7 +0,0 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

33
samples/react-RelayService/package.json
View File

@ -1,33 +0,0 @@
{
"name": "react-relay-service",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"react": "15.6.2",
"react-dom": "15.6.2",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@microsoft/sp-core-library": "~1.4.1",
"@microsoft/sp-webpart-base": "~1.4.1",
"@microsoft/sp-lodash-subset": "~1.4.1",
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
"@types/webpack-env": ">=1.12.1 <1.14.0"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.4.1",
"@microsoft/sp-module-interfaces": "~1.4.1",
"@microsoft/sp-webpart-workbench": "~1.4.1",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0",
"ajv": "~5.2.2"
}
}

26
samples/react-RelayService/src/webparts/helloAzureRelayService/HelloAzureRelayServiceWebPart.manifest.json
View File

@ -1,26 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "6ddbb470-dced-4bcb-ad30-2956dd91dce9",
"alias": "HelloAzureRelayServiceWebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "HelloAzureRelayService" },
"description": { "default": "HelloAzureRelayService description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloAzureRelayService"
}
}]
}

78
samples/react-RelayService/src/webparts/helloAzureRelayService/HelloAzureRelayServiceWebPart.ts
View File

@ -1,78 +0,0 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import * as strings from 'HelloAzureRelayServiceWebPartStrings';
import HelloAzureRelayService from './components/HelloAzureRelayService';
import { IHelloAzureRelayServiceProps } from './components/IHelloAzureRelayServiceProps';
import { HttpClient, IHttpClientOptions, HttpClientResponse } from '@microsoft/sp-http';
export interface IHelloAzureRelayServiceWebPartProps {
description: string;
}
export default class HelloAzureRelayServiceWebPart extends BaseClientSideWebPart<IHelloAzureRelayServiceWebPartProps> {
private results: Array<any>;
public onInit(): Promise<any> {
debugger;
const requestHeaders: Headers = new Headers();
requestHeaders.append('Content-type', 'application/json');
requestHeaders.append('Cache-Control', 'no-cache');
const httpClientOptions: IHttpClientOptions = {
headers: requestHeaders
};
const url = "https://relayserviceproxy20180831034031.azurewebsites.net/api/Document?webID=917E82F1-FDF8-4298-AE73-1DD60E244C67";
return this.context.httpClient.get(url, HttpClient.configurations.v1, httpClientOptions).then((response) => {
response.json().then((r => {
debugger;
this.results = r;
}))
}).catch((err) => {
console.log(err);
})
}
public render(): void {
const element: React.ReactElement<IHelloAzureRelayServiceProps> = React.createElement(
HelloAzureRelayService,
{
description: this.properties.description,
documents: this.results
}
);
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: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}

74
samples/react-RelayService/src/webparts/helloAzureRelayService/components/HelloAzureRelayService.module.scss
View File

@ -1,74 +0,0 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.helloAzureRelayService {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

32
samples/react-RelayService/src/webparts/helloAzureRelayService/components/HelloAzureRelayService.tsx
View File

@ -1,32 +0,0 @@
import * as React from 'react';
import styles from './HelloAzureRelayService.module.scss';
import { IHelloAzureRelayServiceProps } from './IHelloAzureRelayServiceProps';
import { escape } from '@microsoft/sp-lodash-subset';
export default class HelloAzureRelayService extends React.Component<IHelloAzureRelayServiceProps, {}> {
public render(): React.ReactElement<IHelloAzureRelayServiceProps> {
return (
<div className={styles.helloAzureRelayService}>
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
<p className={styles.description}>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={styles.button}>
<ul>
{this.props.documents.map((d, i) => {
debugger;
return <li>{d.Title}</li>;
})}
</ul>
</a>
</div>
</div>
</div>
</div>
);
}
}

4
samples/react-RelayService/src/webparts/helloAzureRelayService/components/IHelloAzureRelayServiceProps.ts
View File

@ -1,4 +0,0 @@
export interface IHelloAzureRelayServiceProps {
description: string;
documents:Array<any>;
}

7
samples/react-RelayService/src/webparts/helloAzureRelayService/loc/en-us.js vendored
View File

@ -1,7 +0,0 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field"
}
});

10
samples/react-RelayService/src/webparts/helloAzureRelayService/loc/mystrings.d.ts vendored
View File

@ -1,10 +0,0 @@
declare interface IHelloAzureRelayServiceWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
}
declare module 'HelloAzureRelayServiceWebPartStrings' {
const strings: IHelloAzureRelayServiceWebPartStrings;
export = strings;
}

25
samples/react-RelayService/tsconfig.json
View File

@ -1,25 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
}
}

7
samples/react-accordion/README.md
View File

@ -63,10 +63,3 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" />
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO

1
samples/react-adaptive-cards-image-gallery/README.md
View File

@ -79,3 +79,4 @@ This sample web part shows how adaptive cards can be used effectively with Share
[figure4]: ./assets/list-sample-data.png [figure4]: ./assets/list-sample-data.png
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-adaptive-cards-image-gallery" />

3
samples/react-aggregated-calendar/README.md
View File

@ -75,7 +75,6 @@ This Web Part displays the events from multiple calendars located in various sit
### Building the code ### Building the code
```bash ```bash
@ -98,3 +97,5 @@ gulp test
gulp serve gulp serve
gulp bundle gulp bundle
gulp package-solution gulp package-solution
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-aggregated-calendar" />

3
samples/react-birthdays/README.md
View File

@ -73,4 +73,5 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- using @PnP/PnPjs to create a List, add, update, delete Items. - using @PnP/PnPjs to create a List, add, update, delete Items.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-birthdays" />

2
samples/react-chartcontrol/README.md
View File

@ -221,4 +221,4 @@ This Web Part sample pack illustrates the following concepts on top of the Share
* Rendering conditional property pane fields * Rendering conditional property pane fields
* Creating custom property pane controls * Creating custom property pane controls
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-chart-control" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-chartcontrol" />

1
samples/react-display-hierarchy/README.md
View File

@ -83,3 +83,4 @@ This sample web part shows how data stored in SharePoint list can be transformed
[figure5]: ./assets/list-sample-data.png [figure5]: ./assets/list-sample-data.png
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-display-hierarchy" />

2
samples/react-documents-detailslist/README.md
View File

@ -52,3 +52,5 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
-Using the SharePoint rest API for retrieving documents from the search index. -Using the SharePoint rest API for retrieving documents from the search index.
-Passing web part properties to React components. -Passing web part properties to React components.
-Reusing single React component between two web parts. -Reusing single React component between two web parts.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-documents-detailslist" />

2
samples/react-events-aggregator/README.md
View File

@ -64,5 +64,3 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Unit tests including spies, mocks and faking class methods and properties. - Unit tests including spies, mocks and faking class methods and properties.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-events-aggregator" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-events-aggregator" />

2
samples/react-facebook-plugin/README.md
View File

@ -55,3 +55,5 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* Observe parent container width and dynamic adaptation of absolute-width'ed HTML elements * Observe parent container width and dynamic adaptation of absolute-width'ed HTML elements
* React * React
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-facebook-plugin" />

3
samples/react-file-upload/README.md
View File

@ -58,4 +58,5 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- ability limit users to upload accepted file types - ability limit users to upload accepted file types
- using sp-pnp-js to delete uploaded files - using sp-pnp-js to delete uploaded files
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-file-upload" />

4
samples/react-google-fit/README.md
View File

@ -1,11 +1,13 @@
## Web part displaying Google Fit information ## Web part displaying Google Fit information
### Summary ### 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 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] ![Web part preview][figure1]
### Generate OAuth 2.0 client ID ### Generate OAuth 2.0 client ID
In order to use Google REST APIs, we need to generate an OAuth 2.0 client ID. Follow below procedure to generate it. In order to use Google REST APIs, we need to generate an OAuth 2.0 client ID. Follow below procedure to generate it.
1. Open Google API Console from [here](https://console.developers.google.com/flows/enableapi?apiid=fitness). 1. Open Google API Console from [here](https://console.developers.google.com/flows/enableapi?apiid=fitness).
2. Select any existing project or choose to create a new project. 2. Select any existing project or choose to create a new project.
@ -83,6 +85,7 @@ This sample web part shows how adaptive cards can be used effectively with Share
- Creating extensible services - Creating extensible services
- Using @react-google-authorize - Using @react-google-authorize
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-google-fit" />
[figure1]: ./assets/webpart-preview.png [figure1]: ./assets/webpart-preview.png
[figure2]: ./assets/sharepoint-run.gif [figure2]: ./assets/sharepoint-run.gif
@ -92,3 +95,4 @@ This sample web part shows how adaptive cards can be used effectively with Share
[figure6]: ./assets/add-authorized-origins.png [figure6]: ./assets/add-authorized-origins.png
[figure7]: ./assets/setup-oauth-consent.png [figure7]: ./assets/setup-oauth-consent.png
[figure8]: ./assets/oauth-clientid.png [figure8]: ./assets/oauth-clientid.png

2
samples/react-graph-evalurl/README.md
View File

@ -96,6 +96,8 @@ To identify a list or document library the following two token will be use:
* 'Forms' - View or SharePoint List Form for document libraries * 'Forms' - View or SharePoint List Form for document libraries
* 'Lists' - SharePoint stores all lists in the sub folder lists so this will be use to identify if a list is present in the URL * 'Lists' - SharePoint stores all lists in the sub folder lists so this will be use to identify if a list is present in the URL
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-grahp-evalurl" />
[figure1]: ./assets/evaluation-client-searching-for-site-collection.png [figure1]: ./assets/evaluation-client-searching-for-site-collection.png

1
samples/react-graph-personalemail/README.md
View File

@ -27,6 +27,7 @@ Version|Date|Comments
1.0|October 3, 2018|Initial release 1.0|October 3, 2018|Initial release
## Disclaimer ## 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.** **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.**
--- ---

2
samples/react-graph-schema-extensions/README.md
View File

@ -93,3 +93,5 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
* How to update an MS Graph entity (in this case, Office 365 Group) with custom data * How to update an MS Graph entity (in this case, Office 365 Group) with custom data
* Using async / await for the async calls * Using async / await for the async calls
* Office UI fabric components * Office UI fabric components
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-schema-extensions" />

2
samples/react-image-gallery/README.md
View File

@ -59,4 +59,4 @@ Here are main features for this application
- Right side popup panel - Right side popup panel
- Server side pagination using REST API - Server side pagination using REST API
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-image-gallery" />

2
samples/react-image-slider-list-taxonomy-filter/README.md
View File

@ -57,4 +57,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- How to filter the list based on Taxonomy and extract the Image URL - How to filter the list based on Taxonomy and extract the Image URL
- Implementation of Slick Slider - Implementation of Slick Slider
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-image-slider-list-taxonomy-filter" />

1
samples/react-item-History/README.md
View File

@ -53,3 +53,4 @@ Add-PnPCustomAction `
-RegistrationId "101" ` -RegistrationId "101" `
-ClientSideComponentProperties "{}" -ClientSideComponentProperties "{}"
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-item-history" />

2
samples/react-manage-sitedesigns/README.md
View File

@ -137,4 +137,4 @@ Version|Date|Comments
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-manage-sitedesigns" />

2
samples/react-material-ui/README.md
View File

@ -50,4 +50,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- TypeScript 3.3 - TypeScript 3.3
- @pnp/sp - @pnp/sp
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-material-ui" />

2
samples/react-my-teams/README.md
View File

@ -67,3 +67,5 @@ o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Group.
## Features ## Features
This Web Part lists all the teams the current user is a member of. This Web Part lists all the teams the current user is a member of.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-my-teams" />

2
samples/react-page-sections-navigation/README.md
View File

@ -54,3 +54,5 @@ It also can be used as ready-to-go solution to add page sections navigation to S
## Custom CSS ## Custom CSS
The web parts in the sample allow to use custom CSS to override the styles. You can set _Custom CSS URL_ property of *Page Sections Navigation* web part and include css classes for both Navigation and Anchor in referenced file. The web parts in the sample allow to use custom CSS to override the styles. You can set _Custom CSS URL_ property of *Page Sections Navigation* web part and include css classes for both Navigation and Anchor in referenced file.
Please, refer [custom css sample](./assets/psn-custom.css) for the CSS sample. Please, refer [custom css sample](./assets/psn-custom.css) for the CSS sample.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-page-sections-navigation" />

2
samples/react-project-online/README.md
View File

@ -55,3 +55,5 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
-Using the SharePoint rest API for querying web properties. -Using the SharePoint rest API for querying web properties.
-Using the Project Online rest API for retrieving project tasks. -Using the Project Online rest API for retrieving project tasks.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-project-online" />

2
samples/react-real-time/README.md
View File

@ -167,4 +167,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Using PnP JS library (1.0.5) to get items from a list. - Using PnP JS library (1.0.5) to get items from a list.
- Using Office UI Fabric React components to build a beautiful design in minutes. - Using Office UI Fabric React components to build a beautiful design in minutes.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-socket-io" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-real-time" />

25
samples/react-related-items/.editorconfig
View File

@ -1,25 +0,0 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

32
samples/react-related-items/.gitignore vendored
View File

@ -1,32 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

11
samples/react-related-items/.yo-rc.json
View File

@ -1,11 +0,0 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.6.0",
"libraryName": "react-related-items",
"libraryId": "53f15df0-a022-4c53-91f7-dc9b33371eb5",
"packageManager": "npm",
"componentType": "webpart"
}
}

BIN
samples/react-related-items/Capture.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

26
samples/react-related-items/README.md
View File

@ -1,26 +0,0 @@
## react-related-items
This is where you include your WebPart documentation.
### Building the code
```bash
git clone the repo
npm i
npm i -g gulp
gulp
```
This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO

18
samples/react-related-items/config/config.json
View File

@ -1,18 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"react-related-items-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/reactRelatedItems/ReactRelatedItemsWebPart.js",
"manifest": "./src/webparts/reactRelatedItems/ReactRelatedItemsWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"ReactRelatedItemsWebPartStrings": "lib/webparts/reactRelatedItems/loc/{locale}.js"
}
}

4
samples/react-related-items/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

7
samples/react-related-items/config/deploy-azure-storage.json
View File

@ -1,7 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-related-items",
"accessKey": "<!-- ACCESS KEY -->"
}

13
samples/react-related-items/config/package-solution.json
View File

@ -1,13 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-related-items-client-side-solution",
"id": "53f15df0-a022-4c53-91f7-dc9b33371eb5",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
},
"paths": {
"zippedPackage": "solution/react-related-items.sppkg"
}
}

10
samples/react-related-items/config/serve.json
View File

@ -1,10 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

4
samples/react-related-items/config/write-manifests.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

7
samples/react-related-items/gulpfile.js vendored
View File

@ -1,7 +0,0 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

39
samples/react-related-items/package.json
View File

@ -1,39 +0,0 @@
{
"name": "react-related-items",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.6.0",
"@microsoft/sp-lodash-subset": "1.6.0",
"@microsoft/sp-office-ui-fabric-core": "1.6.0",
"@microsoft/sp-webpart-base": "1.6.0",
"@pnp/common": "1.2.4",
"@pnp/logging": "1.2.4",
"@pnp/odata": "1.2.4",
"@pnp/sp": "1.2.4",
"@types/es6-promise": "0.0.33",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@types/webpack-env": "1.13.1",
"react": "15.6.2",
"react-dom": "15.6.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.6.0",
"@microsoft/sp-module-interfaces": "1.6.0",
"@microsoft/sp-webpart-workbench": "1.6.0",
"tslint-microsoft-contrib": "~5.0.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

1
samples/react-related-items/src/index.ts
View File

@ -1 +0,0 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

26
samples/react-related-items/src/webparts/reactRelatedItems/ReactRelatedItemsWebPart.manifest.json
View File

@ -1,26 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "f4c39319-e77d-4e69-805f-7893d0fbd2b3",
"alias": "ReactRelatedItemsWebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "react-related-items" },
"description": { "default": "Webpart to display related items on a task edit form." },
"officeFabricIconFontName": "Page",
"properties": {
"fieldInternalName": "RelatedItems"
}
}]
}

132
samples/react-related-items/src/webparts/reactRelatedItems/ReactRelatedItemsWebPart.ts
View File

@ -1,132 +0,0 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version, UrlQueryParameterCollection } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import * as strings from 'ReactRelatedItemsWebPartStrings';
import ReactRelatedItems from './components/ReactRelatedItems';
import { IReactRelatedItemsProps } from './components/IReactRelatedItemsProps';
import { SPListItem, SPList } from '@microsoft/sp-page-context';
import { sp, OpenWebByIdResult } from "@pnp/sp";
export interface IReactRelatedItemsWebPartProps {
fieldInternalName: string;
}
export default class ReactRelatedItemsWebPart extends BaseClientSideWebPart<IReactRelatedItemsWebPartProps> {
private _docTitle : string;
public get docTitle() : string {
return this._docTitle;
}
public set docTitle(v : string) {
this._docTitle = v;
}
private _docUrl : string;
public get docUrl() : string {
return this._docUrl;
}
public set docUrl(v : string) {
this._docUrl = v;
}
public onInit(): Promise<void> {
debugger;
const webpart=this;
return super.onInit()
.then(_ => {
sp.setup({
spfxContext: this.context
});
var list: SPList = this.context.pageContext.list;
var queryParameters = new UrlQueryParameterCollection(window.location.href);
const id: number = parseInt(queryParameters.getValue("ID"));
return sp.web.lists.getById(list.id.toString()).items.getById(id).expand("File").get()
.then((task) => {
//"[{"ItemId":6209,"WebId":"346b0229-1468-4344-8701-b2b300e5dbe1","ListId":"cfe9f983-f972-406d-840d-ac981a305ad7"}]"
let relatedItems = JSON.parse(task[webpart.properties.fieldInternalName]);
debugger;
let relatedItemID: number = relatedItems[0]["ItemId"];
let relatedItemListId: string = relatedItems[0]["ListId"];
let relatedItemWebId: string = relatedItems[0]["WebId"];
return sp.site.openWebById(relatedItemWebId)
.then((results: OpenWebByIdResult) => {
debugger;
return results.web.lists.getById(relatedItemListId).items.getById(relatedItemID).expand("File").get()
.then((item) => {
this.docTitle= item.File["Title"];
this.docUrl= item.File["LinkingUrl"];
debugger;
})
.catch((err) => {
console.log("error getting item");
debugger;
});
})
.catch((err) => {
debugger;
console.log(`Error openning web with id ${relatedItemWebId}`);
});
})
.catch((error) => {
console.log(`Error fetching task. Task ID is ${id}. List ID is ${list.id.toString()}`);
});
});
}
public render(): void {
const element: React.ReactElement<IReactRelatedItemsProps > = React.createElement(
ReactRelatedItems,
{
title: this.docTitle,
url:this.docUrl,
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(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: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}

4
samples/react-related-items/src/webparts/reactRelatedItems/components/IReactRelatedItemsProps.ts
View File

@ -1,4 +0,0 @@
export interface IReactRelatedItemsProps {
title: string;
url: string;
}

74
samples/react-related-items/src/webparts/reactRelatedItems/components/ReactRelatedItems.module.scss
View File

@ -1,74 +0,0 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.reactRelatedItems {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

24
samples/react-related-items/src/webparts/reactRelatedItems/components/ReactRelatedItems.tsx
View File

@ -1,24 +0,0 @@
import * as React from 'react';
import styles from './ReactRelatedItems.module.scss';
import { IReactRelatedItemsProps } from './IReactRelatedItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { Label } from 'office-ui-fabric-react/lib/Label';
export default class ReactRelatedItems extends React.Component<IReactRelatedItemsProps, {}> {
public render(): React.ReactElement<IReactRelatedItemsProps> {
return (
<div className={styles.reactRelatedItems}>
<Link href={this.props.url}>
<Label>
Related Item :
</Label>
{this.props.title}
</Link>
</div>
);
}
}

7
samples/react-related-items/src/webparts/reactRelatedItems/loc/en-us.js vendored
View File

@ -1,7 +0,0 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field"
}
});

10
samples/react-related-items/src/webparts/reactRelatedItems/loc/mystrings.d.ts vendored
View File

@ -1,10 +0,0 @@
declare interface IReactRelatedItemsWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
}
declare module 'ReactRelatedItemsWebPartStrings' {
const strings: IReactRelatedItemsWebPartStrings;
export = strings;
}

34
samples/react-related-items/tsconfig.json
View File

@ -1,34 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

32
samples/react-related-items/tslint.json
View File

@ -1,32 +0,0 @@
{
"rulesDirectory": [
"tslint-microsoft-contrib"
],
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

2
samples/react-securitygrid/README.md
View File

@ -101,3 +101,5 @@ Version|Date|Comments
- in the command line run: - in the command line run:
- `npm install` - `npm install`
- `gulp serve` - `gulp serve`
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-securitygrid" />

2
samples/react-side-panel/README.md
View File

@ -57,3 +57,5 @@ This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts * lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources * dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN. * deploy/* - all resources which should be uploaded to a CDN.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-side-panel" />

2
samples/react-taxonomypicker-panel/README.md
View File

@ -73,3 +73,5 @@ Version|Date|Comments
name : "<Term Name>", name : "<Term Name>",
key : "<Term ID>" key : "<Term ID>"
} }
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-taxonomypicker-panel" />

2
samples/react-team-creator/README.md
View File

@ -64,3 +64,5 @@ This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts * lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources * dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN. * deploy/* - all resources which should be uploaded to a CDN.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-team-creator" />

2
samples/react-teams-tab-suggested-members/README.md
View File

@ -46,3 +46,5 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
* Gulp custom task to zip Teams folder * Gulp custom task to zip Teams folder
* Using _async / await_ for the async calls * Using _async / await_ for the async calls
* Office UI fabric PeoplePicker * Office UI fabric PeoplePicker
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-teams-tab-suggested-members" />

6
samples/react-tenant-properties/README.md
View File

@ -22,6 +22,7 @@ Only users with Tenant Admin Role are allowed to managed tenant properties.
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg) ![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to ## Applies to
@ -67,7 +68,4 @@ Version|Date|Comments
- `Add to AppCatalog and deploy` - `Add to AppCatalog and deploy`
- `Approve API permission on SharePoint Admin Center` - `Approve API permission on SharePoint Admin Center`
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tenant-properties" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />

3
samples/react-tree-orgchart/README.md
View File

@ -59,4 +59,5 @@ Version|Date|Comments
- `gulp package-solution --ship` - `gulp package-solution --ship`
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tree-orgchart" />

2
samples/react-visio/README.md
View File

@ -58,3 +58,5 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Using the Visio JavaScript APIs to embed a diagram on a page - Using the Visio JavaScript APIs to embed a diagram on a page
- Using the Visio JavaScript APIs to interact with the Visio diagram and data available - Using the Visio JavaScript APIs to interact with the Visio diagram and data available
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-visio" />

2
samples/section-backgrounds/README.md
View File

@ -51,3 +51,5 @@ Version|Date|Comments
## Disclaimer ## 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.** **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/section-backgrounds" />

25
samples/workbench-customizer/.editorconfig
View File

@ -1,25 +0,0 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

32
samples/workbench-customizer/.gitignore vendored
View File

@ -1,32 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

11
samples/workbench-customizer/.yo-rc.json
View File

@ -1,11 +0,0 @@
{
"@microsoft/generator-sharepoint": {
"packageManager": "pnpm",
"isCreatingSolution": true,
"environment": "spo",
"version": "1.7.1",
"libraryName": "workbench-customizer",
"libraryId": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
"componentType": "webpart"
}
}

26
samples/workbench-customizer/README.md
View File

@ -1,26 +0,0 @@
## workbench-customizer
This is where you include your WebPart documentation.
### Building the code
```bash
git clone the repo
npm i
npm i -g gulp
gulp
```
This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO

18
samples/workbench-customizer/config/config.json
View File

@ -1,18 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"workbench-customizer-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.js",
"manifest": "./src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"WorkbenchCustomizerWebPartStrings": "lib/webparts/workbenchCustomizer/loc/{locale}.js"
}
}

4
samples/workbench-customizer/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

7
samples/workbench-customizer/config/deploy-azure-storage.json
View File

@ -1,7 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "workbench-customizer",
"accessKey": "<!-- ACCESS KEY -->"
}

13
samples/workbench-customizer/config/package-solution.json
View File

@ -1,13 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "workbench-customizer-client-side-solution",
"id": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
},
"paths": {
"zippedPackage": "solution/workbench-customizer.sppkg"
}
}

10
samples/workbench-customizer/config/serve.json
View File

@ -1,10 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

4
samples/workbench-customizer/config/write-manifests.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

7
samples/workbench-customizer/gulpfile.js
View File

@ -1,7 +0,0 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

17664
samples/workbench-customizer/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

31
samples/workbench-customizer/package.json
View File

@ -1,31 +0,0 @@
{
"name": "workbench-customizer",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@microsoft/sp-lodash-subset": "1.7.1",
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.1",
"@microsoft/sp-tslint-rules": "1.7.1",
"@microsoft/sp-module-interfaces": "1.7.1",
"@microsoft/sp-webpart-workbench": "1.7.1",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

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