SPFx React Controls – Placeholder Control

Last SPFx React Control for now is Placeholder Control which can be used to show a message that the web part still has to be configured.

We can start with new SPFx project:

yo @microsoft/sharepoint

Select WebPart as client-side component.

After project is created, install next dependency to your project. This is for SPFx React Controls.

npm install @pnp/spfx-controls-react --save --save-exact

Open project within Visual Studio Code.

code .

Go to config/config.json file and add the following line to the localizedResources property:

"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"

Then open interface for your Web Part and add second property named input2.

export interface IHelloWorldWebPartProps {
  description: string;
  input2: string;
}

Find method for your Web Part Property Pane configuration settings named getPropertyPaneConfiguration and add Text Field for your newly created property.

PropertyPaneTextField('input2', {
  label: strings.Input2FieldLabel
})

You have to define string for your label and add text for it.

declare interface IHelloWorldWebPartStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  DescriptionFieldLabel: string;
  Input2FieldLabel: string;
}

define([], function() {
  return {
    "PropertyPaneDescription": "Description",
    "BasicGroupName": "Group Name",
    "DescriptionFieldLabel": "Description Field",
    "Input2FieldLabel": "Input2 Field"
  }
});

Open interface for your React Component properties and add web part context property and boolean property named configured. With this boolean property we will check if web part properties are fully configured.

export interface IHelloWorldProps {
  context: WebPartContext;
  configured: boolean;
}

Then open file with class for your React Component and add this import statement for Placeholder element.

import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";

Define _onConfigure method which will be called when you will click on Configure button inside Placeholder:

private _onConfigure() {
    this.props.context.propertyPane.open();
}

Then overwrite default constructor with this one below where you bind this newly created method with your React Component.

constructor(props: IHelloWorldProps) {
    super(props);

    this._onConfigure = this._onConfigure.bind(this);
}

Modify render method like this below. Firstly you have to check if all properties of your web part are configured. If not, show Placeholder for configuration.

public render(): React.ReactElement<IHelloWorldProps> {
    if (this.props.configured) {
      return (
        <div>Configured!</div>
      );
    }
    else {
      return (
        <Placeholder
          iconName='Edit'
          iconText='Configure your web part'
          description='Please configure the web part.'
          buttonLabel='Configure'
          onConfigure={this._onConfigure} />
      );
    }
}

Go back to your class extended from BaseClientSideWebPart and change creation of React Element from React Component in that way you send information to it if all Web Part properties are configured or not.

public render(): void {
    const element: React.ReactElement<IHelloWorldProps > = React.createElement(
      HelloWorld,
      {
        context: this.context,
        configured: (this.properties.description && this.properties.input2) ? true : false
      }
    );

    ReactDom.render(element, this.domElement);
}