【SharePoint / MicrosoftLists】ビューのフッターを書式設定したみた！

f:id:tecchan365:20210426194840p:plain

アップデートにより、SharePoint リストのビューのフッターを書式設定できるようになりました。
そこで、上図のような色付けをする書式設定のサンプルを作成してみました。

以下、作成したサンプルの適用方法について記載します。

フッターの表示

まずは、ビューのフッターを表示させる設定をします。
任意の列ヘッダーをクリック > [合計] をクリックし、フッターに表示させたい項目を選択します。
（列の種類によって、表示される項目が異なります）

f:id:tecchan365:20210426200751p:plain

選択後、ビューのフッターに上記で選択した項目の値が表示されます。

f:id:tecchan365:20210426200912p:plain

ビューの書式設定

次に、フッターを色付けするために、ビューの書式設定をします。

ビュー名をクリックし、[現在のビューの書式設定] をクリックします。
画面右側に書式設定の画面が表示されるので、次の JSON をテキストボックスにコピー & ペーストします。

f:id:tecchan365:20210426201601p:plain

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "footerFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "margin": "5px",
          "width": "100%",
          "border": "2px dashed",
          "padding": "5px",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "@columnAggregate.type",
            "style": {
              "font-size": "14px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "@columnAggregate.value",
            "style": {
              "font-size": "24px"
            },
            "attributes": {
              "class": "ms-fontWeight-bold"
            }
          }
        ]
      }
    ]
  }
}

[保存] をクリックすると、ビューのフッターが色付けされます。

f:id:tecchan365:20210426202435p:plain