none
SharePoint Online(Office365)で、Viewを「グループ化」させると、文字色が変わらないので変更したい! RRS feed

  • 質問

  • SharePoint Online(Office365)で、Viewに表示されているアイテムの色を変更したいと考えております。

    Viewを特に、グループ化も何も設定しないと、色が変わるようにJavaScriptを組めました。

    参考リンク

    【実装した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++) {							// アイテム数分、ループ処理
    		var rowId 		= GenerateIIDForListItem(ctx, ctx.ListData.Row[i]);		// ID 取得
    		var trElement 	= document.getElementById(rowId);					// ビュー情報格納
    
    		/*---------------------------------------------------------------------------*/
    		// 項目名の文字設定
    		/*---------------------------------------------------------------------------*/
    		trElement.cells[1].children[0].children[0].style.color 	    = "red"		// 件名	:赤字
    		trElement.cells[1].children[0].children[0].style.fontWeight = "bold"		// 件名	:太字
    		trElement.cells[3].style.color 				    = "green"		// 件名	:緑字
    		trElement.cells[4].style.color 				    = "blue"		// 件名	:青字
    		trElement.cells[5].style.color 			            = "purple"		// 件名	:紫字
    		trElement.cells[6].style.color 				    = "#ffcc33"		// 件名	:黄色字
    	}
    }

    【実装後のView】

    グループ化したViewにも、同じJSを設定しましたが色が変わりませんでした。

    【参考画像】

    しかし、「ページの編集」をしようとすると色が変わります。

    【参考画像】

    実装したJSをどの様に変更すれば、「グループ化したView」でも、

    アイテムの色を変更する事が出来るでしょうか?

    分かる方いれば、教えて頂ければと思います。

    よろしくお願い致します。


    • 編集済み mie.8 2017年12月25日 1:15 修正
    2017年12月25日 1:13

すべての返信

  • ブラウザの開発者ツール(F12 開発者ツールなど)をご存知でしょうか?
    スクリプトの途中にブレイクポイントを設定し、カスタマイズが反映されない場合に、該当の処理が実行されていないのか、または、実行されているがエラーになるのかなど、切り分けられた方が良いかと思います。
    2017年12月25日 6:15
  • こんにちは。

    色の設定が反映されないのは、色を設定するJSが走る段階では、

    展開されていない為、要素を取得出来ていないからでは無いですか。

    クリックして全て展開した状態でJSの処理を走らせないと色の設定は出来ないと思います。

    JSではなく、CSSで下記のようにしてみたらどうでしょうか。

    .ms-listviewtable td:nth-child(1):not([class*="ms-gb"]) {
    color: red/* 一列目赤 */
    }
    .ms-listviewtable td:nth-child(2):not([class*="ms-gb"]) {
    color: blue;/* 二列目青 */
    }

    私の環境では、これで一列目が赤文字、2列目が青文字になり、グループ化されていてもきちんと反映されています。

    :not([class*="ms-gb"]) としているのは、グループ化のリンクにまで色が付かないようにしています。

    一度お試しください。

    2017年12月25日 6:16
  • ご回答ありがとうございます。

    少しずつ動かして確認した所、「trElement」に値が入って来ませんでした。

    2017年12月25日 7:50
  • ご回答ありがとうございます。

    上記CSSを設定してみましたが、色が変わらなかったです。

    「.ms-listviewtable」のクラスが無かったです。

    このCSSの意味は、

    ①まず、「.ms-listviewtable」で、テーブルの【行】を指定

    ②<td>タグの子要素「child(0)」を見に行き、色を付ける。

    の様なイメージ(処理)でお間違いないでしょうか。

    2017年12月25日 7:59
  • JS リンクの OnPostRender で実装した場合、グループ化されたものを開いたタイミングでも処理が実行されるはずです…

    trElement に値が入らないということは、指定している id が間違っているんですかねー…なんでしょうね…?

    2017年12月25日 8:22
  • こんにちは。

    CSSの話ですが、環境によってクラス名が違うのかもしれませんね。

    リストビューのテーブルタグに他のクラス名が指定されているようでしたら、そちらで代用できると思います。

    またCSSの意味ですが、まず

    ①.ms-listviewtable td で テーブルの子または孫となるtdタグを取得。(.ms-listviewtableは行ではなくテーブルです)

    ②:nth-child(1) でtdタグの親(trタグ)からみて1番目の子となるもののみを指定しています。

    *:nth-child(1)で1列目、:nth-child(2)とすると2列目となります。

    2017年12月26日 6:09