IE11 Compatible. Testing and working with IE11 (#203)
* update react-taxonomypicker styles * react async await PnP JS Core with Logging first release * update react * update license * Establish SPFx Context * IE11 compatible
This commit is contained in:
José Quinto
Vesa Juvonen
parent
f0126843a6
commit
f0202c5c7b
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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<IAsyncAwaitPnPJsWebPartProps> {
|
||||
|
||||
// // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework
|
||||
// public onInit(): Promise<void> {
|
||||
// return super.onInit().then(_ => {
|
||||
// // establish SPFx context
|
||||
// pnp.setup({
|
||||
// spfxContext: this.context
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IAsyncAwaitPnPJsProps > = React.createElement(
|
||||
AsyncAwaitPnPJs,
|
||||
|
|
|
|||
|
|
@ -46,9 +46,12 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
: 0;
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className={"ms-Grid-row ms-bgColor-themeDark ms-fontColor-white " + styles.row"}>
|
||||
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint Async Await SP PnP JS Demo!</span>
|
||||
<div>
|
||||
{this._gerErrors()}
|
||||
</div>
|
||||
<p className="ms-font-l ms-fontColor-white">List of documents:</p>
|
||||
<div>
|
||||
<div className={styles.row}>
|
||||
|
|
@ -78,6 +81,51 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
);
|
||||
}
|
||||
|
||||
private _enableLogging() {
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
// enable Logging system
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
// we will integrate PnP JS Logging System with SPFx Logging system
|
||||
// 1. Logger object => 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<IAsyncAwaitPnPJsPro
|
|||
.items
|
||||
.select("Title", "FileLeafRef")
|
||||
.expand("File/Length")
|
||||
.usingCaching()
|
||||
// .usingCaching()
|
||||
.get();
|
||||
|
||||
// use map to convert IResponseItem[] into our internal object IFile[]
|
||||
|
|
@ -116,35 +164,18 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
}
|
||||
}
|
||||
|
||||
private _enableLogging() {
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
// enable Logging system
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
// we will integrate PnP JS Logging System with SPFx Logging system
|
||||
// 1. Logger object => 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
|
||||
?
|
||||
<div style={{ color: "orangered" }} >
|
||||
<div>Errors:</div>
|
||||
{
|
||||
this.state.errors.map((item) => {
|
||||
return (<div>{JSON.stringify(item)}</div>);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue