次の方法で共有

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

  • [アーティクル]

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」を参照してください。

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

注意 : アイコンの決定にあたってデータを取得する必要がある場合、統一インターフェイスは、ブール値に解決する (リボンのルールと共通する) 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;  
}

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

プライマリ列

グリッド リスト ビューでは、テーブルのプライマリ列に適用されたカスタム アイコンが、システムで生成されたデフォルトのアイコンに置き換わります。

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

その他の列

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

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

カード フォーム

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

カード ビュー ユーザー定義アイコン ビュー。

関連項目

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

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。