SharePointのビューの書式設定でアイテムを横並びにしてみた

タイトルまんまです。いたって簡単、素晴らしいサンプルがありますから。

https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-tile-format

こんな感じのリストが下のようになります。（画像はいらすとやさんから）

一応ソースも貼っておきますが、ここまでは訳ないです。

{
  "hideSelection": "true",
  "hideColumnHeader": "true",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "1.5em"
                }
              },
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "=if([$weather] == 'sunny', '/SiteAssets/img/sunny.png', if([$weather] == 'cloud', '/SiteAssets/img/cloud.png', '/SiteAssets/img/rain.png'))"
                    },
                    "style": {
                      "width": "100px"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

問題はここから。

これをサイトページに貼ってみます。