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

2017.11.29

荒井

こんにちは、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

サンプル

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

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

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

{
    "$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 は目標列の内部名

結果…

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