SharePoint Online のモダン ページを利用すると、ユーザーが自由にページのレイアウトを作成したり必要な Web パーツを配置したりといったことが簡単にできます。
しかし一方で、何かしら “ちょっと” カスタマイズしたいなと思ったときには SharePoint Framework を利用して Web パーツの作成が必要だったりなど、その “ちょっと” が難しくなってもいます。
従来であればコンテンツ エディタ Web パーツやスクリプト エディタ Web パーツを利用して JavaScript などで “ちょっと” のカスタマイズができたのですが、残念ながらこうした機能はモダン ページでは提供されていません。
というわけで、これはどうにかならないものかなーと思い、調べたり試行錯誤したりと模索しています。
この記事は、Office 365 Advent Calendar 2017 に参加しています。
Office 365 Advent Calendar 2017
https://adventar.org/calendars/2585
SharePoint Server 2013 以降や、SharePoint Online の “クラシック UI” のリストで利用できる JS リンクを使って、列に入力された値に応じて行の色を変える方法です。
JS リンクの OnPostRender を利用する方法でイルミネート・ジャパン・ブログさんに記事がありますが、こちらのサンプルではリストのクイック編集モードに対応していないようでしたので、クイック編集モードに対応するように少しだけ書き足してみました。
[SharePoint Online/SharePoint Server 2013] JS リンクでリストビューに条件付き書式設定 | イルミネート・ジャパン ブログ
https://crieilluminate.wordpress.com/2016/01/26/sharepoint-onlinesharepoint-server-2013-js-%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E6%9B%B8%E5%BC%8F/
とは言っても、ほんの数行書き足しただけです。
SharePoint Online では新しい「モダン ページ」が利用可能となっており、先日も Bing マップなどの新たな Web パーツも追加されました。
New web parts for your modern communications in SharePoint Online
https://techcommunity.microsoft.com/t5/SharePoint/New-web-parts-for-your-modern-communications-in-SharePoint/m-p/40937
この新しいモダン ページは、作成済みのサイトにも追加できます。手順は、下記の記事の通りです。
SharePoint Online のチーム サイトのホームを”新しい” UI のページへ変更する
https://idea.tostring.jp/?p=2304
ただ、このモダン ページには「ページ ヘッダー」が表示されるパターンと表示されないパターンの 2 種類が存在しているのが気になっていました。特にサイトのホームに設定した場合、ページ ヘッダーが少々邪魔に感じることもあるので、なんとかして非表示にできないかと試してみました。
SharePoint 2013 からは、JavaScript でのカスタマイズ方法も強化・追加されたため、「JS リンク」を利用することで簡単にリスト ビューをカスタマイズできるようになりましたが、SharePoint 2010 までは「XSL（XML 向けの CSS のようなもの）」を記述する必要がありました。
また、SharePoint 2013 になって、多くのリスト ビューは JS リンクでカスタマイズができますが、一部のリスト ビューは依然として XSL でのカスタマイズにのみ対応しているものがあります。
「予定表」リストの「現在のイベント」ビューもその一つです。そうしたものについては、「XSL リンク」を利用してカスタマイズを行うことができます。今回は、過去に TechNet/MSDN フォーラムに寄せられたご質問を課題として、そのカスタマイズ方法をご紹介します。先にお断りをしておくと、この記事では XSL の書き方そのものについては解説しません。
SharePoint 2013 以降では、ドキュメント ライブラリへのファイルのアップロードが、デスクトップからのドラッグ & ドロップで行うことができるようになりました。これはすごく便利なのですが、ファイルのアップロード時にメタデータを入力させたい場合は、自動的に入力のためのダイアログが開かないため少々手間がかかります。であれば、いっそのことこの機能を無効にして、従来通りのアップロード画面からの利用に統一したいなと思うも、どこからも無効化するための設定を探し出せません。というわけで調べたところ、JavaScript を使って無効化できる方法を発見しました。SharePoint Online でもこの方法で OK でした。
SharePoint 2010 以降（Online を含む）では、大量の JavaScript ファイルを読み込み、また、実行し動作しています。この大量の JavaScript ファイルは、毎回のページ ロードで全て読み込まれるわけではなく、ユーザー操作に応じて動的に（オンデマンドに）読み込むことができる仕組みが用意されています。これは「スクリプト オンデマンド（SOD）」と呼ばれており、この仕組みを利用するための JavaScript メソッドが SharePoint の JavaScript Library に実装されています。
自分でもよく動作を調べ直すことがあるので、メモ代わりに残しておきます。
SharePoint のサイトを作っていくと、他のサイト コレクションのリストに保存された情報などをページに表示したいということがあります。例えば、とあるワークフローが他のサイト コレクションにある場合、そのワークフローにより割り当てられるタスクが格納されるリストの新着アイテムを表示したいなどです。ほかにも他のサイト コレクションのお知らせリストの新着アイテムを表示できても良いですね。
しかしながら、SharePoint の標準機能におけるリストに格納されたデータの利用・表示範囲はサイトの単位になっているため、その更に上位のサイト コレクションが異なる場合にはもちろん利用できません。何か方法はないものかと、試しに SharePoint の JavaScript API で試してみたところ実現できそうだったので投稿します。
今回の記事では、SharePoint Online にて動作確認を行っています。SharePoint Online では全てのサイト コレクションが「<tenant>.sharepoint.com」の配下に作成され、クロスドメイン制約に該当しないことも重要な点かなと思います。
SharePoint のリストを触っていると、ちょっとだけ工夫したくなるときがあります。例えば…「アイテムの新規作成時には入力させたいけど、編集時には入力させたくない列がある」「姓と名の列が入力されたら、自動的に氏名列に値を入れたい」「URL のクエリ文字列に応じて、列の既定値を変えたい」…などなどです。どれも、JavaScript やワークフローなどの組み合わせで実現が出来るのですが、スゴク簡単に利用できそうな jQuery ライブラリを Codeplex で見つけたので試してみました。それが「SPUtility.js」というライブラリです。
SPUtility.js
http://sputility.codeplex.com/