在列表视图中在值旁边显示自定义图标

2025-07-09

Power Apps 环境管理员和定制员可以将图形添加到视图，并使用 JavaScript 建立用于基于列值选择图形的逻辑。此功能让您可以自定义在文本旁边显示图标或数字值的列表视图。

此示例在商机表的视图中显示某些应用（如 Dynamics 365 Sales）提供的自定义图标。您可以在其他标准表（如客户或联系人表）以及自定义表的视图中显示自定义图标。

列表视图中的自定义图标可在模型驱动应用、移动应用和 Outlook 应用中显示。

备注

当应用程序处于移动离线模式时，自定义图标不可用。
此自定义当前只能使用经典解决方案资源管理器完成。

将自定义图形和 JavaScript 添加为 Web 资源

创建自定义所需新图形文件。我们建议图标大小为 16x16 像素（将缩小更大的图像）。
编写一个或多个 JavaScript 函数，以确定为哪些值显示哪些图标（通常每个要自定义的列都需要一个函数）。每个函数必须接受一个行数据对象和一个语言 (LCID) 代码充当输入，并返回包含图像名称和工具提示文本的任何数组。有关示例函数，请参阅本文中后文的示例 JavaScript 函数。
登录到您的环境并打开解决方案资源管理器。
解决方案选项卡打开。转到组件>Web 资源。
现在，逐个上传您的自定义图形作为 Web 资源。选择工具栏上的新建按钮创建新 Web 资源。弹出窗口打开以帮助您创建资源。请按照以下步骤进行操作:
1. 为新资源提供有意义的名称。这是您在 JavaScript 代码中引用每个图形时使用的名称。
2. 将类型设置为已用于保存您的图形文件的图形格式（PNG、JPEG 或 GIF）。
3. 选择选择文件打开文件浏览器窗口。将其用于查找并选择图形文件。
4. 根据需要添加显示名称和/或说明。
5. 选择保存，然后关闭 Web 资源窗口。
为您拥有的每个图形文件重复上一步。
现在，将您的 JavaScript 作为最后一个 Web 资源添加。选择工具栏上的新建按钮创建新 Web 资源。将再打开一个弹出窗口，帮助您创建资源。请执行以下操作：
1. 为新资源提供有意义的名称。
2. 将类型设置为脚本(JScript)。
3. 选择文本编辑器（在类型设置旁边）打开文本编辑器窗口。在此粘贴您的 JavaScript 代码并选择确定以保存。
4. 根据需要添加显示名称和/或说明。
5. 选择保存，然后关闭 Web 资源窗口。
在解决方案选项卡仍打开的情况下，展开组件>表格树并定位您要自定义的表格。
展开您的表并选择其视图图标。
现在将看到您所选表的视图列表。从列表中选择视图。然后打开工具栏中的其他操作下拉列表，然后选择编辑。
将打开一个弹出窗口，其中包含用于编辑您所选视图的控件。它显示视图的每个列。选择目标列，然后选择普通任务框中的更改属性按钮。将打开更改列属性对话框；请在此处执行以下设置：
- Web 资源：指定您创建的用于存放 JavaScript 函数的 Web 资源名称（选择浏览，从列表中进行选择）。
- 函数名称：键入您编写来修改所选列和视图的函数的名称。
选择确定关闭更改列属性对话框。
选择保存并关闭以保存您的视图。
根据需要为每个表、视图和列重复这些步骤。
准备就绪后，选择发布所有自定义设置以发布您的更改。然后，关闭默认解决方案窗口。

示例 JavaScript 函数：

用于显示自定义图标和工具提示的 JavaScript 函数需要下面的两个自变量：layoutxml 中指定的完整行对象和调用用户的区域设置 ID (LCID)。 LCID 参数用于指定多种语言的工具提示文本。有关环境支持的语言的更多信息，请参阅启用语言和安装或升级语言包。有关可在代码中使用的区域设置 ID (LCID) 值的列表，请参阅 Microsoft 分派的区域设置 ID。

假设您正在为具有有限预定义选项的选项集类型属性添加自定义图标，请确保使用选项的整数值而非标签，以避免本地化问题。

备注

如果需要检索数据来确定图标，统一界面支持返回 JavaScript Promise 对象，该对象解析为布尔值（类似于 ribbon 规则）。不要在自定义函数中使用同步 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;  
}

自定义图标视图显示行为

主列

在网格列表视图中，应用于表主列的自定义图标将替换默认的系统生成的图标。

其他列

在网格列表视图中，除了默认的系统生成图标之外，应用于非表主列的列的自定义图标还显示为辅助图标。

不是表主列的自定义图标视图。

卡窗体

当视图配置为使用卡窗体时，自定义图标取代系统生成的默认图标。

另请参见

了解模型驱动应用视图

反馈

此页面是否有帮助？