【SharePoint】リストフォームをカスタマイズしてみた

f:id:tecchan365:20210109161726p:plain

アップデートにより、上図のようにリストフォームを JSON コードを利用してカスタマイズできるようになりました。(※ご利用のテナントによっては、まだこの機能が展開されておらず、カスタマイズできない可能性があります)

カスタマイズできる箇所は、次の 3 箇所です。

  • ヘッダー(Header)
  • ボディ (Body)
  • フッター(Footer)

f:id:tecchan365:20210109163417p:plain

詳細なカスタマイズ方法は、次の公式ドキュメントに記載されています。

docs.microsoft.com

以下に、実際に作成してみたヘッダーとフッターのサンプルを掲載します。
いずれのサンプルも、サイトのテーマにあわせて色が変わるようになっています。

ヘッダーサンプル

ヘッダーサンプル 1

f:id:tecchan365:20210109161151p:plain

github.com

ヘッダーサンプル 2

f:id:tecchan365:20210109161222p:plain

github.com

ヘッダーサンプル 3

f:id:tecchan365:20210109161348p:plain

github.com

ヘッダーサンプル 4

f:id:tecchan365:20210109161529p:plain

github.com

ヘッダーサンプル 5

github.com

ヘッダーサンプル 6

f:id:tecchan365:20210121194238p:plain

github.com

ヘッダーサンプル 7 (2022/01/25 追加)

f:id:tecchan365:20220125223732p:plain

ヘッダーサンプル 8 (2022/03/09 追加)

f:id:tecchan365:20220309062955p:plain

※絵文字を利用し Clippy を表示しています。そのため、Windows 11 以外は Clippy ではなく、ただのクリップ絵文字が表示されます。

フッターサンプル

フッターサンプル 1

f:id:tecchan365:20210109161815p:plain

github.com

フッターサンプル 2

f:id:tecchan365:20210109161929p:plain

github.com