ビューの書式設定(View Formatting)を触ってみた

弊社ブログをご愛読者の皆様、お疲れ様です。MS開発部の種田です。
今回は、少し前にリリースされたビューの書式設定(View Formatting)について少し見ていきたいと思います。
こちらの記事で列の書式設定について記載しておりますが、ビューの書式設定との違いは行単位で表示を変更できるというところになります。(列の書式設定は列単位)
例えば以下のようなビューがあった時、期限が超過しているアイテムのタイトル列を赤背景色に変更したい時は列の書式設定を利用、アイテムの行単位で背景色を赤に変更したい時はビューの書式設定を利用します。

■(例)列の書式設定

■(例)ビューの書式設定

またビューの書式設定ではヘッダー行(列名)を非表示にしたり、行を選択状態にさせない設定なども可能となり、書式設定の制限内でオリジナルの描写(HTML)に変更することも可能です。
つまりはモダンデザインの標準的な表示は列と行(アイテム)のいわゆる表形式でデータ一覧が表示されますが、ビューの書式設定を利用することで、表形式ではない表示も可能となることになります。(ここまでくるとSPFxでビューをレンダリングする拡張機能を作らなくても、ある程度の表示形式にカスタマイズできそうですね)
ビューの書式設定機能のリリースに伴い、以前あったJSリンクに近いことができるようになった印象です。

実際に使ってみた

色々と前置きが長くなりましたが、実際に使ってみます。
まずはよくある?FAQを纏めたリスト(カテゴリー・質問・回答の3つの列)を用意!
※よくある質問とその回答を運用者が記載し、一覧表示させておくことで社内規則や部内FAQなどを周知する効果があります。

このままでもまあ十分ですが、ビューの書式設定を使うと・・・

見た目が少しよくなりましたね!内容によっては少し見た目に手を加えたほうがユーザーさんの目にもとまりやすく、また記載されている情報が読み取り易くなります。
SPFxのように開発ツールを利用する必要も無く、書式設定のJSONを記述するだけでなので敷居もかなり低く、またFlowの起動ボタンを設置したり、投稿者のサムネイルを表示したりなどモダンな使い方もできるようです。(上記のようなものもさくっと作れます)

ウェブパーツ経由でも表示可能!

今年の5月頃のアップデートによりウェブパーツ経由でも書式設定が反映されるようになりました。
列の書式設定はもちろん、ビューの書式設定もウェブパーツ経由で表示できます。
これでWeb Parts間のデータやり取り(いわゆる接続設定)などがあれば、同一ページ内でのカスケードなど(SPFxを利用せずに)できることが増えてくるかと思うので、是非アップデートで機能が増えてほしいものです。
(同一ページ内で親データを選択すると、それに付随する子データのみがページの下部にフィルター表示されるなど、用途や考えは色々あるのでマイクロソフト様がもしこれを見ていたら接続機能の追加をご検討いただけますと幸いです!笑)
■ページにList Web Parts経由で表示

ビューの書式設定と列の書式設定の優先順位

ビューの書式設定と列の書式設定が設定されていた場合、どちらが優先されるのか気になったので少し検証してみました。
まずは列の書式設定にてカテゴリーを青色+太字にしてみます。

この状態でビューの書式設定を当てると・・

まあ予想通りです。
上記の例は完全に行レイアウトをカスタムしているので、列の書式設定が無視されるのも納得です。
これとは別のパターンでadditionalRowClassを使用するいわゆる条件付き書式(今回の場合はカテゴリーの値が○○なら行の背景色を△△に変更する書式)を設定すると・・・

列の書式設定と共存できますね!
これ上手く利用すればエクセルで共有しているちょっとしたデータをSharePoint上にそこそこの再現性をもって置き換えも可能です。

いかがでしたでしょうか。ここまでお読みいただき誠に有難うございます。
色々と新機能がアップデートされていく中で今回はビューの書式設定について記載致しましたが、上記内容やその他弊社の業務内容などにご興味のある方は、お気軽にお問い合わせください
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)

 

以上、最後までご愛読いただきありがとうございました。

コメントは利用できません。