続・SharePoint 2013 「JS リンク」を試してみた

前回 SharePoint 2013 から登場した「JS リンク」の基本的な動作を確認することが出来ました。

SharePoint 2013 「JS リンク」を試してみた
https://idea.tostring.jp/?p=68

今回はそこから少し踏み込んで、ユーザーが入力した値に応じて条件分岐を行うことに挑戦してみます。ここでは、入力した値に応じて文字の色を変えてみます。

さっそくですが、カスタマイズのための JavaScript は下記のようになります。

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

	overrideCtx.ListTemplateType = 100;
	overrideCtx.BaseViewID = 1;
	overrideCtx.Templates.Fields = {
		'_x7533__x8acb__x72b6__x6cc1_': { 'View' : Color }
	};
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

	function Color(ctx){
		var retVal;
		var orgVal = ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_;

		if(orgVal == '受付'){
			retVal = '<b style="color:#DA4F49">' + orgVal + '</b>';
		}
		else if(orgVal == '作業中'){
			retVal = '<b style="color:#5BB75B">' + orgVal + '</b>';
		}
		else if(orgVal == '完了'){
			retVal = '<b style="color:#2E7BCC">' + orgVal + '</b>';
		}
		return retVal;
	}
})();

前回からの違いは6行目の後半にColorと記述している部分。これは、10行目から始まる function を指しています。function では引数でコンテキストctxを受け取り、orgValにリストに対してユーザーが入力した値ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_を格納した後、その値を基に条件分岐をしています。if 文の中では、画面に出力したいタグを作成し、retValに格納。function の最後で戻り値として呼び出し元に返しています。これだけです。

ちなみに、ファイルを保存する場合は UTF-8 で保存してください。特にマルチバイト文字を含む場合は文字化けしてしまい動きません。

このファイルを前回と同じように「マスター ページ ギャラリー」へアップロードし、Web パーツが配置されているページを開くと…

変わりました！！今回サンプルで行うカスタマイズはこれで終了です。

以下、おまけです。今回定義した function は引数でコンテキストctxを受け取りましたが、これには何が含まれているのでしょうか？？ちょっとだけ、中を覗いてみます。

画面に収まらないほどのさまざまな情報が入っています。中にはログインユーザーのアクセス権のようなものも？いろんなカスタマイズが出来そうですね！！

このあたり、何故か MSDN にも情報が無いんですよね…。