SharePoint Onlineのクラシック表示で座席表を表示

Power BIとVisio、SharePointリストを使った座席表を作ってみたの番外編です。
座席表の用途では、Power BIで表示するには使い勝手が悪いところがあります。
（Power BI DesktopをPCにインストールしてみるきっかけにはなるかもしれませんが…）
ここでは、座席情報の格納先にしたSharePointリストで、そのまま座席表示します。

今回やる事

SharePoint Onlineは、クラシック表示で実現します。
ビューをカスタマイズして座席表を表示します。
事務所レイアウトは、画像を使用しイメージ ビューアー Webパーツで表示します。
座席情報は、JSリンクとスクリプト エディタWebパーツを使用して事務所のレイアウト上に氏名を表示します。

# 作成手順

1. JSリンクをスタイル ライブラリに用意

1. サイトを表示
2. 画面右上の[歯車]アイコン-[サイト コンテンツ]の順にクリック
3. [スタイル ライブラリ]をクリック
4. スタイル ライブラリで「JSLink」フォルダーを新規作成
5. 「JSLink」フォルダーをクリックしてフォルダーに移動
6. JSリンクのスクリプト ファイルをJSLinkにアップロード

DocUsedView.js

(function () {
  var docCategoryColorContext = {};
  docCategoryColorContext.Templates = {};
  docCategoryColorContext.Templates.Fields = {
    "Used": {
      "View": docUsedViewTemplate
    }
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(docCategoryColorContext);
})();function docUsedViewTemplate(ctx) {
  var docUsed = "";
  var docUseds = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  if (docUseds.length == 1)
  {
    docUsed = docUseds[0].title;
  }
  var docTitle = ctx.CurrentItem.Title;
  return "<div class='floor_desk' title='" + docTitle + "'><div class='floor_desk_inner'>" + docUsed + "</div></div>";
}

2. 事務所レイアウト画像をサイトにアップロード

1. 画面右上の[歯車]アイコン-[サイト コンテンツ]の順にクリック
2. [サイトのリソース ファイル]をクリック
3. 事務所レイアウト画像ファイルをドラッグ&ドロップでアップロード
4. アップロードした画像ファイルにチェックをつける
5. [リンクのコピー]メニューをクリック
6. リンクの設定が[アクセス許可をすでに持っているユーザーのみこのリンクを使用できます。]の設定を確認
   1. ちがう場合は、設定をクリック
   2. リンク設定画面で[既存アクセス権を持つユーザー]をクリック
   3. [適用]をクリック
7. コピーしたリンクをメモ帳などにペーストして残しておく

3. リストの表示をクラシック表示に変更

1. リストを表示
2. 画面右上の[歯車]アイコン-[リストの設定]の順にクリック
3. リストの設定画面で全般設定の[詳細設定]をクリック
4. ページ一番下の[リストの設定]を「クラシック表示」をクリック
5. [OK]をクリック

4. 新しいビューを作成

1. リストの設定画面のページ一番下のビュー セクションの[ビューの作成]をクリック
2. 「ビューの種類を選択してください」で[標準ビュー]をクリック
3. ビューのプロパティを設定して[OK]ボタンで作成

プロパティ	設定
ビュー名	名前をつける(ここではlayout)
このビューを規定にする	ON
ビューの対象ユーザー	パブリック ビューを作成する
列	'タイトル'をOFFにして、'Used'のみON
並べ替え	タイトル：昇順でアイテムを表示する
表形式で表示	OFF

5. ビューにスクリプト エディタでスタイルを設定

1. 画面右上の[歯車]アイコン-[ページの編集]の順にクリック
2. [挿入]メニュー-[パーツ]セクション-[Webパーツ]の順にクリック
3. 「メディアおよびコンテンツ」カテゴリ-「スクリプト エディター」パーツの順にクリック
4. [追加]ボタンをクリック
5. 追加したスクリプト エディターの[スニペットを編集]をクリック
6. 埋め込みダイアログにスタイルを貼り付けて[挿入]をクリック

<style type="text/css">
.floor_desk {
  position: absolute;
  height: 64px;
  width: 92px;
  text-align: center;
}
.floor_desk_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 1rem;
}
[title="DESK1-A1"] {  top: 132px;  left: 330px;  }
[title="DESK1-A2"] {  top: 132px;  left: 433px;  }
[title="DESK1-A3"] {  top: 132px;  left: 534px;  }
[title="DESK1-A4"] {  top: 132px;  left: 634px;  }

[title="DESK1-B1"] {  top: 208px;  left: 330px;  }
[title="DESK1-B2"] {  top: 208px;  left: 433px;  }
[title="DESK1-B3"] {  top: 208px;  left: 534px;  }
[title="DESK1-B4"] {  top: 208px;  left: 634px;  }


[title="DESK2-A1"] {  top: 394px;  left: 330px;  }
[title="DESK2-A2"] {  top: 394px;  left: 433px;  }
[title="DESK2-A3"] {  top: 394px;  left: 534px;  }
[title="DESK2-A4"] {  top: 394px;  left: 634px;  }

[title="DESK2-B1"] {  top: 470px;  left: 330px;  }
[title="DESK2-B2"] {  top: 470px;  left: 433px;  }
[title="DESK2-B3"] {  top: 470px;  left: 534px;  }
[title="DESK2-B4"] {  top: 470px;  left: 634px;  }

</style>

6. ビューに事務所レイアウトの画像を表示

1. [挿入]メニュー-[パーツ]セクション-[Webパーツ]の順にクリック
2. 「メディアおよびコンテンツ」カテゴリ-「イメージ ビューアー」パーツの順にクリック
3. [追加]ボタンをクリック
4. 追加したイメージ ビューアーの[ツール ウィンドウを開き]をクリック
5. ツール ウィンドウの[イメージへのリンク]にメモ帳に保存した事務所レイアウト画像のリンクを貼り付け
6. [イメージの水平方向の配置]を「左」に変更
7. [外観]セクションの[枠の種類]を「なし」に変更
8. ツール ウィンドウの[OK]をクリック

7. ビューにJSリンクを設定して表示をカスタイズ

1. Floor リストWebパーツの右上の[下三角]アイコン-[Webパーツの編集]の順にクリック
2. ツール ウィンドウの[リスト ビュー]セクションの[ツール バーの種類]を「ツール バーなし」に変更
3. [外観]セクションの[枠の種類]を「なし」に変更
4. [その他]セクションの[検索ボックスを表示する]をクリックしてチェックを外す
5. [JS リンク]に「~sitecollection/Style Library/JSLink/DocUsedView.js」を入力
6. [OK]をクリック
7. 画面左上の[ページ]メニュー-[編集の終了]をクリック

今回わかったこと

• ビューもカスタマイズできる。
• ビューの切り替えが使えるので使い勝手が良くなる。
• JSリンクのスクリプト ファイルを上書き更新しても反映されなかった。CDNが効いていると思われる。どうしたら良いのだろう...