diff --git a/samples/react-async-await-sp-pnp-js/README.md b/samples/react-async-await-sp-pnp-js/README.md index 1c5d01aee..3abe76bf9 100644 --- a/samples/react-async-await-sp-pnp-js/README.md +++ b/samples/react-async-await-sp-pnp-js/README.md @@ -51,6 +51,7 @@ https://your-domain.sharepoint.com/_layouts/15/workbench.aspx ## Features - [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93) + - Tested and working on IE11 (as TypeScript config provides Promise polyfill) - React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts) - [Interface best practices](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/tree/master/src/webparts/asyncAwaitPnPJs/interfaces) - [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems) diff --git a/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/AsyncAwaitPnPJsWebPart.ts b/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/AsyncAwaitPnPJsWebPart.ts index 708ab9350..d7b1487f3 100644 --- a/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/AsyncAwaitPnPJsWebPart.ts +++ b/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/AsyncAwaitPnPJsWebPart.ts @@ -12,8 +12,20 @@ import AsyncAwaitPnPJs from './components/AsyncAwaitPnPJs'; import { IAsyncAwaitPnPJsProps } from './components/IAsyncAwaitPnPJsProps'; import { IAsyncAwaitPnPJsWebPartProps } from './IAsyncAwaitPnPJsWebPartProps'; +// import pnp from "sp-pnp-js"; + export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart { + // // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework + // public onInit(): Promise { + // return super.onInit().then(_ => { + // // establish SPFx context + // pnp.setup({ + // spfxContext: this.context + // }); + // }); + // } + public render(): void { const element: React.ReactElement = React.createElement( AsyncAwaitPnPJs, diff --git a/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx b/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx index 9df87f2f1..ec60ba161 100644 --- a/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx +++ b/samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx @@ -46,9 +46,12 @@ export default class AsyncAwaitPnPJs extends React.Component -
+
Welcome to SharePoint Async Await SP PnP JS Demo! +
+ {this._gerErrors()} +

List of documents:

@@ -78,6 +81,51 @@ export default class AsyncAwaitPnPJs extends React.Component PnP JS Logger + // https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Logging + // 2. Log object => SPFx Logger + // https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-the-Logging-API + //////////////////////////////////////////////////////////////////////// + // [PnP JS Logging] activate Info level + Logger.activeLogLevel = LogLevel.Info; + + // [PnP JS Logging] create a custom FunctionListener to integrate PnP JS and SPFx Logging systems + const listener = new FunctionListener((entry: LogEntry) => { + + // get React component name + const componentName: string = (this as any)._reactInternalInstance._currentElement.props.description; + + // mapping betwween PnP JS Log types and SPFx logging methods + // instead of using switch we use object easy syntax + const logLevelConversion = { Verbose: "verbose", Info: "info", Warning: "warn", Error: "error" }; + + // create Message. Two importante notes here: + // 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru. + // 2. Use JavaScript´s Error constructor allows us to output more than 100 characters using SPFx logging + let formatedMessage; + if (entry.level === LogLevel.Error) { + formatedMessage = new Error(`Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`); + // formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`; + } else { + formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`; + } + + // [SPFx Logging] Calculate method to invoke verbose, info, warn or error + const method = logLevelConversion[LogLevel[entry.level]]; + + // [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging + Log[method](componentName, formatedMessage); + }); + + // [PnP JS Logging] Once create the custom listerner we should subscribe to it + Logger.subscribe(listener); + } + // Async functions were introduced with ES3/ES5 native support in TypeScript 2.1 // https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/ // Async function always return a Promise, on this scenario we return void Promise @@ -95,7 +143,7 @@ export default class AsyncAwaitPnPJs extends React.Component PnP JS Logger - // https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Logging - // 2. Log object => SPFx Logger - // https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-the-Logging-API - //////////////////////////////////////////////////////////////////////// - // [PnP JS Logging] activate Info level - Logger.activeLogLevel = LogLevel.Info; - // [PnP JS Logging] create a custom FunctionListener to integrate PnP JS and SPFx Logging systems - let listener = new FunctionListener((entry: LogEntry) => { - // get React component name - const componentName: string = (this as any)._reactInternalInstance._currentElement.type.name; - // mapping betwween PnP JS Log types and SPFx logging methods - // instead of using switch we use object easy syntax - const logLevelConversion = { Verbose: "verbose", Info: "info", Warning: "warn", Error: "error" }; - // create Message. Two importante notes here: - // 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru. - // 2. Use JavaScript´s Error constructor allows us to output more than 100 characters using SPFx logging - const formatedMessage: Error = new Error(`Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`); - // [SPFx Logging] Calculate method to invoke verbose, info, warn or error - const method = logLevelConversion[LogLevel[entry.level]]; - // [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging - Log[method](componentName, formatedMessage); - }); - // [PnP JS Logging] Once create the custom listerner we should subscribe to it - Logger.subscribe(listener); + private _gerErrors() { + return this.state.errors.length > 0 + ? +
+
Errors:
+ { + this.state.errors.map((item) => { + return (
{JSON.stringify(item)}
); + }) + } +
+ : null } + }