SharePoint Online モダンリストの View formatting を試してみた

SharePoint Online

2018.09.07

早く使えないかなと期待していた「View formatting」という機能がターゲットリリースのテナントで利用できるようになっていました。機能の日本語名は「ビューの書式設定」のようですね。

これまでも利用できていた「Column formatting（列の書式設定）」は、文字通り「列」の表示形式を JSON により指定できるものでしたが、この「View formatting（ビューの書式設定）」では、リストやライブラリに登録された「行」つまりは「アイテム」の表示形式を同じく JSON で指定できるものになっています。

ちなみに、Column formatting を試したときの記事は下記のリンク先です。

SharePoint Online モダンリストの Column formatting を試してみた
https://idea.tostring.jp/?p=3163

これにより、モダンリストにおけるビューの表現力がグッと高まると思います。さっそく試してみましょう。

View formatting の設定を開く
2 種類のカスタマイズ方法
additionalRowClass
rowFormatter
さいごに

View formatting の設定を開く

View formatting の設定は、ビューのメニューの中にあります。下図のようにたどると設定パネルが開きます。

2 種類のカスタマイズ方法

まず、View formatting では、カスタマイズの方法として 2 種類が用意されているようです。それが「additionalRowClass」と「rowFormatter」です。

「additionalRowClass」では、アイテムの表示形式をそれほど変えずに、条件に応じた色分けなどを行うことができます。たとえば、アクセスしたユーザーが作成したアイテムだけ背景色を変えるとか、期限が切れたアイテムだけ背景色を変えるとか、そうしたカスタマイズが行えます。

「rowFormatter」では、アイテムの表示形式を丸ごと変えることができます。複雑にはなりますが、JSON を記述することで任意の HTML を書き出すことができます。より表示形式に拘りたい場合は、こちらを利用することになりますね。

additionalRowClass

それでは、まずは additionalRowClass から試してみましょう。リストアイテムの中で、自身が作成したアイテムのみに背景色を設定してみます。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Author.email] == @me, 'sp-field-severity--good','')"
}

これを設定すると、つぎのようになります。

さらに、入力した日付（Due Date）が以前のものをより目立たせてみましょう。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Author.email] == @me, if([$Due_x0020_Date] <= @now, 'sp-field-severity--severeWarning', 'sp-field-severity--good'), '')"
}

これを設定すると、つぎのようになります。

これだけでもグッと見やすくなりますね。

rowFormatter

つぎは、rowFormatter を試してみます。例えば「タイトル（Title）」「本文（Body）」の列を持つリストに対して、つぎのような JSON を設定してみます。この時、ビューにはあらかじめ「タイトル」「本文」「更新日」「更新者」が表示されるように設定しておきます。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "style": {
      "width": "100%",
      "display": "block"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "table"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "table-cell",
              "vertical-align": "top"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": {
                    "operator": "+",
                    "operands": [
                      "/_layouts/15/userphoto.aspx?size=S&accountname=",
                      "[$Editor.email]"
                    ]
                  }
                },
                "style": {
                  "border-radius": "50%",
                  "border": "solid 1px #ddd",
                  "padding": "0",
                  "margin": "0"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "table-cell",
              "padding": "0 0 0 12px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "21px",
                  "vertical-align": "top"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Body]",
                "style": {
                  "vertical-align": "top"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "vertical-align": "top",
                  "margin": "12px 0"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Modified]"
                  },
                  {
                    "elmType": "span",
                    "txtContent": " / "
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Editor.title]"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "font-size": "14px",
          "background-color": "#f4f4f4"
        },
        "children": [
          {
              "elmType": "div",
              "style": {
                  "margin": "0 10px"
              },
              "children": [
                {
                  "elmType": "span",
                  "txtContent": "操作："
                },
                {
                  "elmType": "button",
                  "txtContent": "詳細",
                  "customRowAction": {
                     "action": "defaultClick"
                  },
                  "attributes": {
                    "class": "sp-row-button"
                  }
                },
                {
                  "elmType": "button",
                  "txtContent": "編集",
                  "customRowAction": {
                    "action": "editProps"
                  },
                  "attributes": {
                    "class": "sp-row-button"
                  }
                },
                {
                  "elmType": "button",
                  "txtContent": "削除",
                  "customRowAction": {
                    "action": "delete"
                  },
                  "attributes": {
                    "class": "sp-row-button"
                  }
                }
              ]
          }
        ]
      }
    ]
  }
}

すると…

といった形で表現を変えることができます。これは楽しいですね。

さいごに

この新しい「View formatting（ビューの書式設定）」を利用することで、さまざまな表示を行うことができます。また、View formatting と Column formatting は併用することもできますし、アイテム個別の入力フォームなどは PowerApps を使ってカスタマイズもできます。

SharePoint Online のモダンリストでは、SharePoint Designer によるカスタマイズはできませんが、こうした機能を利用することで、より使いやすくカスタマイズできそうですね。

この機能の公式ドキュメントは、下記のリンク先です。