JSLink を使用してドキュメント ライブラリの列の表示をカスタマイズする (ビュー)

  • Article

こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、JSLink のカスタマイズについてご紹介します。

SharePoint 2013 では、クライアント サイド レンダリングによって Web パーツ内のアイテムが表示される動作となりました。クライアント サイド レンダリングとは、JavaScript、HTML、CSS など、クライアント サイドの技術を使ってページ上にデータを表示することをいいます。
今回とりあげる JSLink とは、データのレンダリングを外部の JavaScript ファイルによって制御する機能です。
JSLink を使用したクライアント サイド レンダリングによって、独自の JavaScript ファイルを適用して表示をカスタマイズすることができます。

例えば、ドキュメント ライブラリにカテゴリを管理するカスタム列を追加すると以下のような表示になりますが、

JSLink を使用して、この列のレンダリング内容を変更することで、以下のようにカテゴリを色分けして表示することも可能です。

このように表示を工夫することで、よりドキュメントの確認がしやすくなりますね。
今回は上の画像のようなカテゴリの色分けを実現する JSLink のカスタマイズ方法をご紹介し、より JSLink の理解を深めていきたいと思います。

例) ドキュメントのカテゴリを色分けして表示する
1) 列の作成
2) JavaScript ファイルの作成
3) Web パーツに JSLink を設定 (JavaScript ファイルの適用)
まず、ドキュメント ライブラリにカテゴリ列を追加し、次にカテゴリを色分けして表示する JavaScript ファイルを作成、適用を行い、カテゴリ列の表示をカスタマイズします。

1) 列の作成
1. 対象のドキュメント ライブラリにアクセスし、リボン メニューの [列の作成] をクリックします。

2. 列名に DocCategory と入力し、この列の情報の種類には “選択肢 (メニューから選択)” にチェックを入れます。

3. 列の選択肢 (議事録、社内通知、調査書、その他) を入力し、保存します。

上記の場合、列の作成時に設定した列名 DocCategory がそのまま列の内部名となります。この内部名は JavaScript ファイルの作成時に使用しますので、メモしておきます。

※列の表示名を変更したい場合は、[列の編集] で列名を変更します。ここでは、文書カテゴリ に変更します。

このような表示になりました。

補足 :
列の作成時に列名を カテゴリ のように日本語で設定した場合、列の内部名は変換されて _x30ab__x30c6__x30b4__x30ea_ となります。
列の内部名は以下の方法で確認することができます。

確認方法 1)
SharePoint 2013 管理シェルで以下のスクリプトを実行して確認します。

$web = Get-SPWeb <Web サイトの URL>
$list = $web.Lists["<リスト名>"]
$fields = $list.Fields
$field  = $fields | select-object | where-object Title -eq '<列名>'
$field.InternalName
$web.Dispose()

確認方法2)
サイトの URL から確認します。
1. 対象のリスト [リストの設定] ページを開きます。
2. 列セクションで、対象の列 (例 カテゴリ) をクリックします。
例: https://sharepoint/_layouts/15/FldEdit.aspx?List=%7BA7720EF3%2D8FBB%2D4694%2D9C0F%2DE98FE3BCDB9C%7D&Field=%5Fx30ab%5F%5Fx30c6%5F%5Fx30b4%5F%5Fx30ea%5F
3. ブラウザのアドレスに表示されている URL から、Field= に続く文字列をコピーします。
例: %5Fx30ab%5F%5Fx30c6%5F%5Fx30b4%5F%5Fx30ea%5F
4. %5F を _ (アンダースコア) に置き換えます。
例: _x30ab__x30c6__x30b4__x30ea_

上記で取得した _x30ab__x30c6__x30b4__x30ea_ が列の内部名になります。
必要に応じて、上記の方法で列の内部名をご確認ください。

2) JavaScript ファイルの作成
ファイル名を DocCategoryColor.js として、以下のようなコードを記述します。ファイルは UTF-8 で保存してください。

(function () {var docCategoryColorContext = {};docCategoryColorContext.Templates = {};docCategoryColorContext.Templates.Fields = {"DocCategory": {"View": docCategoryColorViewTemplate}};SPClientTemplates.TemplateManager.RegisterTemplateOverrides(docCategoryColorContext);})();function docCategoryColorViewTemplate(ctx) {var docCategory = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];var backgroundColor = "";switch (docCategory) {case "調査書":backgroundColor = "green";break;case "社内通知":backgroundColor = "orangered";break;case "議事録":backgroundColor = "orange";break;default:backgroundColor = "black";break;}return "<div style='width:15px;height:15px;float:left;margin:2px;background-color:" + backgroundColor + "'></div>" + docCategory;}

上記の DocCategoryColor.js ファイルをサイトのドキュメント ライブラリにアップロードします。
今回は、トップ サイトの スタイル ライブラリ に JSLink というフォルダを作成して、このフォルダに DocCategoryColor.js ファイルをアップロードしましょう。

ファイルの URL は以下のようになります。
例) https://sharepoint/Style Library/JSLink/DocCategoryColor.js

3) Web パーツに JSLink を設定 (JavaScript ファイルの適用)
1. 対象のドキュメント ライブラリにアクセスし、[歯車] – [ページの編集] をクリックしてページを編集モードにします。
2. リスト ビュー Web パーツの [Web パーツの編集] をクリックします。
3. [その他] を展開し、”JS リンク” に ~sitecollection/Style Library/JSLink/DocCategoryColor.js を設定します。

4. Web パーツを保存し、ページを保存します。

補足1 :
~site 現在のサイトの URL を示します
~sitecollection 現在のサイトの親のサイト コレクションの URL を示します

補足2 :
JSLink の設定で JavaScript ファイルを複数指定する場合は、“|” で区切って指定します。
例) ~sitecollection/Style Library/JSLink/SampleJSLink1.js|~sitecollection/Style Library/JSLink/SampleJSLink2.js

※なお、JSLink を設定したリストでリスト テンプレートを作成し、このテンプレートを使用して作成したリストでページングが表示されないとの報告があります。Web パーツの設定を再度行うことでページングが表示されるよう改善されますが、JSLink は Web パーツだけでなく、ビューに設定することもできますので、こちらの設定もご検討ください。 <ビューの JSLink を設定する方法> 以下のスクリプトを SharePoint 2013 管理シェルで実行します。$web = Get-SPWeb <Web サイトの URL>$list = $web.Lists["<リスト名>"]$views = $list.Views$view = $views | select-object | where-object Title -eq '<ビュー名>'$view.JSLink = "clienttemplates.js|<追加する JavaScript ファイルの URL>"$view.Update()$web.Dispose()

このように、JSLink を使ったカスタマイズにより、実現可能な表示やデザインの幅が広がります。
上記は参考例となりますので、ご要件に合わせてカスタマイズを行ってください。

今回の投稿は以上です。