【SharePoint】ドキュメントライブラリでサムネイル表示を自動で行う方法!JSONサンプルも公開!

この記事は約6分で読めます。

スポンサーリンク

SharePointのリストのビュー

リストのデザインとして標準では「リスト」と「タイル」の2種類があります。

ではカスタマイズするにはどうしたらよいのでしょうか?

そこで「JSON」を使用してカスタマイズしていきます!

Word・Excel・PowerPoint・PDFのプレビューや画像のプレビューもカスタマイズすることで自動的に表示できるようになります。

また、長いファイル名もしっかりと表示されるようになります!

JSONとは?

JavaScript Object NotationJSON、ジェイソン)はデータ記述言語の1つである。軽量なテキストベースのデータ交換用フォーマットでありプログラミング言語を問わず利用できる。名称と構文はJavaScriptにおけるオブジェクトの表記法に由来する。

簡単に説明すると、プログラムからも人間からも簡単に編集ができ、読みやすいように改良したプログラムのことです。

SharePointのリストにもこちらが採用されており、デザインから条件処理まで多岐にわたり活用されております。

2種類の方法

(簡単)サムネイル列を作成して表示させる方法

詳しくはこちらをご覧ください。

ライブラリでファイル サムネイルを表示する小ネタ | 株式会社イルミネート・ジャパン
ライブラリの小ネタを。 SharePoint Online サイトのライブラリに Thumbnail という名前で列を作成します。 ファイルのサムネイルが表示されます。 ファイルを開かずに内容を確かめたいときには他にも、

JSONを使用してサムネイルを取得させる方法

このページではこちらを解説します。

リストの書式設定

手順

「すべてのドキュメント」→「現在のビューの書式設定」をクリック

「詳細モード」をクリック

レイアウトを「ギャラリー」に変更する

下記のJSONのコードを貼り付ける

すでに入力されているJSONは削除して貼り付ける

「保存」をクリック

デザインが変更されているか確認する

 

JSON

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "height": "450",
  "width": "320",
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
    "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"},
    "style": {
      "display": "flex",
      "padding": "10px",
      "align-items": "stretch",
      "flex-grow": "1"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "=if([$FSObjType]=='1',[$FileRef],'AllItems.aspx?id='+[$FileRef]+'&parent='+substring([$FileRef],0,indexOf([$FileRef],[$FileLeafRef])-1))"
        },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "text-align": "center",
                  "margin": "auto"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-row-title "
                    },
                    "style": {
                      "height": "80px"
                    },
                    "txtContent": "[$FileLeafRef]"
                  },
                  {
                    "elmType": "img",
                    "attributes": {
                      "class": "thumbnail-img",
                      "src": "= @thumbnail.300"
                    },
                    "style": {
                      "text-align": "center",
                      "width": "90%"
                }
              }
            ]
          }
        ]
      }
    ] 
  }
}

JSON解説

3・4行目
 “height”: “450” “width”: “320”
heightが高さ、widthが横幅を定義しています。単位は必要ありません。
5行目
“hideSelection”: true
リストの項目の選択可能の有無を定義しています。
tureはユーザーがリストの項目を選択できないことを示します。
9行目
“class”: “ms-bgColor-themeLighterAlt ms-bgColor-themePrimary–hover ms-fontColor-white–hover”
背景色などあらかじめSharePointで決まっているプリセットを定義しています。

20行目
=if([$FSObjType]==’1′,[$FileRef],’AllItems.aspx?id=’+[$FileRef]+’&parent=’+substring([$FileRef],0,indexOf([$FileRef],[$FileLeafRef])-1))
[$FSObjType]はフォルダーは1、ファイルは0を返す変数です。
1の場合はディレクトリの移動、0の場合はプレビューを開くという処理を行っております。

更新内容

  • レイアウト「リスト」でCSSのFloatを使用するとすべての項目が表示されない問題をレイアウト「ギャラリー」を使うことで解決

コメント 匿名希望の場合は個人情報の入力はしないようにお願いします。

タイトルとURLをコピーしました