リスト ビューに値とともにユーザー定義アイコンを表示

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

この例では、Dynamics 365 Sales などの特定のアプリで使用できる営業案件エンティティのビューにユーザー定義アイコンを表示します。 ユーザー定義エンティティだけでなく、取引先企業エンティティや顧客エンティティなど、他の標準エンティティとともにビューにユーザー定義アイコンを表示できます。

リスト ビューのユーザー定義アイコンは、統一インターフェイス、レガシ 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 パラメーターでは、複数の言語でツールヒントのテキストを指定できます。 環境によってサポートされている言語の詳細については、 言語を有効にする および 言語パックのインストールまたはアップグレードを参照してください。 コードで使用できるロケール ID (LCID) 値の一覧については、「Microsoft によって割り当てられるロケール ID」を参照してください。

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

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

Important

このサンプルでは、Dynamics 365 Sales アプリとともに使用できる営業案件エンティティが必要になります。

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;  
}  

ユーザー定義アイコン ビューの表示動作

プライマリ フィールド

グリッド リスト ビューでは、エンティティのプライマリ フィールドに適用されたユーザー定義アイコンが、既定のシステム生成アイコンに置き換わります。

その他のフィールド

グリッド リスト ビューでは、エンティティのプライマリ フィールドではないフィールドに適用されたユーザー定義アイコンは、既定のシステム生成アイコンに加えて、セカンダリ アイコンとして表示されます。

カード フォーム

ビューがカード フォームを使用するように設定されている場合、既定のシステム生成アイコンはユーザー定義アイコンに置き換わります。

関連項目

モデル駆動型アプリのビューについて