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

今回やる事

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

作成手順

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

サイトを表示
画面右上の[歯車]アイコン-[サイトコンテンツ]の順にクリック
[スタイルライブラリ]をクリック
スタイルライブラリで「JSLink」フォルダーを新規作成
「JSLink」フォルダーをクリックしてフォルダーに移動
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. [適用]をクリック
コピーしたリンクをメモ帳などにペーストして残しておく

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

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

4. 新しいビューを作成

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

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

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

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

<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. ビューに事務所レイアウトの画像を表示

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

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

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

今回わかったこと

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

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