先行リリースの機能として SharePoint Online のモダン リストに新たに追加された Column formatting という機能を試してみました。この機能は、Excel でいうとセルの条件付き書式のような機能となっており、列に入力された値に応じて文字の色を変えたり、アイコンを表示したりといったカスタマイズが行えます。下図のサンプルは、Microsoft さんのものを拝借しました。

こうしたカスタマイズは従来のリストでは JS リンクといった機能を利用して実現できましたが、Column formatting はそれのモダン リスト版となっており、JS リンクと同様に簡単にカスタマイズが行えるようになっています。後述の GitHub に華やかなサンプルがありますが、そのサンプルを迷いなく利用したり、ちょっと手を加えて自分好みにカスタマイズしていくためにも、基礎を抑えながら動作を見ていきたいと思います。

それでは、さっそく試してみましょう。

Column formatting の設定を開く

Column formatting は、現在のところリスト(やライブラリ)の列のメニューにあります。下図のようにたどるとコードを書き込むパネルが開きます。

はじめの一歩

現時点では、Column formatting を利用するためには JSON を記述する必要があります。もっとも基本的なコード例は下記のようなものかと思います。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "span",
    "txtContent": "@currentField"
}

1 行目の $schema を指定すると、Visual Studio Code での編集時にコード補完が効きます。そのため、空の .json ファイルを Visual Studio Code で開くところから作業を始めると作成が楽になります。

というわけで、Visual Studio Code を利用しましょう!

Visual Studio Code
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

2 行目の elmType では、リストの列のセルの中に span タグを挿入し、その中に 3 行目の txtContent で指定した文字列を書き出します。ここで指定している @currentField は、リスト列に入力された値を表す決まり文句のようです。つまりこのコードの例では、リスト列のセルの中に <span>列の値</span> を書き出すという意味になります。

見た目的にはいつもと同じですね。

文字の色を変える

文字の色を変えるためには、span タグに style 属性を追加し、color を指定します。ついでに太字にするために font-weight も指定してみました。そのためのコードは、下記のようになります。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "span",
    "txtContent": "@currentField",
    "style": {
        "color": "#ff0000",
        "font-weight": "bold"
    }
}

このようにすると、span タグに style 属性が追加され、スタイルとして colorfont-weight が指定されます。つまりこのコードの例では、リスト列のセルの中に <span style="color:#ff0000;font-weight:bold;">列の値</span> を書き出すという意味になります。

赤い太字になったのが分かります。

条件によって色を変える

次は、いよいよこの Column formatting にもっとも期待されるであろう、条件に応じて表示を変えるパターンです。そのためのコードは下記のようになります。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "span",
    "txtContent": "@currentField",
    "style": {
        "color": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        "@currentField",
                        "高い"
                    ]
                },
                "#ff0000",
                ""
            ]
        },
        "font-weight": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        "@currentField",
                        "高い"
                    ]
                },
                "bold",
                ""
            ]
        }
    }
}

さっきのものと同様に style の中に colorfont-weight を指定しているのですが、color の指定方法として、今度は operatoroperands というものを使っています。Column formatting では、このふたつが重要なものとなっており、これを駆使することでさまざまな条件に応じた処理などを組み込むことができます。

今回利用した operator は ? ですが、これは条件演算子と同じ意味を持ちます。operator の下にある operands の配列にはカンマで区切られた 3 つの値が入っており、ひとつ目が「条件」、二つ目が「条件が真のときの出力」、三つ目が「条件が偽のときの時の出力」となっています。

この条件の判定にも operator を利用しますが、今回の例では == を利用していますので、その下の operands の配列に入っている二つの値が一致しているときに「真」となります。つまりは列の値が「高い」のときに「真」になるという条件になっています。

つまりこのコードの例では、リスト列のセルの中に、列の値が「高い」の時には <span style="color:#ff0000;font-weight:bold;">列の値</span> を、列の値がそれ以外の時には <span style="color:;font-weight:;">列の値</span> を書き出すという意味になります。

「高い」のところだけ、赤い太字になりました。ちなみに、さらに条件の分けのパターンを増やしていくためには、三つ目の「条件が偽のときの出力」のところに operator を入れ子のようにして書いていきます。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "span",
    "txtContent": "@currentField",
    "style": {
        "color": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        "@currentField",
                        "高い"
                    ]
                },
                "#ff0000",
                {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "==",
                            "operands": [
                                "@currentField",
                                "普通"
                            ]
                        },
                        "#00ff00",
                        ""
                    ]

                }
            ]
        },
        "font-weight": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        "@currentField",
                        "高い"
                    ]
                },
                "bold",
                ""
            ]
        }
    }
}

「高い」ところが太い赤字になっており、「普通」のところは緑字(太字ではない)になっています。

繰り返しにはなりますが、この operatoroperands の書き方やルールを理解するのが Column formatting を使いこなしていくためには重要だと思います。

リンク タグを書き出す

そのほか、よく利用されそうなパターンとして、リスト列のセルの中に任意のタグを書き出すというものがあるかと思います。今回はリンク タグ、つまりは a タグを書き出してみたいと思います。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "span",
    "children": [
        {
            "elmType": "a",
            "txtContent": "@currentField",
            "attributes": {
                "href":{
                    "operator": "+",
                    "operands": [
                        "https://www.google.co.jp/search?q=",
                        "@currentField"
                    ]   
                },
                "target": "_blank"
            }
        }
    ]
}

この例では、children を利用し、span タグの中に a タグを入れ、attributes として hreftarget を指定しています。また、href の指定方法として、またまた operator を利用し、今度は + を指定することで、operands の中の文字列を結合しています。

つまりこのコードの例では、リスト列のセルの中に、<span><a href="https://www.google.co.jp/search?q=列の値" target="_blank">列の値</a></span> を書き出すという意味になります。

列の値のところがリンクになりました。クリックすると別窓で Google の検索結果画面が開きます。

他の列の値を利用する

最後は、こちらもよく利用されそうな、他の列の値を参照する書き方です。今回は単純に他の列の値をそのまま表示してみます。

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "div",
    "txtContent": "[$_x53c2__x7167__x5143_]"
}

他の列の値を参照するためには、[$_x53c2__x7167__x5143_] のように指定します。列の内部名を使って指定するという点に注意が必要です。

他の列の値がそのまま表示されました。

内部名ってなに?という場合は、過去の記事をご参照ください。

SharePoint 2013 で列の内部名を調べる方法
http://idea.tostring.jp/?p=470

IE11 対応がいまいち?

検証しているときは Google Chrome を利用して行っていたのですが、IE11 で見たところセルの中のレイアウトが崩れており、文字が上にズレて表示されていました…

こちらが Chrome の表示(ちなみに、Microsoft Edge もこの表示)

こちらが IE11 の表示、文字が上にズレてますよね…

とはいえ、機能的には問題はなさそうです。

もっと詳しく知りたい方は

より詳細な内容を知りたい方は、ぜひ公式のリファレンスにも目を通してみてください。

Use column formatting to customize SharePoint
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

また、いくつかのサンプルが GitHub で公開されていますので、こちらもどうぞ。

GitHub – SharePoint/sp-dev-column-formatting: Centralized storage location for open source sample column formatting json files
https://github.com/SharePoint/sp-dev-column-formatting

サンプルでは、アイコンを表示させたり、背景の色を変えたりと、すぐに使えそうなものや、すぐに使いたい!と思うものもありますね。

さいごに

といった感じで Column formatting の機能を試してみました。いきなりコードを見るとややこしそうな印象を持たれるかもしれないのですが、順を追って見ていき、記述のルールが分かってしまえばそこまで難しくないと思います。とは言え、やはりコードを書くことにある程度の理解がある方向けの機能という感じでしょうか?将来的には完全にコードなしで実現できるようする!というロードマップではあるようなので、そちらも期待しながら待ちたいと思います。

SharePoint Online のモダン リストも徐々に機能が拡張されてきましたので、普段の利用では困る場面も少なくなってきたのではないかなと思います。あとはいつ切り替えるかという運用上の問題でしょうか…ね?