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

column-formatting

こんにちは、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(列の書式設定)でしたが、いかがでしょうか?
まだプレビュー機能ということもありできることは限られていますが、「通常のリストビューでは物足りないし、少し色をつけてみたりしたいな」といったご要望には簡単に応えられる機能だと思います。

 

弊社の業務内容などにご興味のある方は、お気軽にお問い合わせください。
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)

 

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