【SharePoint】ビューを電車の路線図にカスタマイズ🚃

ビューの書式設定で、リストの一覧画面を電車の路線図のようにカスタマイズしてみました。
カスタマイズ方法を以下に記載します。

昨日思いついた電車の路線図🚃🚃 #SharePoint #ViewFormatting #ビューの書式設定 pic.twitter.com/EpkeUe5b5B

— てっちゃん (@techan_k) 2020年7月15日

リスト作成

次のリストを作成します。

ビューの書式設定

作成したリストのビューの書式設定に、次のコードを設定します。

{
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "align-items": "center",
      "justify-content": "center",
      "width": "400px",
      "height": "150px",
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "height": "3px",
          "background-color": "=if( [$Route] == '山手線' , '#99cc00' , if( [$Route] == '総武線' , '#ffd400' , if( [$Route] == '京浜東北線' , '#00bae8' ,'#5d5958' ) )"
        }
      },
      {
        "elmType": "a",
        "style": {
          "width": "60%",
          "height": "50%",
          "border": "3px solid",
          "border-color": "=if( [$Route] == '山手線' , '#99cc00' , if( [$Route] == '総武線' , '#ffd400' , if( [$Route] == '京浜東北線' , '#00bae8' ,'#5d5958' ) )",
          "cursor": "pointer",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
          "text-decoration": "none"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLight--hover ms-fontColor-neutralPrimary",
          "href": "[$Schedule]",
          "target": "_blank"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-size": "13px",
              "padding-bottom": "5px"
            },
            "txtContent": "[$English]"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "bold",
              "font-size": "20px"
            },
            "txtContent": "[$Station]"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "height": "3px",
          "background-color": "=if( [$Route] == '山手線' , '#99cc00' , if( [$Route] == '総武線' , '#ffd400' , if( [$Route] == '京浜東北線' , '#00bae8' ,'#5d5958' ) )"
        }
      }
    ]
  }
}

以上で完成です！