Skip to content

Placeholder control

This control renders a placeholder which can be used to show a message that the web part still has to be configured.

Placeholder control output

How to use this control 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 { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
  • Use the Placeholder control in your code as follows:
<Placeholder
  iconName='Edit'
  iconText='Configure your web part'
  description='Please configure the web part.'
  buttonLabel='Configure'
  onConfigure={this._onConfigure} />
  • With the onConfigure property you can define what it needs to do when you click on the button. Like for example opening the property pane:
private _onConfigure() {
  // Context of the web part
  this.props.context.propertyPane.open();
}

Implementation

The placeholder control can be configured with the following properties:

Property Type Required Description
buttonLabel string no Text label to be displayed on the button bellow the description. The button is optional.
contentClassName string no This is the className that is applied to the root element of the content zone. You can use this to apply custom styles to the placeholder.
description string yes Text description for the placeholder. This appears bellow the Icon and IconText.
iconName string yes The name of the icon that will be used in the placeholder. This is the same name as you can find on the Office UI Fabric icons page: Office UI Fabric icons. For example: Page or Add.
iconText string yes Heading text which is displayed next to the icon.
onConfigure function no onConfigure handler for the button. The button is optional.