spfx-ootb-fields v1.2.1

spfx-ootb-fields

IMPORTANT UPDATE: this package was included in PnP React Controls package. Please, use PnP React Controls to get latest and greatest of Fields Controls as well.

This repository contains a set of React components that can be used in SPFx Field Customizers to provide rendering of the fields similar to out of the box experience. Additional benefit is ability to set custom css classes and styles to the component. Related UserVoice requests: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/18810637-access-to-re-use-modern-field-render-controls https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/31530607-field-customizer-ability-to-call-ootb-render-meth

Getting started

Installation

To get started you need to install this package to your project and also dependency package @microsoft/sp-dialog.

Enter the following commands to install dependencies to your project:

npm i spfx-ootb-fields --save
npm i @microsoft/sp-dialog --save

Configuration

Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property:

"OotbFieldsStrings": "./node_modules/spfx-ootb-fields/lib/loc/{locale}.js"

Usage

The main scenario to use this package is to import FieldRendererHelper class and to call getFieldRenderer method. This method returns a Promise with a proper field renderer (Promise<JSX.Element>) based on field's type. It means that it will automatically select proper component that should be rendered in this or that field. This method also contains logic to correctly process field's value and get correct text to display (for example, Friendly Text for DateTime fields). As the method returns Promise it should be called in one of React component lifecycle methods, for example, componentWillMount that will occur before render. The resulting field renderer could be saved in the element's state and used later in render method. Here is an example on how it can be used inside custom Field Customizer component (.tsx file):

export interface IOotbFieldsState {
  fieldRenderer?: JSX.Element;
}

//...

@override
  public componentWillMount() {
    FieldRendererHelper.getFieldRenderer(this.props.value, {
      className: this.props.className,
      cssProps: this.props.cssProps
    }, this.props.listItem, this.props.context).then(fieldRenderer => {
      this.setState({
        fieldRenderer: fieldRenderer
      });
    });
  }

public render(): React.ReactElement<{}> {
    return (
      <div className={styles.cell}>
        {this.state.fieldRenderer}
      </div>
    );
  }

Additionally, any of included components can be used by itself.

Controls

Here is a list of the controls included in the package with a description which field types are covered with the specific control. All controls contain next common properties in React props object: cssProps?: React.CSSProperties - CSS properties to apply to the renderer className?: ICssInput - CSS classes to apply to the renderer

Utilities Classes

Here is a list of Utilities classes and public methods that are included in the package and could be also helpful:

Additional Information

The repository also contains Field Customizer to test the functionality

Debug Url

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"57ebd944-98ed-43f9-b722-e959d6dac6ad"}}

Release Notes

Contribution

Please, feel free to report any bugs or improvements for the repo. If you're going to add a PR please, reference dev branch instead of master.