モダンUIでリストビューの列表示を変更

こんにちは、MS開発部の 荒井 です。

以前、弊社ブログにて「JS Linkを使ってリストのビューをカスタマイズ」をご紹介いたしましたが、最近SharePointOnlineで推進されている新しいUI（モダンUI）のリストビューでは、JS Link の機能が用意されていません。

ただ、つい先日プレビューではありますが Column Formatting（列の書式設定） という機能が登場しましたので、こちらのご紹介をしたいと思います。

設定

設定する方法は2種類あり、
①リストビューの列の項目から 列の設定 > この列の書式設定

②リストの設定 > 列の編集 画面の下にある 列の書式設定

のどちらからでもできます。

設定は JS Link のような JavaScript ではなく、JSON形式での編集になります。

詳しくは公式の以下のページを参考にしてください。
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting

サンプル

では、実際にこの機能を使ってみたいと思います。
まずはお試し用のリストを作成しました。

デフォルトの状態だと文字や数字が並ぶだけで、「売上げが目標を超えているか」など、少しわかりづらいと思います。

ということで、例えば 売上 列の書式設定を以下のようにしてみます。

※Department は 部署 列の内部名、Target は 目標 列の内部名

結果…

こうなりました。売上 列の数字を棒グラフにし、目標 列の数字を赤線で加えることで、ぱっと見でわかりやすくなりました。

ついでなので他の列も変更してみます。

部署ごとに色分けし、目標 列は円グラフにしてみました。わかりづらいかもしれませんが、資料 列はリンクとなっています。
何も設定していない状態と比べると全然違いますね。やはり数字はグラフにした方がわかりやすいと思います。

欠点

さて、Column Formatting（列の書式設定）の効果は見ての通りですが、当然万能ではなく欠点が存在します。

①ページ描画時の列幅を調整することはできない。
ページ描画時の列幅は自動で決められてしまいます。
書式設定でその幅を超えるような記述をしたとしても、超えた分が見切れるだけです（手動で列幅を大きくすれば見れますが）。

②ビューに表示されていない列の値を使用することはできない。
他の列の書式設定で値を使いたい列は、必ず表示するようにしましょう。

③新しいUI（モダンUI）しか対応していない。
書式設定をしても、旧UI（クラシックUI）では何も変更されませんのであしからず。

④使えるものが少ない。
現時点ではプレビュー機能ということもあり、使える要素やメソッドが少ないです。
JSON形式での設定ということもあり、JS Link のように JavaScript で好き放題やる、といったことは不可能です。

⑤書き方が面倒くさい。
JavaScriptであれば全く大したことのない記述が、この書式設定ではとてもわかりづらい記述に様変わりします。
可読性も低いため、正直「なぜJSONにしたんだ…」と思うくらいです。

以上、Column Formatting（列の書式設定）でしたが、いかがでしょうか？
まだプレビュー機能ということもありできることは限られていますが、「通常のリストビューでは物足りないし、少し色をつけてみたりしたいな」といったご要望には簡単に応えられる機能だと思います。