【SPFx】プロパティペインのカスタマイズ方法

f:id:tecchan365:20190811224310p:plain
SharePoint FrameworkでWebパーツを作成するときの、プロパティペインのカスタマイズ方法です。

プロパティペインの構成

プロパティペインは、「ページ」「ヘッダー」「グループ」の3要素で構成されています。

f:id:tecchan365:20190811213434p:plain

こちらの構成情報は、WebパーツクラスのgetPropertyPaneConfiguration メソッドにプログラムされています。

f:id:tecchan365:20190811214249p:plain

つまり、このgetPropertyPaneConfiguration メソッドを修正していけば、プロパティウィンドウをカスタマイズしていけます。

プロパティウィンドウのフィールドの種類

プロパティウィンドウのフィールドの種類は、以下の通りです。

  • ボタン
  • チェックボックス
  • 選択肢グループ
  • ドロップダウン
  • 水平ルーラー
  • ラベル
  • リンク
  • スライダー
  • テキスト ボックス
  • 複数行テキスト ボックス
  • 表示/非表示
  • カスタム

f:id:tecchan365:20190811224934p:plain

これらのフィールドの種類を使用するには、@microsoft/sp-webpart-baseからモジュールをインポートします。

f:id:tecchan365:20190811215220p:plain

プロパティを追加

プロパティを追加するには、Webパーツクラスのインターフェースに定義します。

f:id:tecchan365:20190811220549p:plain

プロパティウィンドウに、グループを追加する

プロパティにグループを追加するには、 getPropertyPaneConfiguration メソッドにグループを定義していきます。

f:id:tecchan365:20190811222551p:plain

gulp serve で実行してみると、グループが追加されていることが確認できます。

f:id:tecchan365:20190811222708p:plain

ページを追加

ページを追加するには、getPropertyPaneConfiguration メソッドを以下のように定義します。

f:id:tecchan365:20190811223634p:plain

gulp serve で実行してみると、ページが追加されていることが確認できます。

f:id:tecchan365:20190811224136p:plain

【SPFx】GitHubのサンプルの紹介(拡張機能)

f:id:tecchan365:20190803172104p:plain
GitHub上に公開されているSharePoint Framework Extentions(拡張機能)の個人的おすすめを掲載していきます。

js-command-clone

アイテム複写の拡張機能

f:id:tecchan365:20190811172630p:plain

github.com

js-command-convert-to-pdf

PDF変換の拡張機能

f:id:tecchan365:20190811172920p:plain

github.com

react-application-duetasks

タスクがあった場合、アラートを表示してくれる拡張機能

f:id:tecchan365:20190811173350p:plain

github.com

【Outlook】RSSフィードで、SharePoint上のドキュメントやリストの変更通知を受け取る

f:id:tecchan365:20190805221638p:plain

RSS(Really Simple Syndication)フィードを購読することによって、SharePoint上のドキュメントやリストアイテムの追加・変更に関する最新情報を常に受け取ることができます。

Outlookで リストまたはライブラリのRSSフィードを購読する

RSSフィードを購読するリストを開き、[すべてのアイテム] > [現在のビューを編集] の順にクリックします。

f:id:tecchan365:20190805215556p:plain

RSSフィードのアイコンをクリックします。

f:id:tecchan365:20190805215822p:plain

URLをコピーします。

f:id:tecchan365:20190805221323p:plain

Outlook を開き、[RSSフィード] > [新しいRSSフィードの追加] の順にクリックします。

f:id:tecchan365:20190805220628p:plain

先程コピーしたURLを貼り付けて、[追加] ボタンをクリックします。

f:id:tecchan365:20190805220727p:plain

[はい] をクリックすると、設定が完了します。

f:id:tecchan365:20190805220903p:plain

設定後は、リストやドキュメントに追加・変更があった場合、以下のような通知がされるようになります。

f:id:tecchan365:20190805221038p:plain

以上です。