Dynamics 365の一覧画面にビジュアルのアイコンを表示する（視認性向上のためにアイコンを表示する対応）Custom Icons for List View in Dynamics 365

Posted at 2022-07-20

はじめに

Dynamics 365の一覧画面にビジュアルのアイコンを表示する（視認性向上のためにアイコンを表示する対応）
Custom Icons for List View in Dynamics 365

完成イメージ

変更前

変更後　ロック状況の項目にアイコン表示

やること

1.表示したい画像ファイル（拡張子PNG）をアップする
2.一覧画面にカスタム項目追加し、ビューの一覧に追加する
3.JavaScriptを書きWebリソースへアップする
4.ビューのオプション設定から、JavaScriptを呼び出すように設定する→保存した後にクラシック設定画面よりすべてのカスタマイズの公開ボタンを押すことが大事。（なぜ反映しないのかボタンを押すのを忘れていた）

以上

手順1.表示したい画像ファイル（拡張子PNG）をアップする

表示したいアイコン＝画像ファイルをWebリソースへ格納
16×16ピクセルの.pngの画像を使う。

この画像は３つアップロード後の画像

１つめアップ

PNG画像ファイルをWebリソースへ新規追加する

こちらのサイトよりファイル取得しました

同じ手順で3ファイル追加

手順2.一覧画面にカスタム項目追加し、ビューの一覧に追加する

既存項目でも可能。今回はカスタム項目を新規追加した。

「cr000_lock1」をスキーマ名に設定

項目ロック状況の値を後で使うためメモ帳へコピー

ビューに先ほど新規追加した項目を設定し、上書き保存→検証→公開を行う

手順3.JavaScriptを書きWebリソースへアップする

テキストエディタを開く
testCustomIconslistviewの関数名

testCustomIconslistview.cs

function getRowinfo(rowVal) {      
    var imgName = "";  
    var tooltip = "";  
    var resultarray = null;
 
    var row = JSON.parse(rowVal);  
    var rdata = row.cr000_lock1_Value;  

    switch (rdata)
 { 
        case 635380000:  
            imgName = "new_a365_activeColor";
            tooltip = "Active";  
            break; 

        case 635380001:  
            imgName = "new_a365_dropColor";
            tooltip = "Drop";  
            break; 
         
         default:
            imgName = "new_a365_prospectColor";
            tooltip = "Prospect";  
            break;
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}