JS リンクで列の値に応じて行の色を変える（クイック編集モード対応）

JavaScript

2017.12.08

この記事は、Office 365 Advent Calendar 2017 に参加しています。

Office 365 Advent Calendar 2017
https://adventar.org/calendars/2585

SharePoint Server 2013 以降や、SharePoint Online の “クラシック UI” のリストで利用できる JS リンクを使って、列に入力された値に応じて行の色を変える方法です。

JS リンクの OnPostRender を利用する方法でイルミネート・ジャパン・ブログさんに記事がありますが、こちらのサンプルではリストのクイック編集モードに対応していないようでしたので、クイック編集モードに対応するように少しだけ書き足してみました。

[SharePoint Online/SharePoint Server 2013] JS リンクでリストビューに条件付き書式設定 | イルミネート・ジャパンブログ
https://crieilluminate.wordpress.com/2016/01/26/sharepoint-onlinesharepoint-server-2013-js-%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E6%9B%B8%E5%BC%8F/

とは言っても、ほんの数行書き足しただけです。

さっそくコード
さいごに

さっそくコード

(function () {
  var overrideCtx = {};
  overrideCtx.Templates = {};
  overrideCtx.OnPostRender = Condition;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  
})();
  
function Condition(ctx){
  var trElement,rowId;
  for (i = 0; i < ctx.ListData.Row.length; i++) {
    if (ctx.ListData.Row[i]["FieldName"]) {
      if (ctx.ListData.Row[i]["FieldName"].indexOf("Value") != -1) {
        rowId = GenerateIIDForListItem(ctx, ctx.ListData.Row[i]);
        if(!ctx.inGridMode){
          trElement = document.getElementById(rowId);
        }else{
          // クイック編集時の tr を取得するには iid を利用
          trElement = document.querySelector('[iid="' + rowId +  '"]');
        }
        if(trElement != null){
          trElement.style.backgroundColor = "#ffe0e0";
        }
      }
    }
  }
}

FieldName や、indexOf("Value") のところは、列名や要件に応じて書き換えてください。

うまく動くと下図のようになります。

クイック編集モードに切り替えるとこんな感じに。

この例では、「重要度」列が「高」のときに行の背景色を変えてみています。

さいごに

SharePoint Online では、”モダン UI” のリストの機能が強化され Column formatting が利用できるようになっていますが、まだまだオンプレミスを含め “クラシック UI” のリストを利用されることも多いかと思います。その時にはまだまだ JS リンクでのカスタマイズはお世話になりますよね。

Office 365 Advent Calendar 2017 の 12 月 8 日分の投稿でした。