SharePoint FrameworkでWebパーツを作成するときの、プロパティペインのカスタマイズ方法です。
プロパティペインの構成
プロパティペインは、「ページ」「ヘッダー」「グループ」の３要素で構成されています。
こちらの構成情報は、WebパーツクラスのgetPropertyPaneConfiguration メソッドにプログラムされています。
つまり、このgetPropertyPaneConfiguration メソッドを修正していけば、プロパティウィンドウをカスタマイズしていけます。
プロパティウィンドウのフィールドの種類
プロパティウィンドウのフィールドの種類は、以下の通りです。
- ボタン
- チェックボックス
- 選択肢グループ
- ドロップダウン
- 水平ルーラー
- ラベル
- リンク
- スライダー
- テキスト ボックス
- 複数行テキスト ボックス
- 表示/非表示
- カスタム
これらのフィールドの種類を使用するには、@microsoft/sp-webpart-baseからモジュールをインポートします。
プロパティを追加
プロパティを追加するには、Webパーツクラスのインターフェースに定義します。
プロパティウィンドウに、グループを追加する
プロパティにグループを追加するには、 getPropertyPaneConfiguration メソッドにグループを定義していきます。
gulp serve で実行してみると、グループが追加されていることが確認できます。
ページを追加
ページを追加するには、getPropertyPaneConfiguration メソッドを以下のように定義します。
gulp serve で実行してみると、ページが追加されていることが確認できます。
