MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

【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

フッターサンプル

フッターサンプル 1

f:id:tecchan365:20210109161815p:plain

github.com

フッターサンプル 2

f:id:tecchan365:20210109161929p:plain

github.com