SharePointリストの列の書式で画像列を拡大表示する

プチブログ

SharePointリストの画像列

画像列は便利！、でももう少しサイズを大きくできないかな？という要望に対して
JSONによる列の書式設定で対応！
本書式を使うと、 以下のような動作が可能に

• 画像の表示サイズ調整(width/height)
• クリックで元画像表示
• マウスホバーでプレビュー表示

書式設定

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "attributes": {
        "href" : "@currentField.serverRelativeUrl",
        "target":"_blank"
    },    
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@currentField.serverRelativeUrl"
            },
            "style": {
                "width": "120px",
                "height": "90px"
            },
            "customCardProps": {
                "openOnEvent": "hover",
                "directionalHint": "rightCenter",
                "isBeakVisible": true,
                "beakStyle": {
                  "backgroundColor": "white"
                },
                "formatter": {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "img",
                        "attributes": {
                          "src": "@currentField.serverRelativeUrl"
                        },
                        "style": {
                          "width": "600px",
                          "padding": "5px"
                        }
                      }
                    ]
                  }
            }
        }
    ]
}

Keyword

• SharePoint List
• Column Formatting
• Image Column
• customCardProps

参考

Format an image column with preview in Microsoft Lists and SharePoint - HANDS ON Lists