From ddfb562109fea3bfcf49f263b34b4be818b69ea0 Mon Sep 17 00:00:00 2001 From: Julie Turner Date: Tue, 25 Jan 2022 20:29:35 +0000 Subject: [PATCH] New PnPjs v3 sample Ready to have new package-lock.json file created when 1.14.0 and v3 drop --- samples/react-pnp-js-sample/.gitignore | 33 ++++ samples/react-pnp-js-sample/.npmignore | 16 ++ samples/react-pnp-js-sample/.yo-rc.json | 14 ++ samples/react-pnp-js-sample/README.md | 75 +++++++++ .../assets/react-pnp-js-sample.png | Bin 0 -> 16491 bytes .../react-pnp-js-sample/config/config.json | 18 ++ .../config/deploy-azure-storage.json | 7 + .../config/package-solution.json | 40 +++++ samples/react-pnp-js-sample/config/serve.json | 6 + .../config/write-manifests.json | 4 + samples/react-pnp-js-sample/gulpfile.js | 18 ++ samples/react-pnp-js-sample/package.json | 34 ++++ samples/react-pnp-js-sample/src/index.ts | 1 + .../PnPjsExampleWebPart.manifest.json | 28 ++++ .../pnPjsExample/PnPjsExampleWebPart.ts | 103 ++++++++++++ .../pnPjsExample/assets/welcome-dark.png | Bin 0 -> 12545 bytes .../pnPjsExample/assets/welcome-light.png | Bin 0 -> 12816 bytes .../components/IPnPjsExampleProps.ts | 7 + .../components/PnPjsExample.module.scss | 34 ++++ .../pnPjsExample/components/PnPjsExample.tsx | 154 ++++++++++++++++++ .../pnPjsExample/components/interfaces.ts | 20 +++ .../src/webparts/pnPjsExample/loc/en-us.js | 11 ++ .../webparts/pnPjsExample/loc/mystrings.d.ts | 14 ++ .../src/webparts/pnPjsExample/pnpjsConfig.ts | 20 +++ ...02dd-5b1b-4a6e-ae8f-83c9544cb711_color.png | Bin 0 -> 10248 bytes ...dd-5b1b-4a6e-ae8f-83c9544cb711_outline.png | Bin 0 -> 542 bytes samples/react-pnp-js-sample/tsconfig.json | 35 ++++ samples/react-pnp-js-sample/tslint.json | 29 ++++ 28 files changed, 721 insertions(+) create mode 100644 samples/react-pnp-js-sample/.gitignore create mode 100644 samples/react-pnp-js-sample/.npmignore create mode 100644 samples/react-pnp-js-sample/.yo-rc.json create mode 100644 samples/react-pnp-js-sample/README.md create mode 100644 samples/react-pnp-js-sample/assets/react-pnp-js-sample.png create mode 100644 samples/react-pnp-js-sample/config/config.json create mode 100644 samples/react-pnp-js-sample/config/deploy-azure-storage.json create mode 100644 samples/react-pnp-js-sample/config/package-solution.json create mode 100644 samples/react-pnp-js-sample/config/serve.json create mode 100644 samples/react-pnp-js-sample/config/write-manifests.json create mode 100644 samples/react-pnp-js-sample/gulpfile.js create mode 100644 samples/react-pnp-js-sample/package.json create mode 100644 samples/react-pnp-js-sample/src/index.ts create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.manifest.json create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.ts create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-dark.png create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-light.png create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/IPnPjsExampleProps.ts create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.module.scss create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/interfaces.ts create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/en-us.js create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/mystrings.d.ts create mode 100644 samples/react-pnp-js-sample/src/webparts/pnPjsExample/pnpjsConfig.ts create mode 100644 samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_color.png create mode 100644 samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_outline.png create mode 100644 samples/react-pnp-js-sample/tsconfig.json create mode 100644 samples/react-pnp-js-sample/tslint.json diff --git a/samples/react-pnp-js-sample/.gitignore b/samples/react-pnp-js-sample/.gitignore new file mode 100644 index 000000000..d5ab57b0f --- /dev/null +++ b/samples/react-pnp-js-sample/.gitignore @@ -0,0 +1,33 @@ +# Logs +logs +*.log +npm-debug.log* + +# Dependency directories +node_modules + +# Build generated files +dist +lib +release +solution +temp +*.sppkg + +# Coverage directory used by tools like istanbul +coverage + +# OSX +.DS_Store + +# Visual Studio files +.ntvs_analysis.dat +.vs +bin +obj + +# Resx Generated Code +*.resx.ts + +# Styles Generated Code +*.scss.ts diff --git a/samples/react-pnp-js-sample/.npmignore b/samples/react-pnp-js-sample/.npmignore new file mode 100644 index 000000000..ae0b487c0 --- /dev/null +++ b/samples/react-pnp-js-sample/.npmignore @@ -0,0 +1,16 @@ +!dist +config + +gulpfile.js + +release +src +temp + +tsconfig.json +tslint.json + +*.log + +.yo-rc.json +.vscode diff --git a/samples/react-pnp-js-sample/.yo-rc.json b/samples/react-pnp-js-sample/.yo-rc.json new file mode 100644 index 000000000..24a7f5492 --- /dev/null +++ b/samples/react-pnp-js-sample/.yo-rc.json @@ -0,0 +1,14 @@ +{ + "@microsoft/generator-sharepoint": { + "plusBeta": true, + "isCreatingSolution": true, + "environment": "spo", + "version": "1.14.0-beta.4", + "libraryName": "spfx-pnp-js-example", + "libraryId": "d20ceaf6-094b-4086-b7a0-85761bc8be23", + "packageManager": "npm", + "solutionShortDescription": "spfx-pnp-js-example description", + "isDomainIsolated": false, + "componentType": "webpart" + } +} diff --git a/samples/react-pnp-js-sample/README.md b/samples/react-pnp-js-sample/README.md new file mode 100644 index 000000000..1c06c9cfd --- /dev/null +++ b/samples/react-pnp-js-sample/README.md @@ -0,0 +1,75 @@ +--- +page_type: sample +products: +- office-sp +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + platforms: + - react + createdDate: 5/1/2017 12:00:00 AM +--- +# SharePoint Framework sample using @pnp/js and ReactJS + +## Summary + +This solution builds off of the solution [react-async-await-sp-pnp-js](./react-async-await-sp-pnp-js) submitted by Jose Quinto ([@jquintozamora](https://twitter.com/jquintozamora) , [blog.josequinto.com](https://blog.josequinto.com)) + +This implementaiton refactors to take aspects out and utilize and showcase PnPjs Version 3. + +![React-pnp-js-sample](./assets/react-pnp-js-sample.png) + +## Compatibility + +![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14.0-green.svg) +![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v12%20%7C%20v14-green.svg) +![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) +![Incompatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg) +![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") +![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg) +![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) + +## Applies to + +* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) +* [Microsoft 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) + +## Solution + +Solution|Author(s) +--------|--------- +react-spfx-pnp-js-sample | Julie Turner ([@jfj1997](https://twitter.com/jfj1997)) + +## Version history + +Version|Date|Comments +-------|----|-------- +1.0|Jan 13, 2022|Initial release + +## Minimal Path to Awesome + +1. clone this repo +1. `$ npm i` +1. Update online workbench url in the `initialPage` property of the `config/serve.json` file. +1. `$ gulp serve` + +## Features + +* Establishing context for the SharePoint Factory Interface +* Creating a project config file to centralize defining the PnPjs imports and SharePoint Querable object for reuse. +* Demo extending the SharePoint Querables instance with the PnPLogging beavhior. +* Demo extending the SharePoing Queryable instance with the Caching behavior +* Demo loading list items from a SharePoint library +* Demo creating a batched instance of the SharePoint Querable object. +* Demo updating list items by modifying the Title property. +* Demo executing a batch and working with the results. + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + + diff --git a/samples/react-pnp-js-sample/assets/react-pnp-js-sample.png b/samples/react-pnp-js-sample/assets/react-pnp-js-sample.png new file mode 100644 index 0000000000000000000000000000000000000000..fe9bd06e635c3b4ab3a4971f5ce40e8a60c78c60 GIT binary patch literal 16491 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", + "container": "spfx-pnp-js-example", + "accessKey": "" +} \ No newline at end of file diff --git a/samples/react-pnp-js-sample/config/package-solution.json b/samples/react-pnp-js-sample/config/package-solution.json new file mode 100644 index 000000000..7ac259a42 --- /dev/null +++ b/samples/react-pnp-js-sample/config/package-solution.json @@ -0,0 +1,40 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", + "solution": { + "name": "spfx-pnp-js-example-client-side-solution", + "id": "d20ceaf6-094b-4086-b7a0-85761bc8be23", + "version": "1.0.0.0", + "includeClientSideAssets": true, + "skipFeatureDeployment": true, + "isDomainIsolated": false, + "developer": { + "name": "", + "websiteUrl": "", + "privacyUrl": "", + "termsOfUseUrl": "", + "mpnId": "Undefined-1.14.0-beta.4" + }, + "metadata": { + "shortDescription": { + "default": "spfx-pnp-js-example description" + }, + "longDescription": { + "default": "spfx-pnp-js-example description" + }, + "screenshotPaths": [], + "videoUrl": "", + "categories": [] + }, + "features": [ + { + "title": "spfx-pnp-js-example Feature", + "description": "The feature that activates elements of the spfx-pnp-js-example solution.", + "id": "97ead3d0-6478-4aa5-abba-151b0e9b76c9", + "version": "1.0.0.0" + } + ] + }, + "paths": { + "zippedPackage": "solution/spfx-pnp-js-example.sppkg" + } +} diff --git a/samples/react-pnp-js-sample/config/serve.json b/samples/react-pnp-js-sample/config/serve.json new file mode 100644 index 000000000..5958674e1 --- /dev/null +++ b/samples/react-pnp-js-sample/config/serve.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", + "port": 4321, + "https": true, + "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx" +} diff --git a/samples/react-pnp-js-sample/config/write-manifests.json b/samples/react-pnp-js-sample/config/write-manifests.json new file mode 100644 index 000000000..bad352605 --- /dev/null +++ b/samples/react-pnp-js-sample/config/write-manifests.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", + "cdnBasePath": "" +} \ No newline at end of file diff --git a/samples/react-pnp-js-sample/gulpfile.js b/samples/react-pnp-js-sample/gulpfile.js new file mode 100644 index 000000000..0af3f8250 --- /dev/null +++ b/samples/react-pnp-js-sample/gulpfile.js @@ -0,0 +1,18 @@ +'use strict'; + +const build = require('@microsoft/sp-build-web'); + +build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); + +var getTasks = build.rig.getTasks; +build.rig.getTasks = function () { + var result = getTasks.call(build.rig); + + result.set('serve', result.get('serve-deprecated')); + + return result; +}; +// disable tslint +build.tslintCmd.enabled = false; + +build.initialize(require('gulp')); \ No newline at end of file diff --git a/samples/react-pnp-js-sample/package.json b/samples/react-pnp-js-sample/package.json new file mode 100644 index 000000000..be87fefed --- /dev/null +++ b/samples/react-pnp-js-sample/package.json @@ -0,0 +1,34 @@ +{ + "name": "spfx-pnp-js-example", + "version": "0.0.1", + "private": true, + "main": "lib/index.js", + "scripts": { + "build": "gulp bundle", + "clean": "gulp clean", + "test": "gulp test" + }, + "dependencies": { + "@microsoft/sp-core-library": "1.14.0", + "@microsoft/sp-lodash-subset": "1.14.0", + "@microsoft/sp-office-ui-fabric-core": "1.14.0", + "@microsoft/sp-property-pane": "1.14.0", + "@microsoft/sp-webpart-base": "1.14.0", + "@pnp/logging": "^3.0.0", + "@pnp/sp": "^3.0.0", + "office-ui-fabric-react": "7.174.1", + "react": "16.13.1", + "react-dom": "16.13.1" + }, + "devDependencies": { + "@microsoft/rush-stack-compiler-4.2": "^0.1.1", + "@microsoft/sp-build-web": "1.14.0", + "@microsoft/sp-module-interfaces": "1.14.0", + "@microsoft/sp-tslint-rules": "1.14.0", + "@types/react": "16.9.51", + "@types/react-dom": "16.9.8", + "@types/webpack-env": "1.13.1", + "ajv": "~5.2.2", + "gulp": "~4.0.2" + } +} \ No newline at end of file diff --git a/samples/react-pnp-js-sample/src/index.ts b/samples/react-pnp-js-sample/src/index.ts new file mode 100644 index 000000000..fb81db1e2 --- /dev/null +++ b/samples/react-pnp-js-sample/src/index.ts @@ -0,0 +1 @@ +// A file is required to be in the root of the /src directory by the TypeScript compiler diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.manifest.json b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.manifest.json new file mode 100644 index 000000000..1a2cb1a09 --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.manifest.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", + "id": "72f602dd-5b1b-4a6e-ae8f-83c9544cb711", + "alias": "PnPjsExampleWebPart", + "componentType": "WebPart", + + // The "*" signifies that the version should be taken from the package.json + "version": "*", + "manifestVersion": 2, + + // If true, the component can only be installed on sites where Custom Script is allowed. + // Components that allow authors to embed arbitrary script code should set this to true. + // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f + "requiresCustomScript": false, + "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"], + "supportsThemeVariants": true, + + "preconfiguredEntries": [{ + "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other + "group": { "default": "Other" }, + "title": { "default": "PnPJSExample" }, + "description": { "default": "PnPJSExample description" }, + "officeFabricIconFontName": "Page", + "properties": { + "description": "PnPJSExample" + } + }] +} diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.ts b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.ts new file mode 100644 index 000000000..1b76e6dfb --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.ts @@ -0,0 +1,103 @@ +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +import { Version } from '@microsoft/sp-core-library'; +import { + IPropertyPaneConfiguration, + PropertyPaneTextField +} from '@microsoft/sp-property-pane'; +import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; +import { IReadonlyTheme } from '@microsoft/sp-component-base'; + +import * as strings from 'PnPjsExampleWebPartStrings'; +import PnPjsExample from './components/PnPjsExample'; +import { IPnPjsExampleProps } from './components/IPnPjsExampleProps'; + +import { getSP } from './pnpjsConfig'; + +export interface IPnPjsExampleWebPartProps { + description: string; +} + +export default class PnPjsExampleWebPart extends BaseClientSideWebPart { + + private _isDarkTheme: boolean = false; + private _environmentMessage: string = ''; + + protected async onInit(): Promise { + this._environmentMessage = this._getEnvironmentMessage(); + + super.onInit(); + + //Initialize our _sp object that we can then use in other packages without having to pass around the context. + // Check out pnpjsConfig.ts for an example of a project setup file. + getSP(this.context); + } + + public render(): void { + const element: React.ReactElement = React.createElement( + PnPjsExample, + { + description: this.properties.description, + isDarkTheme: this._isDarkTheme, + environmentMessage: this._environmentMessage, + hasTeamsContext: !!this.context.sdks.microsoftTeams, + userDisplayName: this.context.pageContext.user.displayName + } + ); + + ReactDom.render(element, this.domElement); + } + + private _getEnvironmentMessage(): string { + if (!!this.context.sdks.microsoftTeams) { // running in Teams + return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment; + } + + return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment; + } + + protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void { + if (!currentTheme) { + return; + } + + this._isDarkTheme = !!currentTheme.isInverted; + const { + semanticColors + } = currentTheme; + this.domElement.style.setProperty('--bodyText', semanticColors.bodyText); + this.domElement.style.setProperty('--link', semanticColors.link); + this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered); + + } + + protected onDispose(): void { + ReactDom.unmountComponentAtNode(this.domElement); + } + + protected get dataVersion(): Version { + return Version.parse('1.0'); + } + + protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { + return { + pages: [ + { + header: { + description: strings.PropertyPaneDescription + }, + groups: [ + { + groupName: strings.BasicGroupName, + groupFields: [ + PropertyPaneTextField('description', { + label: strings.DescriptionFieldLabel + }) + ] + } + ] + } + ] + }; + } +} diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-dark.png b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..42f0b8d24a9aa964a2be4885fe5700c1c54191a9 GIT binary patch literal 12545 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�Gp~kbx)oU28ew4C2+WtKA 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 G`2PSf1J4)$ literal 0 HcmV?d00001 diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-light.png b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/assets/welcome-light.png new file mode 100644 index 0000000000000000000000000000000000000000..69eb3b48cd83031f106df4b4df127c749657e319 GIT binary patch literal 12816 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 literal 0 HcmV?d00001 diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/IPnPjsExampleProps.ts b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/IPnPjsExampleProps.ts new file mode 100644 index 000000000..928bf6341 --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/IPnPjsExampleProps.ts @@ -0,0 +1,7 @@ +export interface IPnPjsExampleProps { + description: string; + isDarkTheme: boolean; + environmentMessage: string; + hasTeamsContext: boolean; + userDisplayName: string; +} diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.module.scss b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.module.scss new file mode 100644 index 000000000..b23679464 --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.module.scss @@ -0,0 +1,34 @@ +@import '~office-ui-fabric-react/dist/sass/References.scss'; + +.pnPjsExample { + overflow: hidden; + padding: 1em; + color: "[theme:bodyText, default: #323130]"; + color: var(--bodyText); + &.teams { + font-family: $ms-font-family-fallbacks; + } +} + +.welcome { + text-align: center; +} + +.welcomeImage { + width: 100%; + max-width: 420px; +} + +.links { + a { + text-decoration: none; + color: "[theme:link, default:#03787c]"; + color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only + + &:hover { + text-decoration: underline; + color: "[theme:linkHovered, default: #014446]"; + color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only + } + } +} \ No newline at end of file diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx new file mode 100644 index 000000000..de122b607 --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx @@ -0,0 +1,154 @@ +import * as React from 'react'; +import styles from './PnPjsExample.module.scss'; +import { IPnPjsExampleProps } from './IPnPjsExampleProps'; + +// import interfaces +import { IFile, IResponseItem } from "./interfaces"; + +import { Caching } from "@pnp/queryable"; +import { getSP } from "../pnpjsConfig"; +import { SPFI, spfi } from "@pnp/sp"; +import { Logger, LogLevel } from "@pnp/logging"; +import { IItemUpdateResult } from "@pnp/sp/items"; +import { Label, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle'; + +export interface IAsyncAwaitPnPJsProps { + description: string; +} + +export interface IIPnPjsExampleState { + items: IFile[]; + errors: string[]; +} + +export default class PnPjsExample extends React.Component { + private LOG_SOURCE = "🅿PnPjsExample"; + private LIBRARY_NAME = "Documents"; + private _sp: SPFI; + + constructor(props: IPnPjsExampleProps) { + super(props); + // set initial state + this.state = { + items: [], + errors: [] + }; + this._sp = getSP(); + } + + public componentDidMount(): void { + // read all file sizes from Documents library + this._readAllFilesSize(); + } + + public render(): React.ReactElement { + // calculate total of file sizes + const totalDocs: number = this.state.items.length > 0 + ? this.state.items.reduce((acc: number, item: IFile) => { + return (acc + Number(item.Size)); + }, 0) + : 0; + return ( +
+ + Update Item Titles + + + + + + + + {this.state.items.map((item, idx) => { + return ( + + + + + + ); + })} + + + + + +
TitleNameSize (KB)
{item.Title}{item.Name}{(item.Size / 1024).toFixed(2)}
Total:{(totalDocs / 1024).toFixed(2)}
+
+ ); + } + + private _readAllFilesSize = async (): Promise => { + try { + // do PnP JS query, some notes: + // - .expand() method will retrive Item.File item but only Length property + // - .get() always returns a promise + // - await resolves proimises making your code act syncronous, ergo Promise becomes IResponse[] + + //Extending our sp object to include caching behavior, this modification will add caching to the sp object itself + //this._sp.using(Caching("session")); + + //Creating a new sp object to include caching behavior. This way our original object is unchanged. + const spCache = spfi(this._sp).using(Caching({ store: "session" })); + + const response: IResponseItem[] = await spCache.web.lists + .getByTitle(this.LIBRARY_NAME) + .items + .select("Id", "Title", "FileLeafRef", "File/Length") + .expand("File/Length")(); + + // use map to convert IResponseItem[] into our internal object IFile[] + const items: IFile[] = response.map((item: IResponseItem) => { + return { + Id: item.Id, + Title: item.Title || "Unknown", + Size: item.File?.Length || 0, + Name: item.FileLeafRef + }; + }); + + // Add the items to the state + this.setState({ items }); + } catch (err) { + Logger.write(`${this.LOG_SOURCE} (_readAllFilesSize) - ${JSON.stringify(err)} - `, LogLevel.Error); + } + } + + private _updateTitles = async (): Promise => { + try { + //Will create a batch call that will update the title of each item + // in the library by adding `-Updated` to the end. + const [batchedSP, execute] = this._sp.batched(); + + //Clone items from the state + const items = JSON.parse(JSON.stringify(this.state.items)); + + let res: IItemUpdateResult[] = []; + + for (let i = 0; i < items.length; i++) { + // you need to use .then syntax here as otherwise the application will stop and await the result + batchedSP.web.lists + .getByTitle(this.LIBRARY_NAME) + .items + .getById(items[i].Id) + .update({ Title: `${items[i].Name}-Updated` }) + .then(r => res.push(r)); + } + // Executes the batched calls + await execute(); + + // Results for all batched calls are available + for (let i = 0; i < res.length; i++) { + //If the result is successful update the item + //NOTE: This code is over simplified, you need to make sure the Id's match + const item = await res[i].item.select("Id, Title")<{ Id: number, Title: string }>(); + items[i].Name = item.Title; + } + + //Update the state which rerenders the component + this.setState({ items }); + } catch (err) { + Logger.write(`${this.LOG_SOURCE} (_updateTitles) - ${JSON.stringify(err)} - `, LogLevel.Error); + } + } +} diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/interfaces.ts b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/interfaces.ts new file mode 100644 index 000000000..dcb90e79a --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/interfaces.ts @@ -0,0 +1,20 @@ +// create File item to work with it internally +export interface IFile { + Id: number; + Title: string; + Name: string; + Size: number; +} + +// create PnP JS response interface for File +export interface IResponseFile { + Length: number; +} + +// create PnP JS response interface for Item +export interface IResponseItem { + Id: number; + File: IResponseFile; + FileLeafRef: string; + Title: string; +} \ No newline at end of file diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/en-us.js b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/en-us.js new file mode 100644 index 000000000..7efbd643f --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/en-us.js @@ -0,0 +1,11 @@ +define([], function() { + return { + "PropertyPaneDescription": "Description", + "BasicGroupName": "Group Name", + "DescriptionFieldLabel": "Description Field", + "AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part", + "AppLocalEnvironmentTeams": "The app is running on your local environment as Microsoft Teams app", + "AppSharePointEnvironment": "The app is running on SharePoint page", + "AppTeamsTabEnvironment": "The app is running in Microsoft Teams" + } +}); \ No newline at end of file diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/mystrings.d.ts b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/mystrings.d.ts new file mode 100644 index 000000000..70808da46 --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/loc/mystrings.d.ts @@ -0,0 +1,14 @@ +declare interface IPnPjsExampleWebPartStrings { + PropertyPaneDescription: string; + BasicGroupName: string; + DescriptionFieldLabel: string; + AppLocalEnvironmentSharePoint: string; + AppLocalEnvironmentTeams: string; + AppSharePointEnvironment: string; + AppTeamsTabEnvironment: string; +} + +declare module 'PnPjsExampleWebPartStrings' { + const strings: IPnPjsExampleWebPartStrings; + export = strings; +} diff --git a/samples/react-pnp-js-sample/src/webparts/pnPjsExample/pnpjsConfig.ts b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/pnpjsConfig.ts new file mode 100644 index 000000000..ac3f2a66f --- /dev/null +++ b/samples/react-pnp-js-sample/src/webparts/pnPjsExample/pnpjsConfig.ts @@ -0,0 +1,20 @@ +import { WebPartContext } from "@microsoft/sp-webpart-base"; + +// import pnp and pnp logging system +import { spfi, SPFI, SPFx } from "@pnp/sp"; +import { LogLevel, PnPLogging } from "@pnp/logging"; +import "@pnp/sp/webs"; +import "@pnp/sp/lists"; +import "@pnp/sp/items"; +import "@pnp/sp/batching"; + +var _sp: SPFI = null; + +export const getSP = (context?: WebPartContext): SPFI => { + if (_sp === null && context != null) { + //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency + // The LogLevel set's at what level a message will be written to the console + _sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning)); + } + return _sp; +}; \ No newline at end of file diff --git a/samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_color.png b/samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_color.png new file mode 100644 index 0000000000000000000000000000000000000000..0e1f764fa8df4791a61c71b4f011c26f9083ee52 GIT binary patch literal 10248 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 KtK_^>#Qy@$+e&%> literal 0 HcmV?d00001 diff --git a/samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_outline.png b/samples/react-pnp-js-sample/teams/72f602dd-5b1b-4a6e-ae8f-83c9544cb711_outline.png new file mode 100644 index 0000000000000000000000000000000000000000..892868fab31033c06f52dba29917ca79826896aa GIT binary patch literal 542 zcmV+(0^$9MP)Px$*hxe|R9HvtmP;r^Q5eVncjjWepV=sxiDA658IMv*Rw!kmB*H@8O0z&Q2}uo7 z6B~&Iu^CyDjSwrA@+xKH85)n0PZUFU4xfx{?p>bqKmYIl{mwn-UJ3vFNdH_PY5u3A2g4wR^IR;II%}onJy17ywBE?rxlbtcBgy zg~pmPmN!cT|5$?44FS+-l?hjesED?SjKyYl`T&KSaAUGZH(Gwm# zNkDWHicW`r9KpHEYK|r9>>Z&Vs}0ag4Rx_W@oqaJ$d)eObsB{?*^J g8bBqW5>N>|11Bq?AqzNewEzGB07*qoM6N<$f*5=3%m4rY literal 0 HcmV?d00001 diff --git a/samples/react-pnp-js-sample/tsconfig.json b/samples/react-pnp-js-sample/tsconfig.json new file mode 100644 index 000000000..0feb121d8 --- /dev/null +++ b/samples/react-pnp-js-sample/tsconfig.json @@ -0,0 +1,35 @@ +{ + "extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json", + "compilerOptions": { + "target": "es5", + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "jsx": "react", + "declaration": true, + "sourceMap": true, + "experimentalDecorators": true, + "skipLibCheck": true, + "outDir": "lib", + "inlineSources": false, + "strictNullChecks": false, + "noUnusedLocals": false, + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@microsoft" + ], + "types": [ + "webpack-env" + ], + "lib": [ + "es5", + "dom", + "es2015.collection", + "es2015.promise" + ] + }, + "include": [ + "src/**/*.ts", + "src/**/*.tsx" + ] +} diff --git a/samples/react-pnp-js-sample/tslint.json b/samples/react-pnp-js-sample/tslint.json new file mode 100644 index 000000000..6c3c92f28 --- /dev/null +++ b/samples/react-pnp-js-sample/tslint.json @@ -0,0 +1,29 @@ +{ + "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json", + "rules": { + "class-name": false, + "export-name": false, + "forin": false, + "label-position": false, + "member-access": true, + "no-arg": false, + "no-console": false, + "no-construct": false, + "no-duplicate-variable": true, + "no-eval": false, + "no-function-expression": true, + "no-internal-module": true, + "no-shadowed-variable": true, + "no-switch-case-fall-through": true, + "no-unnecessary-semicolons": true, + "no-unused-expression": true, + "no-with-statement": true, + "semicolon": true, + "trailing-comma": false, + "typedef": false, + "typedef-whitespace": false, + "use-named-parameter": true, + "variable-name": false, + "whitespace": false + } +} \ No newline at end of file