[SharePoint Online/SharePoint Server] JS リンクでリストビューに条件付き書式設定

SharePoint 2013 では SharePoint Designer 2013 でリストビューを開いても、2010 では利用できる [条件付き書式] 機能は利用できません。SPD 上からメニューもなくなっています。
JS リンクを利用して条件付き書式を設定する例をご紹介します。

＜設定例＞

[設定方法]

まず、用意する JS ファイルの内容はこんな感じです。

(function () {

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.OnPostRender = Condition;
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function Condition(ctx){

for (i = 0; i < ctx.ListData.Row.length; i++) {
if (ctx.ListData.Row[i][“FieldName“]) {

if (ctx.ListData.Row[i][“FieldName“].indexOf(‘AZ‘) != -1) {

var rowId = GenerateIIDForListItem(ctx, ctx.ListData.Row[i]);
var trElement = document.getElementById(rowId);
trElement.style.backgroundColor = “#FFFF00“; }

} } }

● FieldName ： 条件に利用したい列の内部名
● AZ ： 列に含まれる値 (部分一致も可)
● ＃FFFF00 : 条件に一致する際のアイテムの背景色

[適用方法]

１． JS ファイルをマスター ページギャラリーにでもアップロードします。

–  アップロード時にプロパティの編集画面でコンテンツ タイプは何を選んでもいいです。
–  アップロードしたファイルはメジャーバージョンに発行します。

２． JS リンクを適用させたいビューを、[設定] – [ページの編集] をクリックし、編集モードに切り替えます。
３． ビュー内に配置されているリスト ビュー Web パーツで、[Web パーツの編集] をクリックし、 Web パーツの設定画面を表示します。
４． [その他] カテゴリーにある [JS リンク] に js ファイルへのパスを次のように指定し、[OK] をクリックします。
~sitecollection/_catalogs/masterpage/ファイル名.js
５． [ページ] タブから [編集の終了] をクリックします。

以上、JS リンクで条件付き書式を設定する内容でした。JS リンクで、アイテム全体に対するスタイル設定を行いたい場合の参考 (OnPostRender の利用) にもいただけると思います。

奥田