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

f:id:tecchan365:20200716213343p:plain

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

リスト作成

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

f:id:tecchan365:20200716213142p:plain

ビューの書式設定

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

{
  "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' ) )"
        }
      }
    ]
  }
}

以上で完成です!