リスト ビューにカスタム アイコンを追加する

  • [アーティクル]

このトピックは、Dynamics 365 Customer Engagement (on-premises) に適用されます。 このトピックの Power Apps バージョンについては、以下を参照してください。 リスト ビューに値とともにユーザー定義アイコンを表示する

管理者とカスタマイザーは、ビューにグラフィックスを追加して、JavaScript を使用した列の値に基づいてグラフィックを選択するために使用するロジックを設定することができます。 この機能を使用すると すべての営業案件 ビューのこの 評価 列のように、テキストまたは数値の横にアイコンを表示するリストビューをカスタマイズすることができます。

アイコンとテキスト値を表示するすべての営業案件ビューの評価列。

リスト ビューのユーザー定義アイコンは、統一インターフェイス、クラシック Web クライアント、モバイル アプリ、および Outlook 用アプリで表示できます。

Webリソースのようなユーザー定義のグラフィックおよびJavaScriptの追加

  1. カスタマイズに必要な新しいグラフィック ファイルを作成します。 16 x 16 ピクセル アイコンのサイズをお勧めします (より大きな画像は縮小されます)。

  2. どの値にどのアイコンを表示するかを確定する 1 つ以上の JavaScript 関数を書き込みます (通常、カスタマイズする列ごとに 1 つの関数が必要になります)。 各関数は、イメージ名およびツールヒントのテキストを含む配列を入力して返すように、行データ オブジェクトおよび言語 (LCID) コードを受け入れる必要があります。 関数の例については、このトピックの後半にある「サンプル JavaScript 関数」を参照してください。

  3. 管理者としてお使いの環境にサインインして、ソリューション エクスプローラーを開きます。

  4. 既定のソリューションのポップアップ ウィンドウが開きます。 ここで、コンポーネント>Web リソースに順に移動します。

  5. ユーザー定義のグラフィックを 1 つずつ Web リソースとしてアップロードします。 新しいWebリソースを作成するには、ツール バーの新規ボタンを選択します。 リソースを作成しやすいように別のポップアップ ウィンドウが開きます。 次の手順を実行します。

    1. 新しいリソースにわかりやすい名前を付けます。 これは、JavaScriptコードから各グラフィックを参照するのに使用する名前です。

    2. グラフィック ファイルの保存に使用したグラフィック フォーマット (PNG、JPEG、または GIF) に種類を設定します。

    3. ファイル ブラウザー ウィンドウを開くには、ファイルを選択を選択します。 これを使用してグラフィック ファイルを検索したり、選択したりします。

    4. 必要で応じて、表示名および説明を追加します。

    5. 保存を選択してから、Webリソースウィンドウを閉じます。

  6. 手元にある各グラフィック ファイルに対して前の手順を繰り返します。

  7. ここで、最終 Web リソースとして JavaScript を追加します。 新しいWebリソースを作成するには、ツール バーで新規を選択します。 リソースを作成しやすいように別のポップアップ ウィンドウが開きます。 次の手順を実行します。

    1. 新しいリソースにわかりやすい名前を付けます。

    2. 種類をスクリプト (JScript) に設定します。

    3. テキスト エディター (種類設定の横) を選択してテキスト エディター ウィンドウを開きます。 ここにJavaScriptコードを貼り付け、OKを選択して保存します。

    4. 必要で応じて、表示名および説明を追加します。

    5. 保存を選択してから、Webリソースウィンドウを閉じます。

  8. 既定のソリューションポップアップ ウィンドウを開いた状態で、コンポーネント>エンティティツリーを展開し、カスタマイズするエンティティを見つけます。

  9. エンティティを展開し、ビューアイコンを選択します。

  10. 選択したエンティティのビューの一覧が表示されます。 一覧からビューを選択します。 次に、ツールバーのその他の操作ドロップダウン リストを開き、編集を選択します。

  11. ポップアップ ウィンドウが、選択したビューを編集するためのコントロールとともに開きます。 これはビューに含まれる各列を示します。 ターゲット列を選択してから、タスクボックスのプロパティの変更を選択します。 列のプロパティの変更ダイアログが開きます。ここで次の設定を行います:

    • Web リソース: JavaScript 関数を保持するために作成した Web リソースの名前を指定します (一覧から選択するには参照を選択します)。

    • 関数名: 選択した列およびビューを変更するために入力した関数名を入力します。

  12. OK を選択して列のプロパティの変更ダイアログを閉じます。

  13. 保存して閉じるを選択してビューを保存します。

  14. 必要に応じて、各エンティティ、ビュー、および列に対してこれらの手順を繰り返します。

  15. 準備ができたら、すべてのカスタマイズの公開を選択して変更を公開します。 その後、既定のソリューションウィンドウを閉じます。

サンプル JavaScript 関数

ユーザー定義アイコンとヒントを表示する JavaScript 関数には、次の 2 つの引数が表示されます: layoutxml で指定された行オブジェクト全体と呼び出し側ユーザーのロケール ID (LCID)。 LCID パラメーターでは、複数の言語でツールヒントのテキストを指定できます。 環境によってサポートされている言語の詳細については、言語を有効にするおよび Dynamics 365 for Customer Engagement の言語パックのインストールまたはアップグレードを参照してください。 コードで使用できるロケール ID (LCID) 値の一覧については、「Microsoft によって割り当てられるロケール ID」を参照してください。

事前定義された限定のオプション セットを持つオプション セット型の属性にカスタムアイコンを追加する可能性が最も高いと想定される場合は、ラベルの代わりにオプションの整数値を使用して、ローカライズ問題を回避することを確認します。

注意 : アイコンの決定にあたってデータを取得する必要がある場合、統一インターフェイスは、ブール値に解決する (リボンのルールと共通する) JavaScript Promise オブジェクトを返すことに対応しています。 カスタム関数では同期 XMLHttpRequest (XHR) を使用しないでください。

次のサンプル コードは、3 つの値 (1: 高、2: 中、3: 低) のうち 1 つに基づいて、opportunityratingcode (評価) 属性でアイコンおよびヒントを表示します。 サンプル コードは、ローカライズしたツールヒントのテキストを表示する方法についても示します。 このサンプルを機能させるには、new_Hot、new_Warm、および new_Cold の名前で、16 x 16イメージの3つのイメージWebリソースを作成する必要があります。

"use strict";

function displayIconTooltip(rowData, userLCID) {      
    var str = JSON.parse(rowData);  
    var coldata = str.opportunityratingcode_Value;  
    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(coldata,10)) { 
        case 1:  
            imgName = "new_Hot";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Hot";  
                    break;  
                default:  
                    tooltip = "Opportunity is Hot";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "new_Warm";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Warm";  
                    break;  
                default:  
                    tooltip = "Opportunity is Warm";  
                    break;  
            }  
            break;  
        case 3:  
            imgName = "new_Cold";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Cold";  
                    break;  
                default:  
                    tooltip = "Opportunity is Cold";  
                    break;  
            }  
            break;  
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}

関連項目

ビューの作成または編集