JSリンクを使ってビューにニコちゃんマークを表示してみた

SharePointの「はい/いいえ」のチェックボックス列。値の表示が「はい」と「いいえ」で固定なんですよね。
「有/無」とか「可/不可」とか画像アイコンとか、自分の任意の表示にできればいいのに・・・と思ったことありませんか?私はあります。

そこで、SharePoint2013から導入されたJS リンクの機能を使って「はい」ならニコちゃんマーク、「いいえ」なら残念顔のアイコンを表示してみました。
20140911

JS リンクのくわしい使い方は、MVP太田さんのブログに手取り足取りの解説がありますので、まずはそちらをご参照いただくとして・・・
SharePoint 2013 「JS リンク」を試してみた | idea.toString;
続・SharePoint 2013 「JS リンク」を試してみた | idea.toString;

ソースコードです。
JSLink.js

(function(){
	var overrideCtx = {};
	overrideCtx.Templates = {};
	overrideCtx.ListTemplateType = 100;
	overrideCtx.BaseViewID = 1;
	overrideCtx.Templates.Fields = {
		'YesNo': { 'View' : dispIcon }
	};
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
	function dispIcon(ctx){
		var txt = ctx.CurrentItem.YesNo;
		if((txt == 'Yes')||(txt == 'はい')){
			return '<img src="/[your site]/SiteAssets/emoticon_smile.png" alt="smile">';
		}
		else if((txt == 'No')||(txt == 'いいえ')) {
			return '<img src="/[your site]/SiteAssets/emoticon_unhappy.png" alt="sad">';
		}
	}
})();

上記JSファイルをマスターページギャラリーに格納します。
コンテンツタイプは 「JavaScript の表示テンプレート / JavaScript Display Template」を選択します。
プロパティ設定は以下でOKでした。
対象コントロールの種類 / Target Control Type: ビュー / View
スタンドアロン / Standalone :上書き / Override
対象範囲 / Target Scope : {適用サイトのパス}
対象リストテンプレートID / Target List Template ID: 100

そして、表示を変えたいリストビューの設定で、JSリンクの欄に格納したjsファイルのURLを以下のような感じで入力して保存します。
JSリンク欄の設定値: ~sitecollection/_catalogs/masterpage/js/JSLink.js

以上でOKです!表示を任意に変えることができれば、今まで以上に「はい/いいえ」列の活用場面が増えそうですね。

そのほか、海外にはJSリンクについてたくさん記事がありますが、私には以下がわかりやすかったです。
JS Link for SharePoint 2013 Web Parts–A Quick Functional Primer | idubbs.com

なお、画像のニコちゃんアイコンはこちらのサイトからいただきました!
famfamfam.com: Silk Icons

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中