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

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

重要

  • この記事で説明する方法では、個人用ビューでの画像の表示はサポートされておらず、それらの個人用ビューには画像が表示されません。
  • グリッドとビューで列の視覚化を追加するより良い方法があります。 詳細については、「グリッドのカスタム列の視覚化」を参照してください。

この例では、Dynamics 365 Sales などの特定のアプリで使用できる営業案件テーブルのビューにカスタム アイコンを表示します。 取引先企業テーブルや取引先担当者テーブルなどの他の標準テーブルのビューだけでなく、ユーザー定義テーブルのビューにもカスタム アイコンを表示できます。

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

リスト ビューのカスタム アイコンは、モデル駆動型アプリ、モバイル アプリ、App for Outlook で表示できます。

注

  • アプリがモバイル オフライン モードの場合、カスタム アイコンは使用できません。
  • 現在、このカスタマイズは、クラシック ソリューション エクスプローラーを使用することによってのみ完了できます。

ユーザー定義のグラフィックおよび JavaScript を Web リソースとして追加

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

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

  3. 環境にサインインして、ソリューション エクスプローラーを開きます。

  4. ソリューション タブが開きます。 コンポーネント>Web リソースに移動します。

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

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

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

    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 関数には、 layoutxml で指定された行オブジェクト全体と呼び出し元ユーザーのロケール ID (LCID) という 2 つの引数が必要です。 LCID パラメーターでは、複数の言語でツールヒントのテキストを指定できます。 サポートされている言語の詳細については、「環境の地域と言語のオプション」を参照してください。 コードで使用できるロケール 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リソースを作成する必要があります。

重要

このサンプルでは、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;  
}

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

プライマリ列

グリッド リスト ビューでは、テーブルのプライマリ列に適用されたカスタム アイコンによって、システムで生成された既定のアイコンが置き換えられます。

カスタム アイコン ビューの規定アイコンがプライマリ列に置き換わります。

その他の列

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

テーブルのプライマリ列のカスタム アイコン ビューではありません。

カード フォーム

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

カード ビュー カスタム アイコン ビュー。

関連項目

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

  • 最終更新: