モダン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
サンプル
では、実際にこの機能を使ってみたいと思います。
まずはお試し用のリストを作成しました。
デフォルトの状態だと文字や数字が並ぶだけで、「売上げが目標を超えているか」など、少しわかりづらいと思います。
ということで、例えば 売上 列の書式設定を以下のようにしてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
{ "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json", "elmType": "div", "style": { "height": "100px", "position": "relative" }, "children": [ { "elmType": "div", "txtContent": "@currentField", "style": { "width": { "operator": "+", "operands": [ { "operator": "*", "operands": [ "@currentField", 0.1 ] }, "%" ] }, "height": "40px", "line-height": "40px", "display": "block", "text-align": "center", "color": "white", "background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "[$Department]", "A部" ] }, "#48466d", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "[$Department]", "B部" ] }, "#3d84a8", "#46cdcf" ] } ] } } }, { "elmType": "div", "txtContent": "[$Target]", "style": { "color": "red", "text-align": "right", "position": "absolute", "top": "0px", "left": "0px", "width": { "operator": "+", "operands": [ { "operator": "*", "operands": [ "[$Target]", 0.1 ] }, "%" ] }, "height": "100%", "margin": "0px", "border-right": "2px solid red" } } ] } |
※Department は 部署 列の内部名、Target は 目標 列の内部名
結果…
こうなりました。売上 列の数字を棒グラフにし、目標 列の数字を赤線で加えることで、ぱっと見でわかりやすくなりました。
ついでなので他の列も変更してみます。
部署ごとに色分けし、目標 列は円グラフにしてみました。わかりづらいかもしれませんが、資料 列はリンクとなっています。
何も設定していない状態と比べると全然違いますね。やはり数字はグラフにした方がわかりやすいと思います。
欠点
さて、Column Formatting(列の書式設定)の効果は見ての通りですが、当然万能ではなく欠点が存在します。
①ページ描画時の列幅を調整することはできない。
ページ描画時の列幅は自動で決められてしまいます。
書式設定でその幅を超えるような記述をしたとしても、超えた分が見切れるだけです(手動で列幅を大きくすれば見れますが)。
②ビューに表示されていない列の値を使用することはできない。
他の列の書式設定で値を使いたい列は、必ず表示するようにしましょう。
③新しいUI(モダンUI)しか対応していない。
書式設定をしても、旧UI(クラシックUI)では何も変更されませんのであしからず。
④使えるものが少ない。
現時点ではプレビュー機能ということもあり、使える要素やメソッドが少ないです。
JSON形式での設定ということもあり、JS Link のように JavaScript で好き放題やる、といったことは不可能です。
⑤書き方が面倒くさい。
JavaScriptであれば全く大したことのない記述が、この書式設定ではとてもわかりづらい記述に様変わりします。
可読性も低いため、正直「なぜJSONにしたんだ…」と思うくらいです。
以上、Column Formatting(列の書式設定)でしたが、いかがでしょうか?
まだプレビュー機能ということもありできることは限られていますが、「通常のリストビューでは物足りないし、少し色をつけてみたりしたいな」といったご要望には簡単に応えられる機能だと思います。
以上、最後までご愛読いただき
ありがとうございました。
お問い合わせは、
以下のフォームへご連絡ください。