在列表视图中在值旁边显示自定义图标
Power Apps 环境管理员和定制员可以将图形添加到视图，并使用 JavaScript 建立用于基于列值选择图形的逻辑。 此功能让您可以自定义在文本旁边显示图标或数字值的列表视图。
此示例在商机表的视图中显示某些应用（如 Dynamics 365 Sales）提供的自定义图标。 您可以在其他标准表（如客户或联系人表）以及自定义表的视图中显示自定义图标。
列表视图中的自定义图标可以在统一接口、旧 Web 客户端、移动应用和 App for Outlook 中显示。
备注
当应用程序处于移动离线模式时，自定义图标不可用。
将自定义图形和 JavaScript 添加为 Web 资源
创建自定义所需新图形文件。 我们建议图标大小为 16x16 像素（将缩小更大的图像）。
编写一个或多个 JavaScript 函数，用于指定为哪些值显示哪些图标（要自定义的每个列通常需要一个函数）。 每个函数必须接受一个行数据对象和一个语言 (LCID) 代码充当输入，并返回包含图像名称和工具提示文本的任何数组。 有关示例函数，请参阅本文中后文的示例 JavaScript 函数。
作为管理员登录到您的环境并打开解决方案资源管理器。
将打开默认解决方案弹出窗口。 此处导航到组件 > Web 资源。
现在您将上传自定义图形充当 Web 资源，一次一个。 选择工具栏中的新建按钮创建新 Web 资源。 将再打开一个弹出窗口，帮助您创建资源。 请按照以下步骤进行操作：
为新资源提供有意义的名称。 这是将用于从 JavaScript 代码引用各图形的名称。
将类型设置为已用于保存您的图形文件的图形格式（PNG、JPEG 或 GIF）。
选择选择文件打开文件浏览器窗口。 将其用于查找并选择图形文件。
根据需要添加显示名称和/或说明。
选择保存，然后关闭 Web 资源窗口。
为您拥有的每个图形文件重复上一步。
现在您将把您的 JavaScript 添加为最终 Web 资源。 选择工具栏上的新建按钮创建新 Web 资源。 将再打开一个弹出窗口，帮助您创建资源。 请执行以下操作：
为新资源提供有意义的名称。
将类型设置为脚本(JScript)。
选择文本编辑器（在类型设置旁边）打开文本编辑器窗口。 将您的 Javascript 代码粘贴到此处，然后选择确定保存。
根据需要添加显示名称和/或说明。
选择保存，然后关闭 Web 资源窗口。
在默认解决方案弹出窗口仍然保持打开状态时，展开组件 > 表树并找到要自定义的表。
展开您的表并选择其视图图标。
现在将看到您所选表的视图列表。 从列表中选择视图。 然后打开工具栏中的其他操作下拉列表，然后选择编辑。
将打开一个弹出窗口，其中包含用于编辑您所选视图的控件。 它显示视图的每个列。 选择目标列，然后选择普通任务框中的更改属性按钮。 将打开更改列属性对话框；请在此处执行以下设置：
Web 资源：指定创建来存储您的 Javascript 函数的 Web 资源的名称（选择浏览从列表中选择）。
函数名称：键入您编写来修改所选列和视图的函数的名称。
选择确定关闭更改列属性对话框。
选择保存并关闭以保存您的视图。
根据需要为每个表、视图和列重复这些步骤。
在您准备就绪时，请选择发布所有自定义项发布您的更改。 然后，关闭默认解决方案窗口。
示例 JavaScript 函数：
用于显示自定义图标和工具提示的 JavaScript 函数需要下面的两个自变量：layoutxml 中指定的完整行对象和调用用户的区域设置 ID (LCID)。 LCID 参数用于指定多种语言的工具提示文本。 有关环境支持的语言的更多信息，请参阅启用语言和安装或升级语言包。 有关可在代码中使用的区域设置 ID (LCID) 值的列表，请参阅 Microsoft 分派的区域设置 ID。
假定您将为属性的选项集类型添加自定义图标，该图标有一小组预定义的选项，那么确保使用这些选项的整数值而不是标签，以避免本地化问题。
注意：如果必须检索数据才能确定图标，统一接口将支持返回 JavaScript 承诺对象，该对象将解析为布尔值（类似功能区规则）。 请勿在自定义函数中使用同步的 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;
}
自定义图标视图显示行为
主列
在网格列表视图中，应用于表主列的自定义图标将替换默认的系统生成的图标。
其他列
在网格列表视图中，除了默认的系统生成图标之外，应用于非表主列的列的自定义图标还显示为辅助图标。
卡窗体
当视图配置为使用卡窗体时，自定义图标取代系统生成的默认图标。
