Skip to content

FieldRendererHelper class

FieldRendererHelper class is used to automatically apply needed Field Control based on current Field parameters.

How to use this class in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.

  • Import the following modules to your component:

import { FieldRendererHelper } from "@pnp/spfx-controls-react/lib/Utilities/FieldRendererHelper";
  • Use the FieldRendererHelper.getFieldRenderer method to asynchronously request proper React control (As the method returns Promise it should be called in one of React component lifecycle methods, for example, componentWillMount that will occur before render):
public componentWillMount() {
    FieldRendererHelper.getFieldRenderer(fieldValue, {
      className: this.props.className,
      cssProps: this.props.cssProps
    }, this.props.listItem, this.props.context).then(fieldRenderer => {
        // update state to re-render the Field Customizer
      this.setState({
        fieldRenderer: fieldRenderer
      });
    });
  }
  • Render the requestted fieldRenderer:
public render(): React.ReactElement<{}> {
    return (
      <div className={styles.cell}>
        {this.state.fieldRenderer}
      </div>
    );
  }

Implementation

The FieldRendererHelper class contains single method getFieldRenderer with next signature:

public static getFieldRenderer(fieldValue: any, props: IFieldRendererProps, listItem: ListItemAccessor, context: IContext): Promise<JSX.Element>

Parameters:

Parameter Type Description
fieldValue any Value of the field.
props IFieldRendererProps Basic properties interface for Field Controls. Contains className and cssProps properties
listItem ListItemAccessor Current List Item
context IContext SPFx Context