JSLink でアイテムのプロパティ値を取得してビューの列の表示をカスタマイズする
こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、JSLink を使用してアイテムのプロパティ値を取得し、ビューの列の表示をカスタマイズする方法についてご紹介します。
JSLink とは
JSLink とは、データのレンダリングを外部の JavaScript ファイルによって制御する機能です。
JSLink を使用したクライアント サイド レンダリング (JavaScript、HTML、CSS などのクライアント サイドの技術を使ってページ上にデータを表示すること) によって、独自に実装した JavaScript の処理を列の表示に反映させることができます。
実装方法
簡単な JavaScript のサンプルをご紹介しますので、実装イメージを掴んでいただけますと幸いです。(ここでは、JavaScript の実装について説明するため、作成した js ファイルのアップロード先や適用方法については後ほど説明します。)
下記のようなアイテムを例に、ビューの列の表示をカスタマイズしていきます。
■サンプル 1
ビューの任意の列 (列の内部名を TestField とします) で、現在のアイテムの列の値を文字色を変えて表示します。
| (function () {var context = {};context.Templates = {};context.Templates.Fields = {"TestField": {"View": viewTemplate}};SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);})();function viewTemplate(ctx) {var propValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] ;return '<span style="color:red;">' + propValue + '</span>';} |
ctx.CurrentItem[ctx.CurrentFieldSchema.Name] で、JSLink によって JavaScript の処理が適用される列の値を取得します。この値に、文字色を変えるスタイルを追加することで、下記のように TestField 列の値が赤色で表示されました。
■サンプル 2
ビューの任意の列 (列の内部名を TestField とします) で、現在のアイテムの特定のプロパティ (例 タイトル) の値を表示します。
| (function () {var context = {};context.Templates = {};context.Templates.Fields = {"TestField": {"View": viewTemplate}};SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);})();function viewTemplate(ctx) {var propValue = ctx.CurrentItem["Title"] ;return propValue;} |
ctx.CurrentItem オブジェクトから Title プロパティを取得することで、下記のように TestField 列にタイトルが表示されました。
その他にも、下記のプロパティ値が取得できます。
・ビューに表示される列
・ContentTypeId
・Created_x0020_Date.ifnew
・File_x0020_Type
・FileLeafRef
・FileRef
・HTML_x0020_File_x0020_Type.File_x0020_Type.mapico
・ID
※ビューに表示される列によって、取得できるプロパティが異なりますのでご注意ください。
上記の 2 つのサンプルは、現在のアイテムから取得した値を列に表示する簡単な実装内容となりますが、取得した値によって表示する内容を変えるという処理を実装することも可能です。ご要件に合わせてご実装いただき、十分なテストをご実施ください。
| - js ファイルのアップロード先と適用方法列の表示をカスタマイズする JavaScript の処理を実装し、js ファイルを作成します。なお、ファイルは UTF-8 で保存してください。この js ファイルをサイトのドキュメント ライブラリにアップロードします。そして、リスト ビューに適用するため、Web パーツの JSLink にファイルの URL を設定します。例えば、トップ サイトのスタイル ライブラリに JSLink フォルダを作成し、js ファイルをアップロードします。(例 https://sharepoint/Style Library/JSLink/testJSLink.js)リスト ビューにアクセスしてページを編集モードにし、リスト ビュー Web パーツの [Web パーツの編集] をクリックします。[その他] を展開し、"JS リンク" に js ファイルの URL を設定し、Web パーツとページを保存します。(例 ~sitecollection/Style Library/JSLink/customJSLink.js) |
*2016 年 1 月追記
js ファイルの編集内容が正しく反映されない場合のトラブルシュート
●js ファイルの URL が正しいかを確認する
ブラウザ上で JSLink 機能を使用したページのソースを確認し、参照される js ファイルの URL を確認します。
例) <script type="text/javascript" src="/style%20library/JSLink/test.js?ctag=0$$XX.X.XXXX.XXXX"></script>
URL が正しくない場合は、Web パーツまたはビューに設定した JS リンクの URL を編集します。
●ブラウザのキャッシュをクリアする
編集した js ファイルの内容が反映されず、前の内容が反映される場合、ブラウザのキャッシュをクリアします。
●サイトの "ダウンロード最小化戦略" 機能の状態を確認する
JSLink 機能とダウンロード最小化戦略機能を組み合わせると、JSLink 機能が正しく動作しないことが確認されています。JSLink 機能をご使用いただく際は、サイトの "ダウンロード最小化戦略" 機能を非アクティブに設定します。
今回の投稿は以上です。
過去にも、JSLink のカスタマイズに関する記事を投稿していますのでご参照ください。
JSLink を使用してドキュメント ライブラリの列の表示をカスタマイズする (ビュー)
JSLink を使用してドキュメント ライブラリの列の表示をカスタマイズする (アイテム表示フォーム)