MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

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

以上で完成です!