SharePoint 2013 を触っていて、ずっと気になっていた「JS リンク」をやっと試すことが出来ました。昨年の11月に参加した、SharePoint Conference 2012 でも JavaScript を用いたカスタマイズが複数のセッションで取り上げられており、SharePoint 2013 では注目ポイントのひとつかな?と思っています。

「JS リンク」ってなんだっけ?という方!リストやライブラリ「Web パーツの編集」メニューの一番下にあるコレです!

20130131-1


まず事前の知識として、SharePoint 2013 では「クライアント サイド レンダリング(CSR)」の機能が追加されており、これに関係して SharePoint 2010 までは XSL を用いて行っていたようなカスタマイズを JavaScript を用いて行えるようになっています。

XSL に比べてポピュラーな JavaScript が利用出来ることで、カスタマイズのハードルが少々低くなったのではないでしょうか?

今回はリストに登録されたアイテムの入力値に応じて、文字の色を変えるというカスタマイズを試してみたいと思います。最終目標はこんな感じです。

20130131-2

基本的な動作を確認するため、まずは特定の列(ここでは「申請状況」)の文字を太字にしてみます。そこで、次の JavaScript を記述したファイルを作成します。ファイル名は「jslink.js」のようにします。

(function(){
	var overrideCtx = {};
	overrideCtx.Templates = {};

	overrideCtx.ListTemplateType = 100;
	overrideCtx.BaseViewID = 1;
	overrideCtx.Templates.Fields = {
		'_x7533__x8acb__x72b6__x6cc1_': { 'View' : '<b><#=ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_#></b>' }
	};
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

簡単に解説すると、5行目と6行目がこのコードのキモとなる箇所で、列名が_x7533__x8acb__x72b6__x6cc1_ という列に入力された値を「表示時」に<b><#=ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_#></b>へ書換えるというものになっています。_x7533__x8acb__x72b6__x6cc1_というのは、今回対象とした「申請状況」列の内部名で、<#=ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_#>と記述することで、CurrentItem の後に記述した列の入力値を出力します。今回は<b>タグで囲んでいるので、入力値は変えずに字体を太字にするというものになります。

(後日)列の内部名を調べる方法を投稿しました。

SharePoint 2013 で列の内部名を調べる方法
http://idea.tostring.jp/?p=470

(さらに後日)このカスタマイズを複数の Web パーツが配置されたページ上の Web パーツで行う場合、overrideCtx.BaseViewIDoverrideCtx.ListTemplateTypeの指定は出来る限り行ってください。同一ページの他の Web パーツへも影響が出てしまうようです。標準のリストやライブラリのListTemplateTypeは下記のページをご参照下さい。

ListTemplateType enumeration
http://msdn.microsoft.com/ja-jp/library/microsoft.sharepoint.client.listtemplatetype.aspx

このファイルを SharePoint 上のドキュメントライブラリへアップロードするわけですが、この際「マスター ページ ギャラリー」にアップロードします。専用のコンテンツタイプが用意されており、指定するプロパティは次のようにします。また、後で利用するので、アップロードしたファイルの URL を書留めておきます。

  • コンテンツタイプ: JavaScript の表示テンプレート
  • 対象コントロールの種類: ビュー
  • スタンドアロン: 上書き
  • 対象範囲: /
  • 対象リストテンプレートID: 100

20130131-3

ファイルのアップロード後は、ページに配置した Web パーツの設定を行います。「Web パーツの編集」メニューにある「JS リンク」に先ほどアップロードしたファイルの URL を指定するだけ…なのですが、ここは少し注意する必要があります。(ここでかなりハマりました…)
こういった場合、通常は「http(s)://」から始まる絶対パスや「/」等から始まる相対パスで指定するのですが、ここでは「~sitecollection」や「~site」といった SharePoint 特有の 「URL トークン」を利用するようです。「URL トークン」について、詳しくは下記リンク先を参照下さい。

SharePoint 2013 の URL とトークン
http://msdn.microsoft.com/ja-jp/library/ms431831.aspx

ですので、今回の設定値は「~sitecollection/_catalogs/masterpage/jslink.js」のようになると思います。

20130131-4

そうして、Web パーツを変更した後、ページを保存すると………

「あれ?太字にならないぞ?」という場合、「サイト機能の設定」から「ダウンロード最小化戦略」を非アクティブにしてみてください。(ハッキリとした原因は分かっていないのですが、どうやら特定の条件下では、カスタマイズの内容が上手く反映されないときがあるようです…)

(2014/07/03)ダウンロード最小化戦略の件については、下記の記事で対応方法が紹介されていました。RegisterModuleInit()というのが用意されていたのですね!

[SharePoint 2013] JSLinkの「ダウンロード最小化戦略対応」
http://shanqiai.weblogs.jp/sharepoint_technical_note/2014/06/sharepoint-2013-jslink-mds.html

見事!変更が反映されました!!

20130131-5

しかし、文字の色は黒のままですね。入力値に応じて色を変えるまで後もう少しなのですが、長くなってしまいましたので、ここで一旦終わります。

参考(ただし、Visual Studio 2012 を利用した記事になっています)

[方法] クライアント側のレンダリングを使用して SharePoint アプリのリスト ビューをカスタマイズする
http://msdn.microsoft.com/ja-jp/library/jj220045.aspx