在清單檢視中的值旁邊顯示自訂圖示

Power Apps 環境系統管理員與自訂者可以使用 JavaScript，在檢視表中新增圖形並建立用以根據欄值選取圖形的邏輯。此功能可讓您自訂會在文字或數值旁邊顯示圖示的清單檢視。

重要

本文所述的方法不支援在 個人視圖中顯示圖片，而圖片也不會出現在個人視圖中。
在格子和視圖中新增欄位視覺化，有更好的方法。欲了解更多資訊，請參閱網格的自訂欄位視覺化。

此範例在商機資料表的檢視表中顯示自訂圖示，其可用於特定應用程式，例如 Dynamics 365 Sales。您可以在其他標準資料表 (如客戶或連絡人資料表) 以及自訂資料表的檢視表中顯示自訂圖示。

清單檢視中的自訂圖示可以顯示在模型導向應用程式、行動應用程式和 Outlook 應用程式中。

附註

當應用程式處於行動裝置離線模式時，無法使用自訂圖示。
此自訂目前只能透過使用傳統解決方案總管完成。

新增自訂圖形和 JavaScript 做為 Web 資源

建立您的自訂所需的新圖形檔案。建議的圖示大小為 16x16 像素 (較大的影像會調小)。
編寫一個或多個 JavaScript 函數來決定針對哪些值顯示哪些圖示 (通常您需要為要自訂的每一欄編寫一個函數)。每個函數都必須接受列資料物件和語言 (LCID) 碼做為輸入，並傳回包含影像名稱和工具提示文字的陣列。關於範例函數，請參閱本文章後段的 JavaScript 函數範例。
登入您的環境並開啟解決方案總管。
方案索引標籤開啟。前往元件>Web 資源。
現在，請逐一上傳您的自訂圖形作為網頁資源。選取工具列上的新增以建立新的 Web 資源。將會開啟一個快顯視窗來幫助您建立資源。執行下列步驟：
1. 為新資源提供有意義的名稱。這是您在 JavaScript 程式碼中參考每個圖形時使用的名稱。
2. 將類型設定為您用來儲存圖檔 (PNG、JPEG 或 GIF) 的圖形格式。
3. 選取選擇檔案以開啟檔案瀏覽器視窗。用它來尋找並選取您的圖形檔案。
4. 如果您願意，可新增顯示名稱和/或說明。
5. 選取儲存，然後關閉 Web 資源視窗。
為您的每一個圖形檔案重複前一個步驟。
現在，新增您的 JavaScript 作為最終的 Web 資源。選取工具列上的新增以建立新的 Web 資源。另一個快顯視窗會開啟，幫助您建立資源。請執行下列操作：
1. 為新資源提供有意義的名稱。
2. 將類型設定為 Script (JScript)。
3. 選取文字編輯器（在類型設定旁）以開啟文字編輯器視窗。在此處貼上您的 JavaScript 程式碼，然後選擇確定進行儲存。
4. 如有需要，請輸入顯示名稱和/或描述。
5. 選取儲存，然後關閉 Web 資源視窗。
在解決方案索引標籤仍然開啟的情況下，展開元件>資料表樹並找到要自訂的資料表。
展開您的資料表，並選取其Views圖示。
現在您會看見所選取資料表的檢視表清單。從清單選取檢視。然後開啟工具列中的其他動作下拉式清單，並選取編輯。
快顯視窗會開啟，其中包含用來編輯所選檢視表的控制項。它會顯示檢視表中的每一個欄。選取目標欄，然後選取變更屬性（位於一般工作方塊中）。 變更欄屬性對話方塊會開啟，在此進行下列設定：
- Web 資源：指定您建立的用於儲存 JavaScript 函數的 Web 資源的名稱 (選擇瀏覽從清單中選擇)。
- 函數名稱：鍵入您所撰寫來修改所選欄及檢視的函數名稱。
選取確定關閉變更欄屬性對話方塊。
選取儲存並關閉以儲存檢視表。
視需要針對每個資料表、檢視與欄位重複這些步驟。
準備好後，選擇發佈所有自訂項目以發佈您的變更。然後，關閉Default Solution視窗。

範例 JavaScript 函數

用於顯示自訂圖示與工具提示的 JavaScript 函式預期包含以下兩個參數：在 layoutxml 中指定的整個資料列物件，以及呼叫使用者的 Locale ID（LCID）。 LCID 參數可讓您以多種語言指定工具提示文字。欲了解更多支援語言資訊，請參閱您所在環境的區域及語言選項。如需可在程式碼中使用的地區設定識別碼 (LCID) 值清單，請參閱 Microsoft 指派的地區設定識別碼。

假設您正在為選項集類型的屬性新增自訂圖示，該屬性具有有限的預定義選項集，請確保使用選項的整數值而不是標籤，以避免當地語系化問題。

附註

如果需要擷取資料來確定圖示，Unified Interface 支援傳回 JavaScript Promise 物件，該物件會解析為布林值（類似於功能區規則）。不要在自訂函數中使用同步 XMLHttpRequest (XHR)。

範例程式碼根據 opportunityratingcode (分級) 屬性中的三個值之一 (1：熱、2：溫、3：冷) 顯示圖示和工具提示。範例程式碼也會顯示如何顯示本地化的工具提示文字。為了讓這個範例運作，您必須建立三個包含 16x16 影像的影像 Web 資源，分別使用下列名稱：new_Hot、new_Warm 和 new_Cold。

重要

此範例需要隨 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;  
}

自訂圖示檢視表顯示行為

主要資料行

在格線清單檢視表中，套用至資料表主要資料行的自訂圖示將取代預設的系統產生圖示。

其他資料行

在格線清單檢視表中，除預設的系統產生圖示外，將自訂圖示套用至資料表主要資料行以外的資料行，會顯示為次要圖示。

非資料表主要欄位的自訂圖示檢視。

卡片式表單

當檢視表組態為使用卡片表單時，自訂圖示會取代系統產生的預設圖示。

另請參閱

了解模型導向應用程式檢視表

意見反應

此頁面對您有幫助嗎？

上次更新時間： 2026-10-02