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

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

## 完成イメージ
変更前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/e0695686-21c4-e9a0-cae0-a3816112b48b.png)

変更後　ロック状況の項目にアイコン表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f5856216-0e43-bb59-f37b-17c5508685c2.png)


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

以上

### 手順1.表示したい画像ファイル（拡張子PNG）をアップする
表示したいアイコン＝画像ファイルをWebリソースへ格納
16×16ピクセルの.pngの画像を使う。

この画像は３つアップロード後の画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/44a7e368-033d-11ec-e86f-7db733571ef4.png)

１つめアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/fae0b6a8-9813-cbb4-4a30-f45e2ab990fd.png)

PNG画像ファイルをWebリソースへ新規追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/36b8de65-bd70-2368-0a99-bc4ec326f928.png)

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

https://www.freeiconspng.com/images/16x16-icon

同じ手順で3ファイル追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/44a7e368-033d-11ec-e86f-7db733571ef4.png)


### 手順2.一覧画面にカスタム項目追加し、ビューの一覧に追加する
既存項目でも可能。今回はカスタム項目を新規追加した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/0a77d4b6-9717-343b-a05b-77849607a85f.png)

「cr000_lock1」をスキーマ名に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/c3f8b5f3-940d-4eca-98c1-45684e8ff277.png)


項目ロック状況の値を後で使うためメモ帳へコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/dc10fd7d-e0a1-3ec6-4717-ced18e208fce.png)

ビューに先ほど新規追加した項目を設定し、上書き保存→検証→公開を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/bc49d367-77de-46ee-5c57-7b6d5989b9f2.png)



### 手順3.JavaScriptを書きWebリソースへアップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/fcdc7ebf-7a95-55ac-9b72-11161ca1d4c6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/d88a33b1-ed0c-2c7a-7699-b34e82ea1e3d.png)


テキストエディタを開く
testCustomIconslistviewの関数名
```javascript: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;  
}
```



### 手順4.ビューのオプション設定から、JavaScriptを呼び出すように設定する
クラシック設定画面より、ビューを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/8cd6899f-ba71-79c1-7707-a193775c0d42.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ac26d18a-79db-3864-cf8c-e727edfc4297.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/af909735-f4f9-5d1a-1380-7c1a93197230.png)

関数「getRowinfo」はJavascriptの関数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/e03a8018-39ee-3906-c4f0-9a8ff5e709f1.png)

ビューのロック状況の項目にアイコンがでるはずであるがでない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/e0695686-21c4-e9a0-cae0-a3816112b48b.png)

ビューの表示形式を読み取り専用にしてもでてこない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ca90eb37-48e3-6a87-3baa-72094cec9e6c.png)

原因スキーマ名とJavaScriptの設定がことなるから
「cr000_cr000_lock1」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/654f7082-a160-2037-f0d6-a6b02a017697.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/64201f78-df5a-204d-1c8b-a8c17ef8f269.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/871e72d8-2807-29ca-caae-52529db7ffc9.png)

ビューのロック状況項目とJavaScriptもリンクつなぎなおします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/76c5908b-c3d2-8ad5-e98c-95af3e8cadfe.png)

すべてのカスタマイズの公開ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/5083fc27-2d79-4a94-0e31-90fd9aca9d3a.png)

ロック状況にアイコン出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/743f4d21-c2b5-b72f-2198-c256a9407599.png)


## 参考
https://community.dynamics.com/crm/f/microsoft-dynamics-crm-forum/443406/add-custom-icons-to-a-list-view-and-bring-field-on-related-entity-view


https://www.iotap.com/blog/2018/02/01/custom-icons-for-list-view-in-dynamics-365/

https://docs.microsoft.com/ja-jp/dynamics365/customerengagement/on-premises/customize/display-custom-icons-instead?view=op-9-1