こんにちは、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（列の書式設定）でしたが、いかがでしょうか？
まだプレビュー機能ということもありできることは限られていますが、「通常のリストビューでは物足りないし、少し色をつけてみたりしたいな」といったご要望には簡単に応えられる機能だと思います。
弊社の業務内容などにご興味のある方は、お気軽にお問い合わせください。
（お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。）
荒井
最新記事 by 荒井 (全て見る)
- Power Automate での SharePoint アイテム更新について - 2020年10月19日
- Power Automate (旧 Microsoft Flow) でアイテムの権限を変更する (2) - 2020年6月29日
- SharePoint モダンのリストビューでより多くのアイテムを見たい - 2020年5月15日
