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);…


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

こんにちは、SharePoint サポートの佐伯です。 前回の投稿では、JSLink を使用して、リスト ビューで以下のようにドキュメントのカテゴリを色分けして表示するカスタマイズ方法をご紹介しました。 今回の投稿では引き続き、アイテムの表示フォームでもカテゴリが色分けして表示されるようカスタマイズを行いましょう。 なお、前回の投稿でご紹介している手順の続きとして、上の画像のカスタマイズ方法をご紹介していきます。 例) アイテムの表示フォームでドキュメントのカテゴリを色分けして表示する 前回の投稿で作成した DocCategoryColor.js に以下の青色部分のコードを追加し、保存します。(以下のコードをすべてコピーして貼り付けます) (function () { var docCategoryColorContext = {}; docCategoryColorContext.Templates = {}; docCategoryColorContext.Templates.Fields = { “DocCategory”: { “View”: docCategoryColorViewTemplate, “DisplayForm”: docCategoryColorViewTemplate } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(docCategoryColorContext); })();function docCategoryColorViewTemplate(ctx) { var docCategory = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; var backgroundColor = “”; switch (docCategory) { case “調査書”: backgroundColor = “green”; break; case…


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

こんにちは、SharePoint サポートの佐伯です。 今回の投稿では、JSLink のカスタマイズについてご紹介します。 SharePoint 2013 では、クライアント サイド レンダリングによって Web パーツ内のアイテムが表示される動作となりました。クライアント サイド レンダリングとは、JavaScript、HTML、CSS など、クライアント サイドの技術を使ってページ上にデータを表示することをいいます。 今回とりあげる JSLink とは、データのレンダリングを外部の JavaScript ファイルによって制御する機能です。 JSLink を使用したクライアント サイド レンダリングによって、独自の JavaScript ファイルを適用して表示をカスタマイズすることができます。 例えば、ドキュメント ライブラリにカテゴリを管理するカスタム列を追加すると以下のような表示になりますが、 JSLink を使用して、この列のレンダリング内容を変更することで、以下のようにカテゴリを色分けして表示することも可能です。 このように表示を工夫することで、よりドキュメントの確認がしやすくなりますね。 今回は上の画像のようなカテゴリの色分けを実現する JSLink のカスタマイズ方法をご紹介し、より JSLink の理解を深めていきたいと思います。 例) ドキュメントのカテゴリを色分けして表示する 1) 列の作成 2) JavaScript ファイルの作成 3) Web パーツに JSLink を設定 (JavaScript ファイルの適用) まず、ドキュメント ライブラリにカテゴリ列を追加し、次にカテゴリを色分けして表示する JavaScript ファイルを作成、適用を行い、カテゴリ列の表示をカスタマイズします。 1)…