SharePoint Framework (SPFx) には、2つの種類があります。
- Webパーツ
- 拡張機能
Webパーツについては想像がつきやすいかと思いますが、拡張機能が分かりづらかったので本稿執筆時点で実現可能なことをまとめました。
とりあえず、ざっくり
以下が実現できます。
- ページ全体にJavaScript / CSSを適用
- ページのヘッダーとフッターを構築
- リスト / ライブラリのビューでフィールド描画をカスタマイズ
- リスト / ライブラリのビューでカスタムコマンドを構築
拡張機能の種類
拡張機能には以下の種類があり、それぞれ出来ることが異なります。
- アプリケーション カスタマイザー
- フィールド カスタマイザー
- リストビュー コマンドセット
それぞれ概説します。
アプリケーション カスタマイザー
ページ全体、又は特定のプレースホルダに手入れをするための機能です。
JavaScript / CSSを読み込んだり、プレースホルダ内にHTMLを追加したりすることができます。
ページ全体のカスタマイズ
ページ全体にJavaScript / CSSを読み込むことで、大幅なレイアウト変更から小さな機能追加まで様々なことができますが、SharePointのDOM要素に依存する作りはあまりお勧めできません。何故ならSPFxはモダン表示とクラシック表示との両方に効いてきますので、双方のDOM要素の違いに対応しづらいからです。またSharePointのアップデートによって動かなくなる可能性もあります。
プレースホルダ
「プレースホルダ」とは、SharePoint (モダン表示)が標準で用意している描画領域のことです。現時点でSPFxから利用できるプレースホルダは以下の通りです。
- ヘッダ
- フッタ
SPFxを開発する際は、DOM要素ではなくプレースホルダ名を指定した操作ができますので、アップデートに強いという特徴があります。例えばヘッダにdiv要素を追加したい場合、以下のようになります。
let topPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top);topPlaceholder.domElement.innerHTML = '<div>TEST</div>';
実際にはもっとたくさんのコードが必要になりますが、PlaceholderContentクラスを介して操作することでヘッダのDOM要素を特定する必要がありません。
これまた雑で恐縮ですがヘッダとフッタの領域は上記画像の位置にあります。ページをスクロールしても常に表示されています。
フィールド カスタマイザー
フィールド カスタマイザーは、リスト / ライブラリのフィールド描画をカスタマイズするための機能です。現時点ではモダン表示のビューのみに対応しており、アイテム新規 / 編集 / 詳細画面はカスタマイズ不可となっています。クラシック表示にも対応していません。
カスタマイズ範囲はフィールド１つ分の描画のみで、ビュー全体に対する手入れはできません。(例えばグループ化機能のカスタマイズなどは実現不可です。)
例として「カスタムフィールド1」列にSPFxを適用し、固定文字列「Hello!:」を追加しました。このように特定フィールドの描画を変更できます。
現時点では、SPFxよりも先に列の書式変更を検討し、実現不可の場合にのみフィールドカスタマイザーを開発することになりそうです。
列の書式設定で SharePoint をカスタマイズする | Microsoft Docs
クラシック表示で列の描画を変更したい場合には、JSLinkを検討してください。
SharePoint Onlineのカスタマイズ方法 - 鍋綿ブログ
リストビュー コマンドセット
リストビューコマンドセットでは、リスト / ライブラリのビューに自作のコマンドボタンを追加することができます。常に表示するボタンと、アイテムを選択した場合に表示するボタンの両方を追加可能です。クラシック表示の時代には、SharePoint Designerでやっていました。
描画領域が足りない場合は「…」の中に隠してくれたりして中々いい感じです。ボタンクリックイベントはJavaScriptで実装します。
〆
モダン表示の機能も徐々に機能が拡大してきて、そろそろカスタマイズも含め実際の運用に乗せたい感じになってきました。今後メインの開発スキームになっていくであろうSPFxも覚えないといけませんね。