├── DynamicLoad ├── .editorconfig ├── .gitignore ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ ├── tslint.json │ └── write-manifests.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ └── webparts │ │ └── helloWorld │ │ ├── HelloWorldWebPart.manifest.json │ │ ├── HelloWorldWebPart.ts │ │ ├── components │ │ ├── HelloWorld.module.scss │ │ ├── HelloWorld.tsx │ │ └── IHelloWorldProps.ts │ │ └── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts └── tsconfig.json ├── GraphCallTest ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .vscode │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ ├── tslint.json │ └── write-manifests.json ├── gulpfile.js ├── package.json ├── src │ └── webparts │ │ └── helloWorld │ │ ├── HelloWorldWebPart.manifest.json │ │ ├── HelloWorldWebPart.ts │ │ ├── IHelloWorldWebPartProps.ts │ │ ├── components │ │ ├── HelloWorld.module.scss │ │ ├── HelloWorld.tsx │ │ └── IHelloWorldProps.ts │ │ ├── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts │ │ └── tests │ │ └── HelloWorld.test.ts ├── tsconfig.json └── typings │ ├── @ms │ └── odsp.d.ts │ └── tsd.d.ts ├── README.md ├── linkfoo ├── .editorconfig ├── .gitignore ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ ├── tslint.json │ └── write-manifests.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ └── webparts │ │ └── linkTest │ │ ├── LinkTestWebPart.manifest.json │ │ ├── LinkTestWebPart.module.scss │ │ ├── LinkTestWebPart.ts │ │ └── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts └── tsconfig.json ├── react-bundle-ui-fabric ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .vscode │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ ├── tslint.json │ └── write-manifests.json ├── gulpfile.js ├── package.json ├── src │ └── webparts │ │ └── reactUiFabricBundling │ │ ├── IReactUiFabricBundlingWebPartProps.ts │ │ ├── ReactUiFabricBundlingWebPart.manifest.json │ │ ├── ReactUiFabricBundlingWebPart.ts │ │ ├── components │ │ ├── IReactUiFabricBundlingProps.ts │ │ ├── ReactUiFabricBundling.module.scss │ │ └── ReactUiFabricBundling.tsx │ │ ├── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts │ │ └── tests │ │ └── ReactUiFabricBundling.test.ts ├── tsconfig.json └── typings │ ├── @ms │ └── odsp.d.ts │ └── tsd.d.ts ├── react-pageexttest └── src │ └── extensions │ └── customizerTest │ └── CustomizerTestApplicationCustomizer.ts ├── react-pageheaderconfigurator ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .yo-rc.json ├── README.md ├── assets │ └── site-page-header-configurator.gif ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ ├── tslint.json │ └── write-manifests.json ├── gulpfile.js ├── package.json ├── src │ ├── controls │ │ └── PropertyPaneColorPicker │ │ │ ├── IPropertyPaneColorPickerInternalProps.ts │ │ │ ├── IPropertyPaneColorPickerProps.ts │ │ │ ├── PropertyPaneColorPicker.ts │ │ │ └── components │ │ │ ├── ColorPickerCtrl.tsx │ │ │ └── IColorPickerCtrlProps.ts │ └── webparts │ │ └── sitePageHeaderConfigurator │ │ ├── HeaderSize.ts │ │ ├── ISitePageHeaderConfiguratorWebPartProps.ts │ │ ├── SitePageHeaderConfiguratorWebPart.manifest.json │ │ ├── SitePageHeaderConfiguratorWebPart.ts │ │ ├── components │ │ ├── ISitePageHeaderConfiguratorProps.ts │ │ ├── SitePageHeaderConfigurator.module.scss │ │ ├── SitePageHeaderConfiguratorEdit.tsx │ │ └── SitePageHeaderConfiguratorView.tsx │ │ ├── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts │ │ └── tests │ │ └── SitePageHeaderConfigurator.test.ts ├── tsconfig.json └── typings │ ├── @ms │ └── odsp.d.ts │ └── tsd.d.ts └── react-taxonomy-rest ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .vscode └── settings.json ├── .yo-rc.json ├── README.md ├── config ├── config.json ├── copy-assets.json ├── deploy-azure-storage.json ├── package-solution.json ├── serve.json ├── tslint.json └── write-manifests.json ├── gulpfile.js ├── package.json ├── src └── webparts │ └── taxonomyRestSample │ ├── ITaxonomyRestSampleWebPartProps.ts │ ├── TaxonomyRestSampleWebPart.manifest.json │ ├── TaxonomyRestSampleWebPart.ts │ ├── components │ ├── ITaxonomyRestSampleProps.ts │ ├── TaxonomyRestSample.module.scss │ └── TaxonomyRestSample.tsx │ ├── loc │ ├── en-us.js │ └── mystrings.d.ts │ └── tests │ └── TaxonomyRestSample.test.ts ├── tsconfig.json └── typings ├── @ms └── odsp.d.ts └── tsd.d.ts /DynamicLoad/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /DynamicLoad/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /DynamicLoad/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /DynamicLoad/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///../../../src/*": "${webRoot}/src/*", 16 | "webpack:///../../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 18 | }, 19 | "runtimeArgs": [ 20 | "--remote-debugging-port=9222" 21 | ] 22 | }, 23 | { 24 | "name": "Hosted workbench", 25 | "type": "chrome", 26 | "request": "launch", 27 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 28 | "webRoot": "${workspaceRoot}", 29 | "sourceMaps": true, 30 | "sourceMapPathOverrides": { 31 | "webpack:///../../../src/*": "${webRoot}/src/*", 32 | "webpack:///../../../../src/*": "${webRoot}/src/*", 33 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 34 | }, 35 | "runtimeArgs": [ 36 | "--remote-debugging-port=9222", 37 | "-incognito" 38 | ] 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /DynamicLoad/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /DynamicLoad/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "version": "1.4.1", 4 | "libraryName": "dynamic-load", 5 | "libraryId": "e13981f7-485a-498b-861e-5e8aea4e63e0", 6 | "environment": "spo" 7 | } 8 | } -------------------------------------------------------------------------------- /DynamicLoad/README.md: -------------------------------------------------------------------------------- 1 | ## dynamic-load 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /DynamicLoad/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "hello-world-web-part": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/webparts/helloWorld/HelloWorldWebPart.js", 9 | "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json" 10 | } 11 | ] 12 | } 13 | }, 14 | "externals": {}, 15 | "localizedResources": { 16 | "HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /DynamicLoad/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /DynamicLoad/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "", 5 | "container": "dynamic-load", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /DynamicLoad/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "dynamic-load-client-side-solution", 5 | "id": "e13981f7-485a-498b-861e-5e8aea4e63e0", 6 | "version": "1.0.0.0", 7 | "includeClientSideAssets": true 8 | }, 9 | "paths": { 10 | "zippedPackage": "solution/dynamic-load.sppkg" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /DynamicLoad/config/serve.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json", 4 | "port": 4321, 5 | "https": true, 6 | "serveConfigurations": { 7 | "default": { 8 | "pageUrl": "https://tenant.sharepoint.com/teams/CommSite/SitePages/Home.aspx" 9 | } 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /DynamicLoad/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json", 3 | // Display errors as warnings 4 | "displayAsWarning": true, 5 | // The TSLint task may have been configured with several custom lint rules 6 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 7 | // project). If true, this flag will deactivate any of these rules. 8 | "removeExistingRules": true, 9 | // When true, the TSLint task is configured with some default TSLint "rules.": 10 | "useDefaultConfigAsBase": false, 11 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 12 | // which are active, other than the list of rules below. 13 | "lintConfig": { 14 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 15 | "rules": { 16 | "class-name": false, 17 | "export-name": false, 18 | "forin": false, 19 | "label-position": false, 20 | "member-access": true, 21 | "no-arg": false, 22 | "no-console": false, 23 | "no-construct": false, 24 | "no-duplicate-case": true, 25 | "no-duplicate-variable": true, 26 | "no-eval": false, 27 | "no-function-expression": true, 28 | "no-internal-module": true, 29 | "no-shadowed-variable": true, 30 | "no-switch-case-fall-through": true, 31 | "no-unnecessary-semicolons": true, 32 | "no-unused-expression": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /DynamicLoad/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /DynamicLoad/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 6 | 7 | build.initialize(gulp); 8 | -------------------------------------------------------------------------------- /DynamicLoad/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-load", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "scripts": { 9 | "build": "gulp bundle", 10 | "clean": "gulp clean", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "react": "15.6.2", 15 | "react-dom": "15.6.2", 16 | "@types/react": "15.6.6", 17 | "@types/react-dom": "15.5.6", 18 | "@microsoft/sp-core-library": "~1.4.1", 19 | "@microsoft/sp-webpart-base": "~1.4.1", 20 | "@microsoft/sp-lodash-subset": "~1.4.1", 21 | "@microsoft/sp-office-ui-fabric-core": "~1.4.1", 22 | "@types/webpack-env": ">=1.12.1 <1.14.0" 23 | }, 24 | "devDependencies": { 25 | "@microsoft/sp-build-web": "~1.4.1", 26 | "@microsoft/sp-module-interfaces": "^1.4.1", 27 | "@microsoft/sp-webpart-workbench": "~1.4.1", 28 | "@types/chai": ">=3.4.34 <3.6.0", 29 | "@types/mocha": ">=2.2.33 <2.6.0", 30 | "ajv": "~5.2.2", 31 | "gulp": "~3.9.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/HelloWorldWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "3b467a57-4396-4532-9aca-5e57e743b169", 4 | "alias": "HelloWorldWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | 16 | "preconfiguredEntries": [{ 17 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 18 | "group": { "default": "Other" }, 19 | "title": { "default": "Dynamic WP Loader" }, 20 | "description": { "default": "Load a wp dynamically" }, 21 | "officeFabricIconFontName": "Page", 22 | "properties": { 23 | "description": "HelloWorld" 24 | } 25 | }] 26 | } 27 | -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/HelloWorldWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-webpart-base'; 9 | 10 | import * as strings from 'HelloWorldWebPartStrings'; 11 | import HelloWorld from './components/HelloWorld'; 12 | import { IHelloWorldProps } from './components/IHelloWorldProps'; 13 | 14 | export interface IHelloWorldWebPartProps { 15 | description: string; 16 | } 17 | 18 | export default class HelloWorldWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | HelloWorld, 23 | { 24 | context: this.context 25 | } 26 | ); 27 | ReactDom.render(element, this.domElement); 28 | } 29 | 30 | protected get dataVersion(): Version { 31 | return Version.parse('1.0'); 32 | } 33 | 34 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 35 | return { 36 | pages: [ 37 | { 38 | header: { 39 | description: strings.PropertyPaneDescription 40 | }, 41 | groups: [ 42 | { 43 | groupName: strings.BasicGroupName, 44 | groupFields: [ 45 | PropertyPaneTextField('description', { 46 | label: strings.DescriptionFieldLabel 47 | }) 48 | ] 49 | } 50 | ] 51 | } 52 | ] 53 | }; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/components/HelloWorld.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .helloWorld { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/components/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './HelloWorld.module.scss'; 3 | import { IHelloWorldProps } from './IHelloWorldProps'; 4 | import { Guid } from '@microsoft/sp-core-library' 5 | import { ClientSideWebPartManager, IWebPartManagerContext, IWebPartData } from '@microsoft/sp-webpart-base'; 6 | import { DisplayMode } from '@microsoft/sp-core-library'; 7 | 8 | import { IClientSideWebPartManifest } from '@microsoft/sp-module-interfaces'; 9 | 10 | let _webPartManager: ClientSideWebPartManager; 11 | let _sampleIdOne = "mAdcOW" + Guid.newGuid().toString(); 12 | let _sampleIdTwo = "mAdcOW" + Guid.newGuid().toString(); 13 | export default class HelloWorld extends React.Component { 14 | 15 | public async componentDidMount(): Promise { 16 | _webPartManager = new ClientSideWebPartManager(this.props.context.host); 17 | await _webPartManager.fetchWebPartManifests(); // Ensure all manifests are available 18 | this.addData(); 19 | } 20 | 21 | private async addData() { 22 | // local webpart properties - in this case props for the modern script editor webpart 23 | let props = { 24 | script: "
Foo
", 25 | title: "The Modern Script Editor web part!", 26 | removePadding: false, 27 | spPageContextInfo: false 28 | } 29 | await this.loadWebPart("ScriptEditorWebPart", document.getElementById(_sampleIdOne), props); 30 | await this.loadWebPart("ScriptEditorWebPart", document.getElementById(_sampleIdTwo), props); 31 | } 32 | 33 | private async loadWebPart(alias: string, domElement: HTMLElement, webPartProperties: any) { 34 | let manifests = _webPartManager.getWebPartManifests(); 35 | for (let i = 0; i < manifests.length; i++) { 36 | const manifest = manifests[i]; 37 | if (manifest.alias === alias) { 38 | let instanceId = Guid.newGuid().toString(); 39 | let wpManifest: IClientSideWebPartManifest = manifest as IClientSideWebPartManifest; 40 | let wpData: IWebPartData = { 41 | id: wpManifest.id, 42 | instanceId: instanceId, 43 | title: "", 44 | dataVersion: "1.0", 45 | properties: webPartProperties 46 | }; 47 | 48 | // Specify any as webpartLoadExtraLogInfo is not defined on the interface and has to be present 49 | let initialize: IWebPartManagerContext & any = { 50 | domElement: domElement, 51 | instanceId: instanceId, 52 | manifest: wpManifest, 53 | displayMode: DisplayMode.Read, 54 | webPartData: wpData, 55 | webpartLoadExtraLogInfo: { 56 | } 57 | }; 58 | await _webPartManager.loadWebPart(initialize); 59 | } 60 | } 61 | } 62 | 63 | public render(): React.ReactElement { 64 | 65 | return ( 66 |
67 |
68 |
69 |
70 | Dynamic loading! 71 | 72 | 73 |
74 |
75 |
76 |
77 | ); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/components/IHelloWorldProps.ts: -------------------------------------------------------------------------------- 1 | import { IWebPartContext } from '@microsoft/sp-webpart-base'; 2 | import { DisplayMode } from '@microsoft/sp-core-library'; 3 | export interface IHelloWorldProps { 4 | context: IWebPartContext 5 | } 6 | -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /DynamicLoad/src/webparts/helloWorld/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IHelloWorldWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'HelloWorldWebPartStrings' { 8 | const strings: IHelloWorldWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /DynamicLoad/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "declaration": true, 8 | "sourceMap": true, 9 | "experimentalDecorators": true, 10 | "skipLibCheck": true, 11 | "typeRoots": [ 12 | "./node_modules/@types", 13 | "./node_modules/@microsoft" 14 | ], 15 | "types": [ 16 | "es6-promise", 17 | "webpack-env" 18 | ], 19 | "lib": [ 20 | "es5", 21 | "dom", 22 | "es2015.collection" 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /GraphCallTest/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /GraphCallTest/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /GraphCallTest/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /GraphCallTest/.npmignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | .vscode 3 | coverage 4 | node_modules 5 | sharepoint 6 | src 7 | temp 8 | 9 | # Files 10 | *.csproj 11 | .git* 12 | .yo-rc.json 13 | gulpfile.js 14 | tsconfig.json 15 | -------------------------------------------------------------------------------- /GraphCallTest/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib", 13 | "json.schemas": [ 14 | { 15 | "fileMatch": [ 16 | "/config/config.json" 17 | ], 18 | "url": "./node_modules/@microsoft/sp-build-web/lib/schemas/config.schema.json" 19 | }, 20 | { 21 | "fileMatch": [ 22 | "/config/copy-assets.json" 23 | ], 24 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/copy-assets.schema.json" 25 | }, 26 | { 27 | "fileMatch": [ 28 | "/config/deploy-azure-storage.json" 29 | ], 30 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/deployAzureStorage/deploy-azure-storage.schema.json" 31 | }, 32 | { 33 | "fileMatch": [ 34 | "/config/package-solution.json" 35 | ], 36 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/packageSolution/package-solution.schema.json" 37 | }, 38 | { 39 | "fileMatch": [ 40 | "/config/serve.json" 41 | ], 42 | "url": "./node_modules/@microsoft/gulp-core-build-serve/lib/serve.schema.json" 43 | }, 44 | { 45 | "fileMatch": [ 46 | "/config/tslint.json" 47 | ], 48 | "url": "./node_modules/@microsoft/gulp-core-build-typescript/lib/schemas/tslint.schema.json" 49 | }, 50 | { 51 | "fileMatch": [ 52 | "/config/write-manifests.json" 53 | ], 54 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/writeManifests/write-manifests.schema.json" 55 | }, 56 | { 57 | "fileMatch": [ 58 | "/config/configure-webpack.json" 59 | ], 60 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack.schema.json" 61 | }, 62 | { 63 | "fileMatch": [ 64 | "/config/configure-external-bundling-webpack.json" 65 | ], 66 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack-external-bundling.schema.json" 67 | }, 68 | { 69 | "fileMatch": [ 70 | "/copy-static-assets.json" 71 | ], 72 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyStaticAssets/copy-static-assets.schema.json" 73 | } 74 | ] 75 | } -------------------------------------------------------------------------------- /GraphCallTest/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "version": "1.1.0", 4 | "libraryName": "graph-call-test", 5 | "libraryId": "78f20df6-6b07-46e3-9f17-777700ef3d87", 6 | "environment": "spo" 7 | } 8 | } -------------------------------------------------------------------------------- /GraphCallTest/README.md: -------------------------------------------------------------------------------- 1 | ## graph-call-test 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /GraphCallTest/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "entry": "./lib/webparts/helloWorld/HelloWorldWebPart.js", 5 | "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json", 6 | "outputPath": "./dist/hello-world.bundle.js" 7 | } 8 | ], 9 | "externals": {}, 10 | "localizedResources": { 11 | "helloWorldStrings": "webparts/helloWorld/loc/{locale}.js" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /GraphCallTest/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "deployCdnPath": "temp/deploy" 3 | } 4 | -------------------------------------------------------------------------------- /GraphCallTest/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "workingDir": "./temp/deploy/", 3 | "account": "", 4 | "container": "graph-call-test", 5 | "accessKey": "" 6 | } -------------------------------------------------------------------------------- /GraphCallTest/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "solution": { 3 | "name": "graph-call-test-client-side-solution", 4 | "id": "78f20df6-6b07-46e3-9f17-777700ef3d87", 5 | "version": "1.0.0.0" 6 | }, 7 | "paths": { 8 | "zippedPackage": "solution/graph-call-test.sppkg" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /GraphCallTest/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 4321, 3 | "initialPage": "https://localhost:5432/workbench", 4 | "https": true, 5 | "api": { 6 | "port": 5432, 7 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /GraphCallTest/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | // Display errors as warnings 3 | "displayAsWarning": true, 4 | // The TSLint task may have been configured with several custom lint rules 5 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 6 | // project). If true, this flag will deactivate any of these rules. 7 | "removeExistingRules": true, 8 | // When true, the TSLint task is configured with some default TSLint "rules.": 9 | "useDefaultConfigAsBase": false, 10 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 11 | // which are active, other than the list of rules below. 12 | "lintConfig": { 13 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 14 | "rules": { 15 | "class-name": false, 16 | "export-name": false, 17 | "forin": false, 18 | "label-position": false, 19 | "member-access": true, 20 | "no-arg": false, 21 | "no-console": false, 22 | "no-construct": false, 23 | "no-duplicate-case": true, 24 | "no-duplicate-variable": true, 25 | "no-eval": false, 26 | "no-function-expression": true, 27 | "no-internal-module": true, 28 | "no-shadowed-variable": true, 29 | "no-switch-case-fall-through": true, 30 | "no-unnecessary-semicolons": true, 31 | "no-unused-expression": true, 32 | "no-unused-imports": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /GraphCallTest/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "cdnBasePath": "" 3 | } -------------------------------------------------------------------------------- /GraphCallTest/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | 6 | build.initialize(gulp); 7 | -------------------------------------------------------------------------------- /GraphCallTest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "graph-call-test", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "dependencies": { 9 | "@microsoft/sp-core-library": "~1.1.0", 10 | "@microsoft/sp-webpart-base": "~1.1.0", 11 | "@types/webpack-env": ">=1.12.1 <1.14.0", 12 | "react": "15.4.2", 13 | "react-dom": "15.4.2", 14 | "@types/react": "0.14.46", 15 | "@types/react-dom": "0.14.18", 16 | "@types/react-addons-shallow-compare": "0.14.17", 17 | "@types/react-addons-update": "0.14.14", 18 | "@types/react-addons-test-utils": "0.14.15" 19 | }, 20 | "devDependencies": { 21 | "@microsoft/sp-build-web": "~1.1.0", 22 | "@microsoft/sp-module-interfaces": "~1.1.0", 23 | "@microsoft/sp-webpart-workbench": "~1.1.0", 24 | "gulp": "~3.9.1", 25 | "@types/chai": ">=3.4.34 <3.6.0", 26 | "@types/mocha": ">=2.2.33 <2.6.0" 27 | }, 28 | "scripts": { 29 | "build": "gulp bundle", 30 | "clean": "gulp clean", 31 | "test": "gulp test" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/HelloWorldWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", 3 | 4 | "id": "136714cb-284e-4ba7-a8f8-9f5d7231dab7", 5 | "alias": "HelloWorldWebPart", 6 | "componentType": "WebPart", 7 | "version": "*", // The "*" signifies that the version should be taken from the package.json 8 | "manifestVersion": 2, 9 | 10 | /** 11 | * This property should only be set to true if it is certain that the webpart does not 12 | * allow arbitrary scripts to be called 13 | */ 14 | "safeWithCustomScriptDisabled": false, 15 | 16 | "preconfiguredEntries": [{ 17 | "groupId": "136714cb-284e-4ba7-a8f8-9f5d7231dab7", 18 | "group": { "default": "Under Development" }, 19 | "title": { "default": "HelloWorld" }, 20 | "description": { "default": "HelloWorld description" }, 21 | "officeFabricIconFontName": "Page", 22 | "properties": { 23 | "description": "HelloWorld" 24 | } 25 | }] 26 | } 27 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/HelloWorldWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-webpart-base'; 9 | 10 | import * as strings from 'helloWorldStrings'; 11 | import HelloWorld from './components/HelloWorld'; 12 | import { IHelloWorldProps } from './components/IHelloWorldProps'; 13 | import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps'; 14 | 15 | export default class HelloWorldWebPart extends BaseClientSideWebPart { 16 | 17 | public render(): void { 18 | const element: React.ReactElement = React.createElement( 19 | HelloWorld, 20 | { 21 | description: this.properties.description, 22 | context: this.context 23 | } 24 | ); 25 | 26 | ReactDom.render(element, this.domElement); 27 | } 28 | 29 | protected get dataVersion(): Version { 30 | return Version.parse('1.0'); 31 | } 32 | 33 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 34 | return { 35 | pages: [ 36 | { 37 | header: { 38 | description: strings.PropertyPaneDescription 39 | }, 40 | groups: [ 41 | { 42 | groupName: strings.BasicGroupName, 43 | groupFields: [ 44 | PropertyPaneTextField('description', { 45 | label: strings.DescriptionFieldLabel 46 | }) 47 | ] 48 | } 49 | ] 50 | } 51 | ] 52 | }; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/IHelloWorldWebPartProps.ts: -------------------------------------------------------------------------------- 1 | export interface IHelloWorldWebPartProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/components/HelloWorld.module.scss: -------------------------------------------------------------------------------- 1 | .helloWorld { 2 | .container { 3 | max-width: 700px; 4 | margin: 0px auto; 5 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 6 | } 7 | 8 | .row { 9 | padding: 20px; 10 | } 11 | 12 | .listItem { 13 | max-width: 715px; 14 | margin: 5px auto 5px auto; 15 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 16 | } 17 | 18 | .button { 19 | // Our button 20 | text-decoration: none; 21 | height: 32px; 22 | 23 | // Primary Button 24 | min-width: 80px; 25 | background-color: #0078d7; 26 | border-color: #0078d7; 27 | color: #ffffff; 28 | 29 | // Basic Button 30 | outline: transparent; 31 | position: relative; 32 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 33 | -webkit-font-smoothing: antialiased; 34 | font-size: 14px; 35 | font-weight: 400; 36 | border-width: 0; 37 | text-align: center; 38 | cursor: pointer; 39 | display: inline-block; 40 | padding: 0 16px; 41 | 42 | .label { 43 | font-weight: 600; 44 | font-size: 14px; 45 | height: 32px; 46 | line-height: 32px; 47 | margin: 0 4px; 48 | vertical-align: top; 49 | display: inline-block; 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/components/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { IHelloWorldProps } from './IHelloWorldProps'; 3 | import { GraphHttpClient, HttpClientResponse } from '@microsoft/sp-http'; 4 | 5 | export default class HelloWorld extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | appointments: "" 10 | }; 11 | } 12 | 13 | public componentDidMount(): void { 14 | 15 | //this.props.context.graphHttpClient.get("beta/reports/Office365GroupsActivity(view='Detail',period='D7')/content", GraphHttpClient.configurations.v1).then((response: HttpClientResponse) => { 16 | 17 | // Group ID is not directly available yet 18 | let groupId = this.props.context.pageContext.legacyPageContext.groupId; 19 | this.props.context.graphHttpClient.get(`v1.0/groups/${groupId}/events`, GraphHttpClient.configurations.v1).then((response: HttpClientResponse) => { 20 | if (response.ok) { 21 | response.json().then((result: any) => { 22 | debugger; 23 | let appointments: string = ''; 24 | for (var i = 0; i < result.value.length; i++) { 25 | var element = result.value[i]; 26 | appointments += element.subject + "|"; 27 | } 28 | this.setState({ appointments: appointments }); 29 | }); 30 | } else { 31 | console.warn(response.statusText); 32 | } 33 | }); 34 | } 35 | 36 | public render(): React.ReactElement { 37 | return ( 38 |
39 |
40 |

{this.state.appointments}

41 |
42 |
43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/components/IHelloWorldProps.ts: -------------------------------------------------------------------------------- 1 | import { IWebPartContext } from '@microsoft/sp-webpart-base'; 2 | export interface IHelloWorldProps { 3 | description: string; 4 | context: IWebPartContext; 5 | } 6 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IHelloWorldStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'helloWorldStrings' { 8 | const strings: IHelloWorldStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /GraphCallTest/src/webparts/helloWorld/tests/HelloWorld.test.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { assert } from 'chai'; 4 | 5 | describe('HelloWorldWebPart', () => { 6 | it('should do something', () => { 7 | assert.ok(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /GraphCallTest/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "declaration": true, 8 | "sourceMap": true, 9 | "experimentalDecorators": true, 10 | "types": [ 11 | "es6-promise", 12 | "es6-collections", 13 | "webpack-env" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /GraphCallTest/typings/@ms/odsp.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for Microsoft ODSP projects 2 | // Project: ODSP 3 | 4 | /* Global definition for UNIT_TEST builds 5 | Code that is wrapped inside an if(UNIT_TEST) {...} 6 | block will not be included in the final bundle when the 7 | --ship flag is specified */ 8 | declare const UNIT_TEST: boolean; 9 | 10 | /* Global defintion for SPO builds */ 11 | declare const DATACENTER: boolean; -------------------------------------------------------------------------------- /GraphCallTest/typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SPFfx 4 Fun 2 | This is where you will find random SharePoint Framework solutions I create 3 | 4 | * [Modern page header configurator](./react-pageheaderconfigurator) (web part) 5 | * [HttpGraphClient test](./GraphCallTest) (web part) 6 | -------------------------------------------------------------------------------- /linkfoo/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /linkfoo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /linkfoo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /linkfoo/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///../../../src/*": "${webRoot}/src/*", 16 | "webpack:///../../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 18 | }, 19 | "runtimeArgs": [ 20 | "--remote-debugging-port=9222" 21 | ] 22 | }, 23 | { 24 | "name": "Hosted workbench", 25 | "type": "chrome", 26 | "request": "launch", 27 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 28 | "webRoot": "${workspaceRoot}", 29 | "sourceMaps": true, 30 | "sourceMapPathOverrides": { 31 | "webpack:///../../../src/*": "${webRoot}/src/*", 32 | "webpack:///../../../../src/*": "${webRoot}/src/*", 33 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 34 | }, 35 | "runtimeArgs": [ 36 | "--remote-debugging-port=9222", 37 | "-incognito" 38 | ] 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /linkfoo/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /linkfoo/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "isCreatingSolution": true, 4 | "environment": "spo", 5 | "version": "1.5.1", 6 | "libraryName": "linkfoo", 7 | "libraryId": "fe5fc2a9-72cf-488e-8a5c-14e628f2db8c", 8 | "packageManager": "npm", 9 | "componentType": "webpart" 10 | } 11 | } -------------------------------------------------------------------------------- /linkfoo/README.md: -------------------------------------------------------------------------------- 1 | ## linkfoo 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /linkfoo/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "link-test-web-part": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/webparts/linkTest/LinkTestWebPart.js", 9 | "manifest": "./src/webparts/linkTest/LinkTestWebPart.manifest.json" 10 | } 11 | ] 12 | } 13 | }, 14 | "externals": {}, 15 | "localizedResources": { 16 | "LinkTestWebPartStrings": "lib/webparts/linkTest/loc/{locale}.js" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /linkfoo/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /linkfoo/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "", 5 | "container": "linkfoo", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /linkfoo/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "linkfoo-client-side-solution", 5 | "id": "fe5fc2a9-72cf-488e-8a5c-14e628f2db8c", 6 | "version": "1.0.0.0", 7 | "includeClientSideAssets": true 8 | }, 9 | "paths": { 10 | "zippedPackage": "solution/linkfoo.sppkg" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /linkfoo/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true, 5 | "serveConfigurations": { 6 | "default": { 7 | "pageUrl": "https://contoso.sharepoint.com/teams/CommSite/SitePages/Home.aspx" 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /linkfoo/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json", 3 | // Display errors as warnings 4 | "displayAsWarning": true, 5 | // The TSLint task may have been configured with several custom lint rules 6 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 7 | // project). If true, this flag will deactivate any of these rules. 8 | "removeExistingRules": true, 9 | // When true, the TSLint task is configured with some default TSLint "rules.": 10 | "useDefaultConfigAsBase": false, 11 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 12 | // which are active, other than the list of rules below. 13 | "lintConfig": { 14 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 15 | "rules": { 16 | "class-name": false, 17 | "export-name": false, 18 | "forin": false, 19 | "label-position": false, 20 | "member-access": true, 21 | "no-arg": false, 22 | "no-console": false, 23 | "no-construct": false, 24 | "no-duplicate-case": true, 25 | "no-duplicate-variable": true, 26 | "no-eval": false, 27 | "no-function-expression": true, 28 | "no-internal-module": true, 29 | "no-shadowed-variable": true, 30 | "no-switch-case-fall-through": true, 31 | "no-unnecessary-semicolons": true, 32 | "no-unused-expression": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /linkfoo/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /linkfoo/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 6 | 7 | build.initialize(gulp); 8 | -------------------------------------------------------------------------------- /linkfoo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linkfoo", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "scripts": { 9 | "build": "gulp bundle", 10 | "clean": "gulp clean", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "@microsoft/sp-core-library": "1.5.1", 15 | "@microsoft/sp-webpart-base": "1.5.1", 16 | "@microsoft/sp-lodash-subset": "1.5.1", 17 | "@microsoft/sp-office-ui-fabric-core": "1.5.1", 18 | "@types/webpack-env": "1.13.1", 19 | "@types/es6-promise": "0.0.33" 20 | }, 21 | "devDependencies": { 22 | "@microsoft/sp-build-web": "1.5.1", 23 | "@microsoft/sp-module-interfaces": "1.5.1", 24 | "@microsoft/sp-webpart-workbench": "1.5.1", 25 | "gulp": "~3.9.1", 26 | "@types/chai": "3.4.34", 27 | "@types/mocha": "2.2.38", 28 | "ajv": "~5.2.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /linkfoo/src/webparts/linkTest/LinkTestWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "1253736c-f2ad-4694-aab1-4498e5ec437e", 4 | "alias": "LinkTestWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | 16 | "preconfiguredEntries": [{ 17 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 18 | "group": { "default": "Other" }, 19 | "title": { "default": "LinkTest" }, 20 | "description": { "default": "LinkTest description" }, 21 | "officeFabricIconFontName": "Page", 22 | "properties": { 23 | "description": "LinkTest" 24 | } 25 | }] 26 | } 27 | -------------------------------------------------------------------------------- /linkfoo/src/webparts/linkTest/LinkTestWebPart.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .linkTest { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /linkfoo/src/webparts/linkTest/LinkTestWebPart.ts: -------------------------------------------------------------------------------- 1 | import { Version } from '@microsoft/sp-core-library'; 2 | import { 3 | BaseClientSideWebPart, 4 | IPropertyPaneConfiguration, 5 | PropertyPaneTextField 6 | } from '@microsoft/sp-webpart-base'; 7 | import { escape } from '@microsoft/sp-lodash-subset'; 8 | 9 | import styles from './LinkTestWebPart.module.scss'; 10 | import * as strings from 'LinkTestWebPartStrings'; 11 | 12 | export interface ILinkTestWebPartProps { 13 | description: string; 14 | } 15 | 16 | export default class LinkTestWebPart extends BaseClientSideWebPart { 17 | 18 | public render(): void { 19 | this.domElement.innerHTML = ` 20 | Root site 21 | `; 22 | } 23 | 24 | protected get dataVersion(): Version { 25 | return Version.parse('1.0'); 26 | } 27 | 28 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 29 | return { 30 | pages: [ 31 | { 32 | header: { 33 | description: strings.PropertyPaneDescription 34 | }, 35 | groups: [ 36 | { 37 | groupName: strings.BasicGroupName, 38 | groupFields: [ 39 | PropertyPaneTextField('description', { 40 | label: strings.DescriptionFieldLabel 41 | }) 42 | ] 43 | } 44 | ] 45 | } 46 | ] 47 | }; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /linkfoo/src/webparts/linkTest/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /linkfoo/src/webparts/linkTest/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ILinkTestWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'LinkTestWebPartStrings' { 8 | const strings: ILinkTestWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /linkfoo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "jsx": "react", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "experimentalDecorators": true, 11 | "skipLibCheck": true, 12 | "typeRoots": [ 13 | "./node_modules/@types", 14 | "./node_modules/@microsoft" 15 | ], 16 | "types": [ 17 | "es6-promise", 18 | "webpack-env" 19 | ], 20 | "lib": [ 21 | "es5", 22 | "dom", 23 | "es2015.collection" 24 | ] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.npmignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | .vscode 3 | coverage 4 | node_modules 5 | sharepoint 6 | src 7 | temp 8 | 9 | # Files 10 | *.csproj 11 | .git* 12 | .yo-rc.json 13 | gulpfile.js 14 | tsconfig.json 15 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib", 13 | "json.schemas": [ 14 | { 15 | "fileMatch": [ 16 | "/config/config.json" 17 | ], 18 | "url": "./node_modules/@microsoft/sp-build-web/lib/schemas/config.schema.json" 19 | }, 20 | { 21 | "fileMatch": [ 22 | "/config/copy-assets.json" 23 | ], 24 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/copy-assets.schema.json" 25 | }, 26 | { 27 | "fileMatch": [ 28 | "/config/deploy-azure-storage.json" 29 | ], 30 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/deployAzureStorage/deploy-azure-storage.schema.json" 31 | }, 32 | { 33 | "fileMatch": [ 34 | "/config/package-solution.json" 35 | ], 36 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/packageSolution/package-solution.schema.json" 37 | }, 38 | { 39 | "fileMatch": [ 40 | "/config/serve.json" 41 | ], 42 | "url": "./node_modules/@microsoft/gulp-core-build-serve/lib/serve.schema.json" 43 | }, 44 | { 45 | "fileMatch": [ 46 | "/config/tslint.json" 47 | ], 48 | "url": "./node_modules/@microsoft/gulp-core-build-typescript/lib/schemas/tslint.schema.json" 49 | }, 50 | { 51 | "fileMatch": [ 52 | "/config/write-manifests.json" 53 | ], 54 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/writeManifests/write-manifests.schema.json" 55 | }, 56 | { 57 | "fileMatch": [ 58 | "/config/configure-webpack.json" 59 | ], 60 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack.schema.json" 61 | }, 62 | { 63 | "fileMatch": [ 64 | "/config/configure-external-bundling-webpack.json" 65 | ], 66 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack-external-bundling.schema.json" 67 | }, 68 | { 69 | "fileMatch": [ 70 | "/copy-static-assets.json" 71 | ], 72 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyStaticAssets/copy-static-assets.schema.json" 73 | } 74 | ] 75 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "version": "1.1.1", 4 | "libraryName": "react-bundle-ui-fabric", 5 | "libraryId": "0b980079-033b-45e9-9895-f376fa00239d", 6 | "environment": "spo" 7 | } 8 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/README.md: -------------------------------------------------------------------------------- 1 | ## react-bundle-ui-fabric 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "entry": "./lib/webparts/reactUiFabricBundling/ReactUiFabricBundlingWebPart.js", 5 | "manifest": "./src/webparts/reactUiFabricBundling/ReactUiFabricBundlingWebPart.manifest.json", 6 | "outputPath": "./dist/react-ui-fabric-bundling.bundle.js" 7 | } 8 | ], 9 | "externals": { 10 | "office-ui-fabric-react": "https://publiccdn.sharepointonline.com/techmikael.sharepoint.com/11510075fe4212d19d3e6d07c91981263dd697bf111cb1e5f0efb15de0ec08b382cde399/2.34.2/office-ui-fabric-react.bundle.min.js" 11 | }, 12 | "localizedResources": { 13 | "reactUiFabricBundlingStrings": "webparts/reactUiFabricBundling/loc/{locale}.js" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "deployCdnPath": "temp/deploy" 3 | } 4 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "workingDir": "./temp/deploy/", 3 | "account": "", 4 | "container": "react-bundle-ui-fabric", 5 | "accessKey": "" 6 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "solution": { 3 | "name": "react-bundle-ui-fabric-client-side-solution", 4 | "id": "0b980079-033b-45e9-9895-f376fa00239d", 5 | "version": "1.0.0.0" 6 | }, 7 | "paths": { 8 | "zippedPackage": "solution/react-bundle-ui-fabric.sppkg" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 4321, 3 | "initialPage": "https://localhost:5432/workbench", 4 | "https": true, 5 | "api": { 6 | "port": 5432, 7 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | // Display errors as warnings 3 | "displayAsWarning": true, 4 | // The TSLint task may have been configured with several custom lint rules 5 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 6 | // project). If true, this flag will deactivate any of these rules. 7 | "removeExistingRules": true, 8 | // When true, the TSLint task is configured with some default TSLint "rules.": 9 | "useDefaultConfigAsBase": false, 10 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 11 | // which are active, other than the list of rules below. 12 | "lintConfig": { 13 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 14 | "rules": { 15 | "class-name": false, 16 | "export-name": false, 17 | "forin": false, 18 | "label-position": false, 19 | "member-access": true, 20 | "no-arg": false, 21 | "no-console": false, 22 | "no-construct": false, 23 | "no-duplicate-case": true, 24 | "no-duplicate-variable": true, 25 | "no-eval": false, 26 | "no-function-expression": true, 27 | "no-internal-module": true, 28 | "no-shadowed-variable": true, 29 | "no-switch-case-fall-through": true, 30 | "no-unnecessary-semicolons": true, 31 | "no-unused-expression": true, 32 | "no-unused-imports": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "cdnBasePath": "" 3 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | 6 | build.initialize(gulp); 7 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bundle-ui-fabric", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "dependencies": { 9 | "@microsoft/sp-core-library": "~1.1.0", 10 | "@microsoft/sp-webpart-base": "~1.1.1", 11 | "@types/react": "0.14.46", 12 | "@types/react-addons-shallow-compare": "0.14.17", 13 | "@types/react-addons-test-utils": "0.14.15", 14 | "@types/react-addons-update": "0.14.14", 15 | "@types/react-dom": "0.14.18", 16 | "@types/webpack-env": ">=1.12.1 <1.14.0", 17 | "office-ui-fabric-react": "^2.34.2", 18 | "react": "15.4.2", 19 | "react-dom": "15.4.2" 20 | }, 21 | "devDependencies": { 22 | "@microsoft/sp-build-web": "~1.1.0", 23 | "@microsoft/sp-module-interfaces": "~1.1.0", 24 | "@microsoft/sp-webpart-workbench": "~1.1.0", 25 | "gulp": "~3.9.1", 26 | "@types/chai": ">=3.4.34 <3.6.0", 27 | "@types/mocha": ">=2.2.33 <2.6.0" 28 | }, 29 | "scripts": { 30 | "build": "gulp bundle", 31 | "clean": "gulp clean", 32 | "test": "gulp test" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/IReactUiFabricBundlingWebPartProps.ts: -------------------------------------------------------------------------------- 1 | export interface IReactUiFabricBundlingWebPartProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/ReactUiFabricBundlingWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", 3 | 4 | "id": "7dd235fe-2279-44e5-9e94-4d39538c9dde", 5 | "alias": "ReactUiFabricBundlingWebPart", 6 | "componentType": "WebPart", 7 | "version": "*", // The "*" signifies that the version should be taken from the package.json 8 | "manifestVersion": 2, 9 | 10 | /** 11 | * This property should only be set to true if it is certain that the webpart does not 12 | * allow arbitrary scripts to be called 13 | */ 14 | "safeWithCustomScriptDisabled": false, 15 | 16 | "preconfiguredEntries": [{ 17 | "groupId": "7dd235fe-2279-44e5-9e94-4d39538c9dde", 18 | "group": { "default": "Under Development" }, 19 | "title": { "default": "React UI Fabric Bundling" }, 20 | "description": { "default": "Show how to CDN UI fabric" }, 21 | "officeFabricIconFontName": "Page", 22 | "properties": { 23 | "description": "React UI Fabric Bundling" 24 | } 25 | }] 26 | } 27 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/ReactUiFabricBundlingWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-webpart-base'; 9 | 10 | import * as strings from 'reactUiFabricBundlingStrings'; 11 | import ReactUiFabricBundling from './components/ReactUiFabricBundling'; 12 | import { IReactUiFabricBundlingProps } from './components/IReactUiFabricBundlingProps'; 13 | import { IReactUiFabricBundlingWebPartProps } from './IReactUiFabricBundlingWebPartProps'; 14 | 15 | export default class ReactUiFabricBundlingWebPart extends BaseClientSideWebPart { 16 | 17 | public render(): void { 18 | const element: React.ReactElement = React.createElement( 19 | ReactUiFabricBundling, 20 | { 21 | description: this.properties.description 22 | } 23 | ); 24 | 25 | ReactDom.render(element, this.domElement); 26 | } 27 | 28 | protected get dataVersion(): Version { 29 | return Version.parse('1.0'); 30 | } 31 | 32 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 33 | return { 34 | pages: [ 35 | { 36 | header: { 37 | description: strings.PropertyPaneDescription 38 | }, 39 | groups: [ 40 | { 41 | groupName: strings.BasicGroupName, 42 | groupFields: [ 43 | PropertyPaneTextField('description', { 44 | label: strings.DescriptionFieldLabel 45 | }) 46 | ] 47 | } 48 | ] 49 | } 50 | ] 51 | }; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/components/IReactUiFabricBundlingProps.ts: -------------------------------------------------------------------------------- 1 | export interface IReactUiFabricBundlingProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/components/ReactUiFabricBundling.module.scss: -------------------------------------------------------------------------------- 1 | .reactUiFabricBundling { 2 | .container { 3 | max-width: 700px; 4 | margin: 0px auto; 5 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 6 | } 7 | 8 | .row { 9 | padding: 20px; 10 | } 11 | 12 | .listItem { 13 | max-width: 715px; 14 | margin: 5px auto 5px auto; 15 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 16 | } 17 | 18 | .button { 19 | // Our button 20 | text-decoration: none; 21 | height: 32px; 22 | 23 | // Primary Button 24 | min-width: 80px; 25 | background-color: #0078d7; 26 | border-color: #0078d7; 27 | color: #ffffff; 28 | 29 | // Basic Button 30 | outline: transparent; 31 | position: relative; 32 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 33 | -webkit-font-smoothing: antialiased; 34 | font-size: 14px; 35 | font-weight: 400; 36 | border-width: 0; 37 | text-align: center; 38 | cursor: pointer; 39 | display: inline-block; 40 | padding: 0 16px; 41 | 42 | .label { 43 | font-weight: 600; 44 | font-size: 14px; 45 | height: 32px; 46 | line-height: 32px; 47 | margin: 0 4px; 48 | vertical-align: top; 49 | display: inline-block; 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/components/ReactUiFabricBundling.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './ReactUiFabricBundling.module.scss'; 3 | import { IReactUiFabricBundlingProps } from './IReactUiFabricBundlingProps'; 4 | import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react'; 5 | import { loadStyles } from '@microsoft/load-themed-styles'; 6 | 7 | export default class ReactUiFabricBundling extends React.Component { 8 | // Added constructor to load and process CSS async 9 | constructor() { 10 | super(); 11 | this.loadCss(); 12 | } 13 | 14 | public async loadCss() { 15 | // Check if custom Fabric CSS is loaded 16 | if (window["UIFabricLoaded"]) { 17 | return; 18 | } 19 | window["UIFabricLoaded"] = true; 20 | 21 | // Load Fabric CSS from CDN 22 | let fabricCSSUrl = 'https://publiccdn.sharepointonline.com/techmikael.sharepoint.com/11510075fe4212d19d3e6d07c91981263dd697bf111cb1e5f0efb15de0ec08b382cde399/5.0.1/office-ui-fabric.min.css'; 23 | const response = await fetch(fabricCSSUrl, { mode: 'cors' }); 24 | if (response.ok) { 25 | response.text().then((data: string) => { 26 | // Process theme tokens 27 | loadStyles(data); 28 | // Reload webpart 29 | this.forceUpdate(); 30 | }); 31 | } 32 | } 33 | 34 | public render(): React.ReactElement { 35 | // Don't render until CSS is loaded 36 | if (!window["UIFabricLoaded"]) { 37 | return ; 38 | } 39 | 40 | return ( 41 |
42 |
43 | {/* Site theme */} 44 |
45 |
46 | 47 |
48 |
49 | {/* Tenant theme */} 50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | ); 58 | } 59 | } -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IReactUiFabricBundlingStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'reactUiFabricBundlingStrings' { 8 | const strings: IReactUiFabricBundlingStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/src/webparts/reactUiFabricBundling/tests/ReactUiFabricBundling.test.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { assert } from 'chai'; 4 | 5 | describe('ReactUiFabricBundlingWebPart', () => { 6 | it('should do something', () => { 7 | assert.ok(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "declaration": true, 8 | "sourceMap": true, 9 | "experimentalDecorators": true, 10 | "types": [ 11 | "es6-promise", 12 | "es6-collections", 13 | "webpack-env" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /react-bundle-ui-fabric/typings/@ms/odsp.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for Microsoft ODSP projects 2 | // Project: ODSP 3 | 4 | /* Global definition for UNIT_TEST builds 5 | Code that is wrapped inside an if(UNIT_TEST) {...} 6 | block will not be included in the final bundle when the 7 | --ship flag is specified */ 8 | declare const UNIT_TEST: boolean; 9 | 10 | /* Global defintion for SPO builds */ 11 | declare const DATACENTER: boolean; -------------------------------------------------------------------------------- /react-bundle-ui-fabric/typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-pageexttest/src/extensions/customizerTest/CustomizerTestApplicationCustomizer.ts: -------------------------------------------------------------------------------- 1 | import { override } from '@microsoft/decorators'; 2 | import { Log } from '@microsoft/sp-core-library'; 3 | import { 4 | BaseApplicationCustomizer, 5 | Placeholder 6 | } from '@microsoft/sp-application-base'; 7 | 8 | import * as strings from 'customizerTestStrings'; 9 | 10 | const LOG_SOURCE: string = 'CustomizerTestApplicationCustomizer'; 11 | 12 | /** 13 | * If your command set uses the ClientSideComponentProperties JSON input, 14 | * it will be deserialized into the BaseExtension.properties object. 15 | * You can define an interface to describe it. 16 | */ 17 | export interface ICustomizerTestApplicationCustomizerProperties { 18 | // This is an example; replace with your own property 19 | testMessage: string; 20 | } 21 | 22 | /** A Custom Action which can be run during execution of a Client Side Application */ 23 | export default class CustomizerTestApplicationCustomizer 24 | extends BaseApplicationCustomizer { 25 | 26 | private _headerPlaceholder: Placeholder; 27 | 28 | @override 29 | public onInit(): Promise { 30 | Log.info(LOG_SOURCE, `Initialized ${strings.Title}`); 31 | return Promise.resolve(); 32 | } 33 | 34 | @override 35 | public onRender(): void { 36 | let message: string = this.properties.testMessage; 37 | if (!message) { 38 | message = '(No properties were provided.)'; 39 | } 40 | 41 | alert(`Hello from ${strings.Title}:\n\n${message}`); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /react-pageheaderconfigurator/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /react-pageheaderconfigurator/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/.npmignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | .vscode 3 | coverage 4 | node_modules 5 | sharepoint 6 | src 7 | temp 8 | 9 | # Files 10 | *.csproj 11 | .git* 12 | .yo-rc.json 13 | gulpfile.js 14 | tsconfig.json 15 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "libraryName": "pzl-site-page-header", 4 | "framework": "react", 5 | "version": "1.0.0", 6 | "libraryId": "ed347d47-519f-4f4c-b933-f1a1ec815f56" 7 | } 8 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/README.md: -------------------------------------------------------------------------------- 1 | # Modern page header configurator and custom property pane color picker control built in React 2 | 3 | ## Summary 4 | A web part to be added to modern site pages to allow configuration of the page banner. The web part allows you to pick the banner size or hide it, override the default background graphics, and change the page headline color. 5 | 6 | *Note: This web part injects CSS into the page to override the default CSS provided by a modern page. If the default CSS changes, this web part will no longer work. It is the wish of the author that Microsoft adds this capability as part of a modern page.* 7 | 8 | 9 | ![site page header configurator web part](./assets/site-page-header-configurator.gif) 10 | 11 | ## Used SharePoint Framework Version 12 | ![drop](https://img.shields.io/badge/drop-GA-green.svg) 13 | 14 | ## Applies to 15 | 16 | * [SharePoint Framework Release 1](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) 17 | * Modern site pages in SharePoint Online 18 | 19 | ## Solution 20 | 21 | Solution|Author(s) 22 | --------|--------- 23 | page header configurator | Mikael Svenson ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com)) 24 | 25 | ## Version history 26 | 27 | Version|Date|Comments 28 | -------|----|-------- 29 | 1.0|March 7th, 2017|Initial release 30 | 31 | ## Disclaimer 32 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 33 | 34 | --- 35 | 36 | ## Minimal Path to Awesome 37 | 38 | - Clone this repository 39 | - In the command line run: 40 | - `npm install` 41 | - `gulp clean` 42 | - `gulp` 43 | - `gulp package-solution` 44 | - [Deploy the package to the App catalog and install on a site](https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page) 45 | 46 | ## Features 47 | This web part illustrates the following concepts on top of the SharePoint Framework: 48 | 49 | - Creating a color picker as a custom property pane control 50 | - Office UI Fabric 51 | - React -------------------------------------------------------------------------------- /react-pageheaderconfigurator/assets/site-page-header-configurator.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wobba/spfx4fun/fd308b8089e026d6671f895212688415a62b6ba3/react-pageheaderconfigurator/assets/site-page-header-configurator.gif -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "entry": "./lib/webparts/sitePageHeaderConfigurator/SitePageHeaderConfiguratorWebPart.js", 5 | "manifest": "./src/webparts/sitePageHeaderConfigurator/SitePageHeaderConfiguratorWebPart.manifest.json", 6 | "outputPath": "./dist/site-page-header-configurator.bundle.js" 7 | } 8 | ], 9 | "externals": {}, 10 | "localizedResources": { 11 | "sitePageHeaderConfiguratorStrings": "webparts/sitePageHeaderConfigurator/loc/{locale}.js" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "deployCdnPath": "temp/deploy" 3 | } 4 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "workingDir": "./temp/deploy/", 3 | "account": "", 4 | "container": "pzl-site-page-header", 5 | "accessKey": "" 6 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "solution": { 3 | "name": "Site page header configurator by Puzzlepart", 4 | "id": "ed347d47-519f-4f4c-b933-f1a1ec815f56", 5 | "version": "1.0.0.0" 6 | }, 7 | "paths": { 8 | "zippedPackage": "solution/pzl-site-page-header.sppkg" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 4321, 3 | "initialPage": "https://localhost:5432/workbench", 4 | "https": true, 5 | "api": { 6 | "port": 5432, 7 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | // Display errors as warnings 3 | "displayAsWarning": true, 4 | // The TSLint task may have been configured with several custom lint rules 5 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 6 | // project). If true, this flag will deactivate any of these rules. 7 | "removeExistingRules": true, 8 | // When true, the TSLint task is configured with some default TSLint "rules.": 9 | "useDefaultConfigAsBase": false, 10 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 11 | // which are active, other than the list of rules below. 12 | "lintConfig": { 13 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 14 | "rules": { 15 | "class-name": false, 16 | "export-name": false, 17 | "forin": false, 18 | "label-position": false, 19 | "member-access": true, 20 | "no-arg": false, 21 | "no-console": false, 22 | "no-construct": false, 23 | "no-duplicate-case": true, 24 | "no-duplicate-variable": true, 25 | "no-eval": false, 26 | "no-function-expression": true, 27 | "no-internal-module": true, 28 | "no-shadowed-variable": true, 29 | "no-switch-case-fall-through": true, 30 | "no-unnecessary-semicolons": true, 31 | "no-unused-expression": true, 32 | "no-unused-imports": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false, 43 | "prefer-const": true 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "cdnBasePath": "" 3 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | 6 | build.initialize(gulp); 7 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pzl-site-page-header", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "dependencies": { 9 | "@microsoft/sp-client-base": "~1.0.0", 10 | "@microsoft/sp-core-library": "~1.0.0", 11 | "@microsoft/sp-webpart-base": "~1.0.0", 12 | "@types/react": "0.14.46", 13 | "@types/react-addons-shallow-compare": "0.14.17", 14 | "@types/react-addons-test-utils": "0.14.15", 15 | "@types/react-addons-update": "0.14.14", 16 | "@types/react-dom": "0.14.18", 17 | "@types/webpack-env": ">=1.12.1 <1.14.0", 18 | "react": "15.4.2", 19 | "react-dom": "15.4.2" 20 | }, 21 | "devDependencies": { 22 | "@microsoft/sp-build-web": "~1.0.0", 23 | "@microsoft/sp-module-interfaces": "~1.0.0", 24 | "@microsoft/sp-webpart-workbench": "~1.0.0", 25 | "gulp": "~3.9.1", 26 | "@types/chai": ">=3.4.34 <3.6.0", 27 | "@types/mocha": ">=2.2.33 <2.6.0" 28 | }, 29 | "scripts": { 30 | "build": "gulp bundle", 31 | "clean": "gulp clean", 32 | "test": "gulp test" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/controls/PropertyPaneColorPicker/IPropertyPaneColorPickerInternalProps.ts: -------------------------------------------------------------------------------- 1 | import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base'; 2 | import { IPropertyPaneColorPickerProps } from './IPropertyPaneColorPickerProps'; 3 | 4 | export interface IPropertyPaneColorPickerInternalProps extends IPropertyPaneColorPickerProps, IPropertyPaneCustomFieldProps { 5 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/controls/PropertyPaneColorPicker/IPropertyPaneColorPickerProps.ts: -------------------------------------------------------------------------------- 1 | export interface IPropertyPaneColorPickerProps { 2 | label: string; 3 | onPropertyChange: (propertyPath: string, newValue: any) => void; 4 | selectedColor: string; 5 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/controls/PropertyPaneColorPicker/PropertyPaneColorPicker.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { 4 | IPropertyPaneField, 5 | PropertyPaneFieldType 6 | } from '@microsoft/sp-webpart-base'; 7 | import { IPropertyPaneColorPickerProps } from './IPropertyPaneColorPickerProps'; 8 | import { IPropertyPaneColorPickerInternalProps } from './IPropertyPaneColorPickerInternalProps'; 9 | import ColorPickerCtrl from './components/ColorPickerCtrl'; 10 | import { IColorPickerCtrlProps } from './components/IColorPickerCtrlProps'; 11 | 12 | export class PropertyPaneColorPicker implements IPropertyPaneField { 13 | public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom; 14 | public targetProperty: string; 15 | public properties: IPropertyPaneColorPickerInternalProps; 16 | private elem: HTMLElement; 17 | 18 | constructor(targetProperty: string, properties: IPropertyPaneColorPickerProps) { 19 | this.targetProperty = targetProperty; 20 | this.properties = { 21 | key: "custom", 22 | label: properties.label, 23 | onPropertyChange: properties.onPropertyChange, 24 | selectedColor: properties.selectedColor, 25 | onRender: this.onRender.bind(this) 26 | }; 27 | } 28 | 29 | public render(): void { 30 | if (!this.elem) { 31 | return; 32 | } 33 | 34 | this.onRender(this.elem); 35 | } 36 | 37 | private onRender(elem: HTMLElement): void { 38 | if (!this.elem) { 39 | this.elem = elem; 40 | } 41 | 42 | const element: React.ReactElement = React.createElement(ColorPickerCtrl, { 43 | label: this.properties.label, 44 | onColorChanged: this.onColorChanged.bind(this), 45 | color: this.properties.selectedColor 46 | }); 47 | ReactDom.render(element, elem); 48 | } 49 | 50 | private onColorChanged(color: string): void { 51 | this.properties.onPropertyChange(this.targetProperty, color); 52 | } 53 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/controls/PropertyPaneColorPicker/components/ColorPickerCtrl.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ColorPicker, Label } from 'office-ui-fabric-react'; 3 | import { IColorPickerCtrlProps } from './IColorPickerCtrlProps'; 4 | 5 | export default class ColorPickerCtrl extends React.Component { 6 | constructor(props: IColorPickerCtrlProps) { 7 | super(props); 8 | } 9 | 10 | public render(): JSX.Element { 11 | if (this.props.color == null || this.props.color == '') { 12 | this.props.color = "#333333"; 13 | } 14 | 15 | return ( 16 |
17 | 18 | 19 |
20 | ); 21 | } 22 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/controls/PropertyPaneColorPicker/components/IColorPickerCtrlProps.ts: -------------------------------------------------------------------------------- 1 | import { IColorPickerProps } from 'office-ui-fabric-react'; 2 | 3 | export interface IColorPickerCtrlProps extends IColorPickerProps { 4 | label: string; 5 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/HeaderSize.ts: -------------------------------------------------------------------------------- 1 | export enum HeaderSize { Large = 1, Medium, Small, None } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/ISitePageHeaderConfiguratorWebPartProps.ts: -------------------------------------------------------------------------------- 1 | import { HeaderSize } from './HeaderSize'; 2 | 3 | export interface ISitePageHeaderConfiguratorWebPartProps { 4 | headerSize: HeaderSize; 5 | headerGfx: string; 6 | headerFontColor: string; 7 | } 8 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/SitePageHeaderConfiguratorWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", 3 | "id": "ed5bdd3b-c869-4d76-9cd3-0de041339898", 4 | "alias": "SitePageHeaderConfiguratorWebPart", 5 | "componentType": "WebPart", 6 | "version": "0.0.1", 7 | "manifestVersion": 2, 8 | "preconfiguredEntries": [ 9 | { 10 | "groupId": "ed5bdd3b-c869-4d76-9cd3-0de041339898", 11 | "group": { 12 | "default": "Page Improvements" 13 | }, 14 | "title": { 15 | "default": "Page header configurator" 16 | }, 17 | "description": { 18 | "default": "Configure how to display the header of a site page" 19 | }, 20 | "officeFabricIconFontName": "AutoEnhanceOn", 21 | "properties": { 22 | "headerSize": 1, 23 | "headerGfx": "", 24 | "headerFontColor": "#333333" 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/SitePageHeaderConfiguratorWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version, DisplayMode } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField, 8 | PropertyPaneChoiceGroup 9 | } from '@microsoft/sp-webpart-base'; 10 | 11 | import * as strings from 'sitePageHeaderConfiguratorStrings'; 12 | import SitePageHeaderConfiguratorEdit from './components/SitePageHeaderConfiguratorEdit'; 13 | import SitePageHeaderConfiguratorView from './components/SitePageHeaderConfiguratorView'; 14 | import { ISitePageHeaderConfiguratorProps } from './components/ISitePageHeaderConfiguratorProps'; 15 | import { ISitePageHeaderConfiguratorWebPartProps } from './ISitePageHeaderConfiguratorWebPartProps'; 16 | import { PropertyPaneColorPicker } from '../../controls/PropertyPaneColorPicker/PropertyPaneColorPicker'; 17 | import { update, get } from '@microsoft/sp-lodash-subset'; 18 | 19 | export default class SitePageHeaderConfiguratorWebPart extends BaseClientSideWebPart { 20 | 21 | private onListChange(propertyPath: string, newValue: any): void { 22 | const oldValue: any = get(this.properties, propertyPath); 23 | // store new value in web part properties 24 | update(this.properties, propertyPath, (): any => { return newValue; }); 25 | // refresh web part 26 | this.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue); 27 | } 28 | 29 | public render(): void { 30 | const editElement: React.ReactElement = React.createElement( 31 | SitePageHeaderConfiguratorEdit, 32 | { 33 | headerSize: this.properties.headerSize, 34 | headerGfx: this.properties.headerGfx, 35 | headerFontColor: this.properties.headerFontColor 36 | } 37 | ); 38 | 39 | const viewElement: React.ReactElement = React.createElement( 40 | SitePageHeaderConfiguratorView, 41 | { 42 | headerSize: this.properties.headerSize, 43 | headerGfx: this.properties.headerGfx, 44 | headerFontColor: this.properties.headerFontColor 45 | } 46 | ); 47 | 48 | 49 | if (this.displayMode == DisplayMode.Edit) { 50 | ReactDom.render(editElement, this.domElement); 51 | } else { 52 | ReactDom.render(viewElement, this.domElement); 53 | } 54 | } 55 | 56 | protected get dataVersion(): Version { 57 | return Version.parse('1.0'); 58 | } 59 | 60 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 61 | return { 62 | pages: [ 63 | { 64 | groups: [ 65 | { 66 | groupFields: [ 67 | PropertyPaneChoiceGroup('headerSize', 68 | { 69 | label: "Header size", 70 | options: [{ key: 1, text: strings.Large }, { key: 2, text: strings.Medium }, { key: 3, text: strings.Small }, { key: 4, text: strings.None }] 71 | } 72 | ), 73 | 74 | PropertyPaneTextField('headerGfx', { 75 | label: "URL", 76 | description: "URL to header graphics Graphics (will be scaled)" 77 | }) 78 | , 79 | 80 | new PropertyPaneColorPicker('headerFontColor', { 81 | label: "Headline color", 82 | onPropertyChange: this.onListChange.bind(this), 83 | selectedColor: this.properties.headerFontColor 84 | }) 85 | ] 86 | } 87 | ] 88 | } 89 | ] 90 | }; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/components/ISitePageHeaderConfiguratorProps.ts: -------------------------------------------------------------------------------- 1 | import { HeaderSize } from '../HeaderSize'; 2 | 3 | export interface ISitePageHeaderConfiguratorProps { 4 | headerSize: HeaderSize; 5 | headerGfx: string; 6 | headerFontColor: string; 7 | } 8 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/components/SitePageHeaderConfigurator.module.scss: -------------------------------------------------------------------------------- 1 | .helloWorld { 2 | .container { 3 | max-width: 700px; 4 | margin: 0px auto; 5 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 6 | } 7 | 8 | .row { 9 | padding: 20px; 10 | } 11 | 12 | .listItem { 13 | max-width: 715px; 14 | margin: 5px auto 5px auto; 15 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 16 | } 17 | 18 | .button { 19 | // Our button 20 | text-decoration: none; 21 | height: 32px; 22 | 23 | // Primary Button 24 | min-width: 80px; 25 | background-color: #0078d7; 26 | border-color: #0078d7; 27 | color: #ffffff; 28 | 29 | // Basic Button 30 | outline: transparent; 31 | position: relative; 32 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 33 | -webkit-font-smoothing: antialiased; 34 | font-size: 14px; 35 | font-weight: 400; 36 | border-width: 0; 37 | text-align: center; 38 | cursor: pointer; 39 | display: inline-block; 40 | padding: 0 16px; 41 | 42 | .label { 43 | font-weight: 600; 44 | font-size: 14px; 45 | height: 32px; 46 | line-height: 32px; 47 | margin: 0 4px; 48 | vertical-align: top; 49 | display: inline-block; 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/components/SitePageHeaderConfiguratorEdit.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './SitePageHeaderConfigurator.module.scss'; 3 | import { ISitePageHeaderConfiguratorProps } from './ISitePageHeaderConfiguratorProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | import { HeaderSize } from '../HeaderSize'; 6 | import SitePageHeaderConfiguratorView from './SitePageHeaderConfiguratorView'; 7 | 8 | export default class SitePageHeaderConfiguratorEdit extends React.Component { 9 | public render(): React.ReactElement { 10 | let gfxSetting = ; 11 | 12 | if (this.props.headerFontColor == null || this.props.headerFontColor == '') { 13 | this.props.headerFontColor = "#333333"; 14 | } 15 | 16 | const viewElement: React.ReactElement = React.createElement( 17 | SitePageHeaderConfiguratorView, 18 | { 19 | headerSize: this.props.headerSize, 20 | headerGfx: this.props.headerGfx, 21 | headerFontColor: this.props.headerFontColor 22 | } 23 | ); 24 | 25 | const headlineColorStyle = { 26 | backgroundColor: this.props.headerFontColor, 27 | height: '15px', 28 | width: '15px', 29 | display: 'inline-block', 30 | margin: '0px 10px', 31 | position: 'absolute', 32 | border: 'solid 1px white' 33 | }; 34 | 35 | if (this.props.headerGfx != null && this.props.headerGfx.indexOf('https://') >= 0) { 36 | gfxSetting =

37 |

Header background graphics
38 |
{escape(this.props.headerGfx)}
39 |

; 40 | } 41 | 42 | return ( 43 |
44 |
45 |
46 |
47 | Page header settings 48 |

49 |

Header size
50 |
{HeaderSize[this.props.headerSize]}
51 |

52 |

53 |

Headline color
54 |
{this.props.headerFontColor} 55 |
56 |
57 |

58 | {gfxSetting} 59 |
60 |
61 |
62 | {viewElement} 63 |
64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/components/SitePageHeaderConfiguratorView.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ISitePageHeaderConfiguratorProps } from './ISitePageHeaderConfiguratorProps'; 3 | import { HeaderSize } from '../HeaderSize'; 4 | 5 | export default class SitePageHeaderConfiguratorView extends React.Component { 6 | public render(): React.ReactElement { 7 | let gfxOverrideStyle: string = ""; 8 | let headerHeight: number; 9 | if (this.props.headerSize == HeaderSize.Medium) { 10 | headerHeight = 114; 11 | } else if (this.props.headerSize == HeaderSize.Small) { 12 | headerHeight = 70; 13 | } else if (this.props.headerSize == HeaderSize.None) { 14 | headerHeight = 0; 15 | } 16 | 17 | let headerStyle: string = ` 18 | .pageHeader .headerTitleText { 19 | color: ${this.props.headerFontColor} !important 20 | } 21 | `; 22 | if (this.props.headerSize != HeaderSize.Large) { 23 | headerStyle += ` 24 | .pageHeader { 25 | height: ${headerHeight}px !important; 26 | } 27 | `; 28 | } 29 | 30 | if (this.props.headerSize != HeaderSize.None 31 | && this.props.headerGfx != null 32 | && this.props.headerGfx.indexOf('https://') >= 0) { 33 | gfxOverrideStyle = ` 34 | .pageHeader { 35 | background-image: url(${this.props.headerGfx}) !important 36 | } 37 | .pageHeader:not(.pageHeaderEdit):before { 38 | background-image: url(${this.props.headerGfx}) 39 | } 40 | `; 41 | } 42 | 43 | return ( 44 | 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field", 6 | "Large" : "Large", 7 | "Medium" : "Medium", 8 | "Small" : "Small", 9 | "None" : "None", 10 | } 11 | }); -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ISitePageHeaderConfiguratorStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | Large: string; 6 | Medium: string; 7 | Small: string; 8 | None: string; 9 | } 10 | 11 | declare module 'sitePageHeaderConfiguratorStrings' { 12 | const strings: ISitePageHeaderConfiguratorStrings; 13 | export = strings; 14 | } 15 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/src/webparts/sitePageHeaderConfigurator/tests/SitePageHeaderConfigurator.test.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { assert } from 'chai'; 4 | 5 | describe('SitePageHeaderConfiguratorWebPart', () => { 6 | it('should do something', () => { 7 | assert.ok(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "declaration": true, 8 | "sourceMap": true, 9 | "types": [ 10 | "es6-promise", 11 | "es6-collections", 12 | "webpack-env" 13 | ] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react-pageheaderconfigurator/typings/@ms/odsp.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for Microsoft ODSP projects 2 | // Project: ODSP 3 | 4 | /* Global definition for UNIT_TEST builds 5 | Code that is wrapped inside an if(UNIT_TEST) {...} 6 | block will not be included in the final bundle when the 7 | --ship flag is specified */ 8 | declare const UNIT_TEST: boolean; -------------------------------------------------------------------------------- /react-pageheaderconfigurator/typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-taxonomy-rest/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /react-taxonomy-rest/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /react-taxonomy-rest/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /react-taxonomy-rest/.npmignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | .vscode 3 | coverage 4 | node_modules 5 | sharepoint 6 | src 7 | temp 8 | 9 | # Files 10 | *.csproj 11 | .git* 12 | .yo-rc.json 13 | gulpfile.js 14 | tsconfig.json 15 | -------------------------------------------------------------------------------- /react-taxonomy-rest/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib", 13 | "json.schemas": [ 14 | { 15 | "fileMatch": [ 16 | "/config/config.json" 17 | ], 18 | "url": "./node_modules/@microsoft/sp-build-web/lib/schemas/config.schema.json" 19 | }, 20 | { 21 | "fileMatch": [ 22 | "/config/copy-assets.json" 23 | ], 24 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/copy-assets.schema.json" 25 | }, 26 | { 27 | "fileMatch": [ 28 | "/config/deploy-azure-storage.json" 29 | ], 30 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/deployAzureStorage/deploy-azure-storage.schema.json" 31 | }, 32 | { 33 | "fileMatch": [ 34 | "/config/package-solution.json" 35 | ], 36 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/packageSolution/package-solution.schema.json" 37 | }, 38 | { 39 | "fileMatch": [ 40 | "/config/serve.json" 41 | ], 42 | "url": "./node_modules/@microsoft/gulp-core-build-serve/lib/serve.schema.json" 43 | }, 44 | { 45 | "fileMatch": [ 46 | "/config/tslint.json" 47 | ], 48 | "url": "./node_modules/@microsoft/gulp-core-build-typescript/lib/schemas/tslint.schema.json" 49 | }, 50 | { 51 | "fileMatch": [ 52 | "/config/write-manifests.json" 53 | ], 54 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/writeManifests/write-manifests.schema.json" 55 | }, 56 | { 57 | "fileMatch": [ 58 | "/config/configure-webpack.json" 59 | ], 60 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack.schema.json" 61 | }, 62 | { 63 | "fileMatch": [ 64 | "/config/configure-external-bundling-webpack.json" 65 | ], 66 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack-external-bundling.schema.json" 67 | }, 68 | { 69 | "fileMatch": [ 70 | "/copy-static-assets.json" 71 | ], 72 | "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyStaticAssets/copy-static-assets.schema.json" 73 | } 74 | ] 75 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "version": "1.1.1", 4 | "libraryName": "react-taxonomy-rest", 5 | "libraryId": "ff3aa7c2-b6eb-4ef1-9234-1aa837e58729", 6 | "environment": "spo" 7 | } 8 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/README.md: -------------------------------------------------------------------------------- 1 | ## react-taxonomy-rest 2 | 3 | Sample web part working with managed metadata over REST 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /react-taxonomy-rest/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "entry": "./lib/webparts/taxonomyRestSample/TaxonomyRestSampleWebPart.js", 5 | "manifest": "./src/webparts/taxonomyRestSample/TaxonomyRestSampleWebPart.manifest.json", 6 | "outputPath": "./dist/taxonomy-rest-sample.bundle.js" 7 | } 8 | ], 9 | "externals": {}, 10 | "localizedResources": { 11 | "taxonomyRestSampleStrings": "webparts/taxonomyRestSample/loc/{locale}.js" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /react-taxonomy-rest/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "deployCdnPath": "temp/deploy" 3 | } 4 | -------------------------------------------------------------------------------- /react-taxonomy-rest/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "workingDir": "./temp/deploy/", 3 | "account": "", 4 | "container": "react-taxonomy-rest", 5 | "accessKey": "" 6 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "solution": { 3 | "name": "react-taxonomy-rest-client-side-solution", 4 | "id": "ff3aa7c2-b6eb-4ef1-9234-1aa837e58729", 5 | "version": "1.0.0.0" 6 | }, 7 | "paths": { 8 | "zippedPackage": "solution/react-taxonomy-rest.sppkg" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react-taxonomy-rest/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 4321, 3 | "initialPage": "https://localhost:5432/workbench", 4 | "https": true, 5 | "api": { 6 | "port": 5432, 7 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react-taxonomy-rest/config/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | // Display errors as warnings 3 | "displayAsWarning": true, 4 | // The TSLint task may have been configured with several custom lint rules 5 | // before this config file is read (for example lint rules from the tslint-microsoft-contrib 6 | // project). If true, this flag will deactivate any of these rules. 7 | "removeExistingRules": true, 8 | // When true, the TSLint task is configured with some default TSLint "rules.": 9 | "useDefaultConfigAsBase": false, 10 | // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules 11 | // which are active, other than the list of rules below. 12 | "lintConfig": { 13 | // Opt-in to Lint rules which help to eliminate bugs in JavaScript 14 | "rules": { 15 | "class-name": false, 16 | "export-name": false, 17 | "forin": false, 18 | "label-position": false, 19 | "member-access": true, 20 | "no-arg": false, 21 | "no-console": false, 22 | "no-construct": false, 23 | "no-duplicate-case": true, 24 | "no-duplicate-variable": true, 25 | "no-eval": false, 26 | "no-function-expression": true, 27 | "no-internal-module": true, 28 | "no-shadowed-variable": true, 29 | "no-switch-case-fall-through": true, 30 | "no-unnecessary-semicolons": true, 31 | "no-unused-expression": true, 32 | "no-unused-imports": true, 33 | "no-use-before-declare": true, 34 | "no-with-statement": true, 35 | "semicolon": true, 36 | "trailing-comma": false, 37 | "typedef": false, 38 | "typedef-whitespace": false, 39 | "use-named-parameter": true, 40 | "valid-typeof": true, 41 | "variable-name": false, 42 | "whitespace": false 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "cdnBasePath": "" 3 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | 6 | build.initialize(gulp); 7 | -------------------------------------------------------------------------------- /react-taxonomy-rest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-taxonomy-rest", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "dependencies": { 9 | "@microsoft/sp-core-library": "~1.1.0", 10 | "@microsoft/sp-webpart-base": "~1.1.1", 11 | "@types/webpack-env": ">=1.12.1 <1.14.0", 12 | "react": "15.4.2", 13 | "react-dom": "15.4.2", 14 | "@types/react": "0.14.46", 15 | "@types/react-dom": "0.14.18", 16 | "@types/react-addons-shallow-compare": "0.14.17", 17 | "@types/react-addons-update": "0.14.14", 18 | "@types/react-addons-test-utils": "0.14.15" 19 | }, 20 | "devDependencies": { 21 | "@microsoft/sp-build-web": "~1.1.0", 22 | "@microsoft/sp-module-interfaces": "~1.1.0", 23 | "@microsoft/sp-webpart-workbench": "~1.1.0", 24 | "gulp": "~3.9.1", 25 | "@types/chai": ">=3.4.34 <3.6.0", 26 | "@types/mocha": ">=2.2.33 <2.6.0" 27 | }, 28 | "scripts": { 29 | "build": "gulp bundle", 30 | "clean": "gulp clean", 31 | "test": "gulp test" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/ITaxonomyRestSampleWebPartProps.ts: -------------------------------------------------------------------------------- 1 | export interface ITaxonomyRestSampleWebPartProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/TaxonomyRestSampleWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", 3 | 4 | "id": "f35c66ff-b725-4f5e-a85d-c4a695b0b04a", 5 | "alias": "TaxonomyRestSampleWebPart", 6 | "componentType": "WebPart", 7 | "version": "*", // The "*" signifies that the version should be taken from the package.json 8 | "manifestVersion": 2, 9 | 10 | /** 11 | * This property should only be set to true if it is certain that the webpart does not 12 | * allow arbitrary scripts to be called 13 | */ 14 | "safeWithCustomScriptDisabled": false, 15 | 16 | "preconfiguredEntries": [{ 17 | "groupId": "f35c66ff-b725-4f5e-a85d-c4a695b0b04a", 18 | "group": { "default": "Under Development" }, 19 | "title": { "default": "Taxonomy REST Sample" }, 20 | "description": { "default": "Taxonomy REST Sample description" }, 21 | "officeFabricIconFontName": "Page", 22 | "properties": { 23 | "description": "Taxonomy REST Sample" 24 | } 25 | }] 26 | } 27 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/TaxonomyRestSampleWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-webpart-base'; 9 | 10 | import * as strings from 'taxonomyRestSampleStrings'; 11 | import TaxonomyRestSample from './components/TaxonomyRestSample'; 12 | import { ITaxonomyRestSampleProps } from './components/ITaxonomyRestSampleProps'; 13 | import { ITaxonomyRestSampleWebPartProps } from './ITaxonomyRestSampleWebPartProps'; 14 | 15 | export default class TaxonomyRestSampleWebPart extends BaseClientSideWebPart { 16 | 17 | public render(): void { 18 | const element: React.ReactElement = React.createElement( 19 | TaxonomyRestSample, 20 | { 21 | context: this.context 22 | } 23 | ); 24 | 25 | ReactDom.render(element, this.domElement); 26 | } 27 | 28 | protected get dataVersion(): Version { 29 | return Version.parse('1.0'); 30 | } 31 | 32 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 33 | return { 34 | pages: [ 35 | { 36 | header: { 37 | description: strings.PropertyPaneDescription 38 | }, 39 | groups: [ 40 | { 41 | groupName: strings.BasicGroupName, 42 | groupFields: [ 43 | PropertyPaneTextField('description', { 44 | label: strings.DescriptionFieldLabel 45 | }) 46 | ] 47 | } 48 | ] 49 | } 50 | ] 51 | }; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/components/ITaxonomyRestSampleProps.ts: -------------------------------------------------------------------------------- 1 | 2 | import { IWebPartContext } from '@microsoft/sp-webpart-base'; 3 | export interface ITaxonomyRestSampleProps { 4 | context: IWebPartContext; 5 | } 6 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/components/TaxonomyRestSample.module.scss: -------------------------------------------------------------------------------- 1 | .taxonomyRestSample { 2 | .container { 3 | max-width: 700px; 4 | margin: 0px auto; 5 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 6 | } 7 | 8 | .row { 9 | padding-top: 20px; 10 | } 11 | } -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/components/TaxonomyRestSample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './TaxonomyRestSample.module.scss'; 3 | import { ITaxonomyRestSampleProps } from './ITaxonomyRestSampleProps'; 4 | import { SPHttpClient, HttpClientResponse } from '@microsoft/sp-http'; 5 | import { 6 | SearchBox, DefaultButton 7 | } from 'office-ui-fabric-react'; 8 | 9 | interface IGetSuggestionsRequest { 10 | start: string; // query 11 | lcid: number; 12 | sspList: string; // guid of term store 13 | termSetList: string; // guid of term set 14 | anchorId: string; 15 | isSpanTermStores: boolean; // search in all termstores 16 | isSpanTermSets: boolean; 17 | isIncludeUnavailable: boolean; 18 | isIncludeDeprecated: boolean; 19 | isAddTerms: boolean; 20 | isIncludePathData: boolean; 21 | excludeKeyword: boolean; 22 | excludedTermset: string; 23 | } 24 | 25 | interface IFindTermSetRequest { 26 | searchTerms: string; 27 | lcid: number; 28 | } 29 | 30 | interface IGetChildTermsInTermSetWithPagingRequest { 31 | sspId: string; // guid of term store 32 | lcid: number; 33 | guid: string; // guid of term set 34 | includeDeprecated: boolean; 35 | pageLimit: number; 36 | pagingForward: boolean; 37 | includeCurrentChild: boolean; 38 | currentChildId: string; 39 | webId: string; 40 | listId: string; 41 | } 42 | 43 | interface IGetChildTermsInTermWithPagingRequest { 44 | sspId: string; // guid of term store 45 | lcid: number; 46 | guid: string; // guid of term 47 | termsetId: string; // guid of term set 48 | includeDeprecated: boolean; 49 | pageLimit: number; 50 | pagingForward: boolean; 51 | includeCurrentChild: boolean; 52 | currentChildId: string; 53 | webId: string; 54 | listId: string; 55 | } 56 | 57 | interface IPickSspsRequest { 58 | webId: string; 59 | listId: string; 60 | lcid: number; 61 | } 62 | 63 | interface IGetGroupsRequest { 64 | sspId: string; // guid of term store 65 | webId: string; 66 | listId: string; 67 | includeSystemGroup: boolean; 68 | lcid: number; 69 | } 70 | 71 | interface IGetTermSetsRequest { 72 | sspId: string; // guid of term store 73 | guid: string; // guid of term group 74 | includeNoneTaggableTermset: boolean; 75 | webId: string; 76 | listId: string; 77 | lcid: number; 78 | } 79 | 80 | 81 | interface ITermSetInformation { 82 | Id: string; 83 | Nm: string; //name 84 | Ow: string; //owner 85 | It: boolean; //isTermSet 86 | } 87 | 88 | interface ITermSet { 89 | Id: string; 90 | Name: string; 91 | Owner: string; 92 | } 93 | 94 | interface ITerm { 95 | Id: string; 96 | Label: string; 97 | Paths: string[]; 98 | } 99 | 100 | interface IFindTermSetResult { 101 | Error: string; 102 | Lm: number; 103 | Content: any[]; 104 | } 105 | 106 | export default class TaxonomyRestSample extends React.Component { 107 | constructor() { 108 | super(); 109 | this.updateQuery = this.updateQuery.bind(this); 110 | this.findTermSets = this.findTermSets.bind(this); 111 | this.getSuggestions = this.getSuggestions.bind(this); 112 | this.getChildTermsInTermSetWithPaging = this.getChildTermsInTermSetWithPaging.bind(this); 113 | this.getChildTermsInTermWithPaging = this.getChildTermsInTermWithPaging.bind(this); 114 | this.pickSsps = this.pickSsps.bind(this); 115 | this.getGroups = this.getGroups.bind(this); 116 | this.getTermSets = this.getTermSets.bind(this); 117 | this.state = {}; 118 | } 119 | 120 | public componentDidMount(): void { 121 | this.setState({ query: "" }); 122 | this.pickSsps(); 123 | } 124 | 125 | public render(): React.ReactElement { 126 | let renderResult = ""; 127 | if (this.state.results) { 128 | renderResult = JSON.stringify(this.state.results, null, 2); 129 | } 130 | return ( 131 |
132 |
133 |
134 |
135 | this.updateQuery(newValue)} 137 | onSearch={(newValue) => this.updateQuery(newValue)} 138 | /> 139 |
140 |
141 |
142 |
143 |   144 |   145 |   146 |   147 |
148 |
149 |
150 |
151 | 
152 |                 {renderResult}
153 |
154 |
155 |
156 |
157 |
158 | ); 159 | } 160 | 161 | private updateQuery(query: string) { 162 | this.setState({ 163 | query: query 164 | }); 165 | } 166 | 167 | /** 168 | * Method to find term sets having the search value, or having a term with the value 169 | */ 170 | private findTermSets() { 171 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/FindTermSet'; 172 | const query: IFindTermSetRequest = { 'searchTerms': this.state.query, 'lcid': 1033 }; 173 | 174 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 175 | body: JSON.stringify(query) 176 | }).then((response: HttpClientResponse) => { 177 | if (response.ok) { 178 | response.json().then((result: any) => { 179 | let termSetResult: IFindTermSetResult = result.d; 180 | let returnResults: ITermSet[] = []; 181 | if (termSetResult.Content) { 182 | for (var i = 0; i < termSetResult.Content.length; i++) { 183 | var termInfo = termSetResult.Content[i]; 184 | if (termInfo.It) { 185 | returnResults.push({ 186 | Id: termInfo.Id, 187 | Name: termInfo.Nm, 188 | Owner: termInfo.Ow 189 | }); 190 | } 191 | } 192 | } 193 | this.setState({ 194 | results: returnResults 195 | }); 196 | }); 197 | } else { 198 | console.warn(response.statusText); 199 | } 200 | }); 201 | } 202 | 203 | /** 204 | * Method to query for terms in a termset 205 | */ 206 | private getSuggestions() { 207 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/GetSuggestions'; 208 | const query: IGetSuggestionsRequest = { 209 | start: this.state.query, 210 | lcid: 1033, 211 | sspList: this.state.sspId, //id of termstore 212 | termSetList: "bcb8e186-25af-47f6-be91-bd5eda552410", //id of termset 213 | anchorId: "00000000-0000-0000-0000-000000000000", 214 | isSpanTermStores: false, 215 | isSpanTermSets: false, 216 | isIncludeUnavailable: false, 217 | isIncludeDeprecated: false, 218 | isAddTerms: false, 219 | isIncludePathData: false, 220 | excludeKeyword: false, 221 | excludedTermset: "00000000-0000-0000-0000-000000000000" 222 | }; 223 | 224 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 225 | body: JSON.stringify(query) 226 | }).then((response: HttpClientResponse) => { 227 | if (response.ok) { 228 | response.json().then((result: any) => { 229 | let returnResults: ITerm[] = []; 230 | let groups: any[] = result.d.Groups; 231 | for (var i = 0; i < groups.length; i++) { 232 | var suggestions: any[] = groups[i].Suggestions; 233 | for (var j = 0; j < suggestions.length; j++) { 234 | var term: any = suggestions[j]; 235 | returnResults.push({ 236 | Id: term.Id, 237 | Label: term.DefaultLabel, 238 | Paths: term.Paths 239 | }); 240 | } 241 | } 242 | 243 | this.setState({ 244 | results: returnResults 245 | }); 246 | }); 247 | } else { 248 | console.warn(response.statusText); 249 | } 250 | }); 251 | } 252 | 253 | /** 254 | * Method to list all level one terms in a term set 255 | */ 256 | private getChildTermsInTermSetWithPaging() { 257 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/GetChildTermsInTermSetWithPaging'; 258 | const query: IGetChildTermsInTermSetWithPagingRequest = { 259 | lcid: 1033, 260 | sspId: this.state.sspId, //id of termstore 261 | guid: "bcb8e186-25af-47f6-be91-bd5eda552410", //id of termset 262 | includeDeprecated: false, 263 | pageLimit: 1000, 264 | pagingForward: false, 265 | includeCurrentChild: false, 266 | currentChildId: "00000000-0000-0000-0000-000000000000", 267 | webId: "00000000-0000-0000-0000-000000000000", 268 | listId: "00000000-0000-0000-0000-000000000000" 269 | }; 270 | 271 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 272 | body: JSON.stringify(query) 273 | }).then((response: HttpClientResponse) => { 274 | if (response.ok) { 275 | response.json().then((result: any) => { 276 | let returnResults: ITerm[] = []; 277 | this.setState({ 278 | //results: returnResults 279 | results: result.d 280 | }); 281 | }); 282 | } else { 283 | console.warn(response.statusText); 284 | } 285 | }); 286 | } 287 | 288 | /** 289 | * Method to list all child terms of a term 290 | */ 291 | private getChildTermsInTermWithPaging() { 292 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/GetChildTermsInTermWithPaging'; 293 | const query: IGetChildTermsInTermWithPagingRequest = { 294 | lcid: 1033, 295 | sspId: this.state.sspId, //id of termstore 296 | guid: "17219077-0abf-4eec-803d-eab938dc2a57", //id of term 297 | termsetId: "bcb8e186-25af-47f6-be91-bd5eda552410", //id of termset 298 | includeDeprecated: false, 299 | pageLimit: 1000, 300 | pagingForward: false, 301 | includeCurrentChild: true, 302 | currentChildId: "00000000-0000-0000-0000-000000000000", 303 | webId: "00000000-0000-0000-0000-000000000000", 304 | listId: "00000000-0000-0000-0000-000000000000" 305 | }; 306 | 307 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 308 | body: JSON.stringify(query) 309 | }).then((response: HttpClientResponse) => { 310 | if (response.ok) { 311 | response.json().then((result: any) => { 312 | let returnResults: ITerm[] = []; 313 | this.setState({ 314 | //results: returnResults 315 | results: result.d 316 | }); 317 | }); 318 | } else { 319 | console.warn(response.statusText); 320 | } 321 | }); 322 | } 323 | 324 | /** 325 | * Method to list all term stores 326 | */ 327 | private pickSsps() { 328 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/PickSsps'; 329 | const query: IPickSspsRequest = { 330 | lcid: 1033, 331 | webId: "00000000-0000-0000-0000-000000000000", 332 | listId: "00000000-0000-0000-0000-000000000000" 333 | }; 334 | 335 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 336 | body: JSON.stringify(query) 337 | }).then((response: HttpClientResponse) => { 338 | if (response.ok) { 339 | response.json().then((result: any) => { 340 | this.setState({ 341 | results: result.d, 342 | sspId: result.d.Content[0].Id 343 | }); 344 | this.getGroups(); 345 | }); 346 | } else { 347 | console.warn(response.statusText); 348 | } 349 | }); 350 | } 351 | 352 | /** 353 | * Method to list all term groups for a term store 354 | */ 355 | private getGroups() { 356 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/GetGroups'; 357 | const query: IGetGroupsRequest = { 358 | sspId: this.state.sspId, 359 | webId: this.props.context.pageContext.web.id.toString(), 360 | listId: "00000000-0000-0000-0000-000000000000", 361 | includeSystemGroup: false, 362 | lcid: 1033 363 | }; 364 | 365 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 366 | body: JSON.stringify(query) 367 | }).then((response: HttpClientResponse) => { 368 | if (response.ok) { 369 | response.json().then((result: any) => { 370 | this.setState({ 371 | results: result.d 372 | }); 373 | this.getTermSets(result.d.Content[0].Id); 374 | }); 375 | } else { 376 | console.warn(response.statusText); 377 | } 378 | }); 379 | } 380 | 381 | /** 382 | * Method to list all term sets in a term group 383 | */ 384 | private getTermSets(termGroupId: string) { 385 | const url = this.props.context.pageContext.web.serverRelativeUrl + '/_vti_bin/TaxonomyInternalService.json/GetTermSets'; 386 | const query: IGetTermSetsRequest = { 387 | sspId: this.state.sspId, 388 | guid: termGroupId, 389 | webId: this.props.context.pageContext.web.id.toString(), 390 | listId: "00000000-0000-0000-0000-000000000000", 391 | includeNoneTaggableTermset: true, 392 | lcid: 1033 393 | }; 394 | 395 | this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, { 396 | body: JSON.stringify(query) 397 | }).then((response: HttpClientResponse) => { 398 | if (response.ok) { 399 | response.json().then((result: any) => { 400 | this.setState({ 401 | results: result.d 402 | }); 403 | }); 404 | } else { 405 | console.warn(response.statusText); 406 | } 407 | }); 408 | } 409 | } 410 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ITaxonomyRestSampleStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'taxonomyRestSampleStrings' { 8 | const strings: ITaxonomyRestSampleStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /react-taxonomy-rest/src/webparts/taxonomyRestSample/tests/TaxonomyRestSample.test.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { assert } from 'chai'; 4 | 5 | describe('TaxonomyRestSampleWebPart', () => { 6 | it('should do something', () => { 7 | assert.ok(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /react-taxonomy-rest/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "forceConsistentCasingInFileNames": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "declaration": true, 8 | "sourceMap": true, 9 | "experimentalDecorators": true, 10 | "types": [ 11 | "es6-promise", 12 | "es6-collections", 13 | "webpack-env" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /react-taxonomy-rest/typings/@ms/odsp.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for Microsoft ODSP projects 2 | // Project: ODSP 3 | 4 | /* Global definition for UNIT_TEST builds 5 | Code that is wrapped inside an if(UNIT_TEST) {...} 6 | block will not be included in the final bundle when the 7 | --ship flag is specified */ 8 | declare const UNIT_TEST: boolean; 9 | 10 | /* Global defintion for SPO builds */ 11 | declare const DATACENTER: boolean; -------------------------------------------------------------------------------- /react-taxonomy-rest/typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | --------------------------------------------------------------------------------