SharePointのビューの書式設定でモダンなリンク集を作ってみた

SharePointのモダン表示がますます進化を続けています。
特にアイテム数の上限値が大きく引きあがったのが嬉しいですね。

www.micknabewata.com

そろそろクラシック機能でのサイト構築は忘れて、モダン一辺倒な気持ちです。
というわけでSharePointのビューを「モダン標準機能だけで」奇麗に表示できる、
「ビューの書式設定」機能を極めたいと思います。
今回はモダンなリンク集を作ってみました。

ビューの書式設定とは
機能説明
作り方

ビューの書式設定とは

以前の記事でもご紹介しましたのでここでは簡単に。
「ビューの書式設定」機能はSharePointモダンサイトの新しい機能で、
リストやドキュメントライブラリのビューに対して
見た目のカスタマイズを行うことができる機能です。
設定はブラウザ上で行い、JSON形式でビューの定義を書いていくことで実現します。

www.micknabewata.com

機能説明

まずは手っ取り早く画面イメージから。

f:id:micknabewata:20181208090457p:plain — 完成図

ご覧の通り、SharePointのリストビューがタイル表示になりました！
各タイルはマウスを乗せると色が反転し、クリックするとリンクします。

f:id:micknabewata:20181208091414p:plain — 動作イメージ

データは別途個人ビューを用意して登録します。

f:id:micknabewata:20181208090653p:plain — データ登録用の個人ビュー

こちらはカスタマイズ無しのビューです。
個人ビューなので作成した本人にしか見えません。
よって利用者には常に先ほどのタイル表示がされていることになります。

ご覧の通り、以下のデータを登録することでリンクを増やせます。

列名	説明	形式	サンプルデータ
タイトル	タイルに表示するタイトル	1行テキスト	Excel
リンク先URL	タイルをクリックした時のリンク先	URL	表示テキスト	Excel Online
リンク先URL	タイルをクリックした時のリンク先	URL	URL	https://office.live.com/start/Excel.aspx?omkt=ja%2DJP#
サムネイル画像	タイルに表示する画像URL	URL	表示テキスト	Excel
サムネイル画像	タイルに表示する画像URL	URL	URL	https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_32x1.png
新しいタブで開く	タイルをクリックした時に新しいタブで開くか否か	はい/いいえ	はい
表示順	タイルの表示順	数値	1

作り方

SharePointの任意のサイトに、このサンプルで紹介したリストを作る手順を記載します。

1.リストを作る

サイトの右上歯車 > アプリの追加をクリックし、「カスタムリスト」を追加します。
リスト名はカスタマイズに影響しませんので自由です。

2.列を作る

リストの設定画面から列を作っていきます。
このサンプルでは以下の列が必要です。

列内部名	列表示名	形式	備考
Title	タイトル	1行テキスト	作成不要(既定で存在する列)
URL	リンク先URL	ハイパーリンクまたは画像	URLの形式：ハイパーリンク
thumbnail	サムネイル画像	ハイパーリンクまたは画像	URLの形式：画像
OpenInNewTab	新しいタブで開く	はい/いいえ
SortOrder	表示順	数値

※) 列内部名には、「最初に列を作った時の列名」が採用されます。

　「列内部名」に従って列を作成　⇒　列の表示名を「列表示名」に変更

　　という操作をすることで、上記表の状態を作ることができます。

3.ビューを作る

上記列のすべてを表示したビューを作成します。
このビューは「表示順」列の昇順に並べておきます。

4.ビューの書式設定を行う

3で作成したビューを表示し、ビューの書式設定を行います。
JSONは以下の通りです。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": "true",
  "hideColumnHeader": "true",
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$OpenInNewTab] == true, '_blank', '')"
    },
    "style": {
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "180px",
          "min-height": "150px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title "
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "img",
                "attributes": {
                  "src": "[$thumbnail]"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}