SharePoint 2013 を触っていて、ずっと気になっていた「JS リンク」をやっと試すことが出来ました。昨年の11月に参加した、SharePoint Conference 2012 でも JavaScript を用いたカスタマイズが複数のセッションで取り上げられており、SharePoint 2013 では注目ポイントのひとつかな?と思っています。
「JS リンク」ってなんだっけ?という方!リストやライブラリ「Web パーツの編集」メニューの一番下にあるコレです!
まず事前の知識として、SharePoint 2013 では「クライアント サイド レンダリング(CSR)」の機能が追加されており、これに関係して SharePoint 2010 までは XSL を用いて行っていたようなカスタマイズを JavaScript を用いて行えるようになっています。
XSL に比べてポピュラーな JavaScript が利用出来ることで、カスタマイズのハードルが少々低くなったのではないでしょうか?
今回はリストに登録されたアイテムの入力値に応じて、文字の色を変えるというカスタマイズを試してみたいと思います。最終目標はこんな感じです。
基本的な動作を確認するため、まずは特定の列(ここでは「申請状況」)の文字を太字にしてみます。そこで、次の 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 で列の内部名を調べる方法
https://idea.tostring.jp/?p=470
(さらに後日)このカスタマイズを複数の Web パーツが配置されたページ上の Web パーツで行う場合、overrideCtx.BaseViewID
とoverrideCtx.ListTemplateType
の指定は出来る限り行ってください。同一ページの他の Web パーツへも影響が出てしまうようです。標準のリストやライブラリのListTemplateType
は下記のページをご参照下さい。
ListTemplateType enumeration
http://msdn.microsoft.com/ja-jp/library/microsoft.sharepoint.client.listtemplatetype.aspx
このファイルを SharePoint 上のドキュメントライブラリへアップロードするわけですが、この際「マスター ページ ギャラリー」にアップロードします。専用のコンテンツタイプが用意されており、指定するプロパティは次のようにします。また、後で利用するので、アップロードしたファイルの URL を書留めておきます。
- コンテンツタイプ: JavaScript の表示テンプレート
- 対象コントロールの種類: ビュー
- スタンドアロン: 上書き
- 対象範囲: /
- 対象リストテンプレートID: 100
ファイルのアップロード後は、ページに配置した 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」のようになると思います。
そうして、Web パーツを変更した後、ページを保存すると………
「あれ?太字にならないぞ?」という場合、「サイト機能の設定」から「ダウンロード最小化戦略」を非アクティブにしてみてください。(ハッキリとした原因は分かっていないのですが、どうやら特定の条件下では、カスタマイズの内容が上手く反映されないときがあるようです…)
(2014/07/03)ダウンロード最小化戦略の件については、下記の記事で対応方法が紹介されていました。RegisterModuleInit()
というのが用意されていたのですね!
[SharePoint 2013] JSLinkの「ダウンロード最小化戦略対応」
http://shanqiai.weblogs.jp/sharepoint_technical_note/2014/06/sharepoint-2013-jslink-mds.html
見事!変更が反映されました!!
しかし、文字の色は黒のままですね。入力値に応じて色を変えるまで後もう少しなのですが、長くなってしまいましたので、ここで一旦終わります。
参考(ただし、Visual Studio 2012 を利用した記事になっています)
[方法] クライアント側のレンダリングを使用して SharePoint アプリのリスト ビューをカスタマイズする
http://msdn.microsoft.com/ja-jp/library/jj220045.aspx