【SPFx】PnP Controlsを利用する

f:id:tecchan365:20190815171512p:plain

PnP Controlsを利用して、プロパティペインを作成する方法です。

@pnp/spfx-property-controls をインストール

Webパーツのソリューションを開き、以下のコマンドを実行します。

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

@pnp/spfx-property-controls がインストールされます。

f:id:tecchan365:20190815163418p:plain

@pnp/spfx-property-controls を利用する

Webパーツクラスのファイルを開き、モジュールをインポートします。

f:id:tecchan365:20190815164148p:plain

getPropertyPaneConfiguration() メソッドに、表示するコントロールを入力します。

f:id:tecchan365:20190815164636p:plain

gulp serve で実行してみると、カラーパレットが表示されていることが確認できます。

f:id:tecchan365:20190815164755p:plain

以上、PnP Controls を利用する方法でした。

カラーパレットの他にも、さまざまなコントロールが用意されています。
詳細は、下記を参照ください。

sharepoint.github.io

github.com