From dd97d5646956d78ac63e210dd778841001eae971 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 6 Mar 2018 16:47:20 -0800 Subject: [PATCH 1/2] Lookup Field Renderer Optimization --- src/common/utilities/FieldRendererHelper.ts | 22 ++-- .../FieldLookupRenderer.tsx | 101 +++++++++++++----- 2 files changed, 89 insertions(+), 34 deletions(-) diff --git a/src/common/utilities/FieldRendererHelper.ts b/src/common/utilities/FieldRendererHelper.ts index 55c187614..0c5a20d55 100644 --- a/src/common/utilities/FieldRendererHelper.ts +++ b/src/common/utilities/FieldRendererHelper.ts @@ -132,16 +132,18 @@ export class FieldRendererHelper { break; case "Lookup": case "LookupMulti": - SPHelper.getLookupFieldListDispFormUrl(field.id.toString(), context).then(dispFormUrlValue => { - const lookupValues = fieldValue as ISPFieldLookupValue[]; - const dispFormUrl: string = dispFormUrlValue.toString(); - resolve(React.createElement(FieldLookupRenderer, { - lookups: lookupValues, - dispFormUrl: dispFormUrl, - ...props - })); - }); - + // + // we're providing fieldId and context. In that case Lookup values will be rendered right away + // without additional lag of waiting of response to get dispUrl. + // The request for DispUrl will be sent only if user click on the value + // + const lookupValues = fieldValue as ISPFieldLookupValue[]; + resolve(React.createElement(FieldLookupRenderer, { + lookups: lookupValues, + fieldId: field.id.toString(), + context: context, + ...props + })); break; case 'URL': SPHelper.getFieldProperty(field.id.toString(), 'Format', context, true).then(format => { diff --git a/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx b/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx index 282ba0442..ba5576352 100644 --- a/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx +++ b/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx @@ -1,6 +1,6 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css, DialogType, Link } from 'office-ui-fabric-react'; +import { css, Dialog, DialogType, Link, Spinner, SpinnerSize } from 'office-ui-fabric-react'; import { ISPFieldLookupValue } from "../../../common/SPEntities"; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; @@ -8,7 +8,16 @@ import * as appInsights from '../../../common/appInsights'; import styles from './FieldLookupRenderer.module.scss'; import IFrameDialog from '../../iFrameDialog/IFrameDialog'; +import { SPHelper } from '../../../Utilities'; +import { IContext } from '../../../Common'; +/** + * Field Lookup Renderer Props + * There are 3 options to provide the props: + * - [recommended, used in FieldRendererHelper] Provide fieldId and context. In that case request for DispUrl will be sent only if a user clicks on the value + * - Provide dispFormUrl: if you know this URL a priori you can provide it into the renderer + * - Provide onClick handler to handle value's click event outside the renderer + */ export interface IFieldLookupRendererProps extends IFieldRendererProps { /** * lookup values @@ -22,14 +31,23 @@ export interface IFieldLookupRendererProps extends IFieldRendererProps { * custom event handler of lookup item click. If not set the dialog with Display Form will be shown */ onClick?: (args: IFieldLookupClickEventArgs) => {}; + /** + * Field's id. + */ + fieldId?: string; + /** + * Customizer context. Must be providede if fieldId is set + */ + context?: IContext; } /** - * For future + * Field Lookup Renderer State */ export interface IFieldLookupRendererState { hideDialog?: boolean; lookupDispFormUrl?: string; + dispFormUrl?: string; } /** @@ -51,7 +69,8 @@ export class FieldLookupRenderer extends React.Component{lookup.lookupValue}; }); return ( -
{lookupLinks} - {!this.state.hideDialog &&
); +
{lookupLinks} + {!this.state.hideDialog && this.state.dispFormUrl &&
); } private _onClick(lookup: ISPFieldLookupValue): void { @@ -92,10 +123,32 @@ export class FieldLookupRenderer extends React.Component { + const dispFormUrl: string = dispFormUrlValue.toString(); + this.setState((prevState, props) => { + if (prevState.hideDialog) { + return; + } + + return { + dispFormUrl: dispFormUrl, + lookupDispFormUrl: `${dispFormUrl}&ID=${lookup.lookupId}&RootFolder=*&IsDlg=1` + }; + }); + }); + } } private _onIframeLoaded(iframe: any): void { From 55e88b697767b6d3f298c25d48cc82a700a17447 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 6 Mar 2018 16:52:29 -0800 Subject: [PATCH 2/2] Documentation update --- .../documentation/docs/controls/fields/FieldLookupRenderer.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md index 66f06eaa9..6993ab58d 100644 --- a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md @@ -22,7 +22,7 @@ import { FieldLookupRenderer } from "@pnp/spfx-controls-react/lib/FieldLookupRen - Use the `FieldLookupRenderer` control in your code as follows: ```TypeScript - +'} context={this.context} className={'some-class'} cssProps={{ background: '#f00' }} /> ``` ## Implementation @@ -36,6 +36,8 @@ The FieldLookupRenderer component can be configured with the following propertie | lookups | ISPFieldLookupValue[] | yes | Lookup field values. | | dispFormUrl | boolean | no | Url of Display form for the list that is referenced by the lookup. | | onClick | (args: ILookupClickEventArgs) => {} | no | Custom event handler of lookup item click. If not set the dialog with Display Form will be shown. | +| fieldId | string | Field's id | +| context | IContext | Customizer context. Must be providede if fieldId is set | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldLookupRenderer)