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

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

<設定例>
image

まず、用意する 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 : 条件に一致する際のアイテムの背景色

[適用方法]
1. JS ファイルをマスター ページギャラリーにでもアップロードします。

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

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

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

奥田 うさぎ

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中