你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

自定义 Azure IoT Central UI

本文介绍你如何以管理员的身份通过应用自定义主题，更改文本，并将帮助链接修改为指向自己的自定义帮助资源，从而自定义应用程序的 UI。

以下屏幕截图显示了使用标准主题的页面：

以下屏幕截图显示了使用自定义主题的页面，其中突出显示了自定义 UI 元素：

提示

还可以自定义浏览器的地址栏和收藏夹列表中显示的图像。

创建主题

要创建自定义主题，请导航到“自定义”页面的“外观”部分。

在此页上，可以自定义应用程序的以下方面：

应用程序徽标

大小不超过 1 MB 且带有透明背景的 PNG 图像。 此徽标显示在 IoT Central 应用程序标题栏的左侧。

如果徽标图像包含应用程序的名称，你可以隐藏应用程序名称文本。 有关详细信息，请参阅管理应用程序。

浏览器图标（网站图标）

大小不超过 32 x 32 像素且带有透明背景的 PNG 图像。 Web 浏览器可以在地址栏、历史记录、书签和浏览器标签页中使用此图像。

浏览器颜色

可以更改页头的颜色，以及用于突出按钮和其他强调内容的颜色。 请使用 ##ff6347 格式的六个字符十六进制颜色值。 有关十六进制值颜色表示法的详细信息，请参阅 HTML 颜色。

注意

可以随时还原回“外观”部分的默认选项。

面向操作员的更改

如果管理员创建了自定义主题，则应用程序的操作员和其他用户不再可以在“外观”中选择主题。

替换帮助链接

若要为操作员和其他用户提供自定义帮助信息，可以修改应用程序“帮助”菜单中的链接。

要修改帮助链接，请导航到“自定义”页面的“帮助链接”部分。

还可以将新条目添加到帮助菜单，以及删除默认条目：

注意

可以随时还原到“自定义”页上的默认帮助链接。

更改应用程序文本

要更改应用程序中的文本标签，请导航到“自定义”页面的“文本”部分。

在此页上，你可以为所有支持的语言自定义应用程序的文本。 上传自定义文本文件后，应用程序文本会自动显示并显示更新的文本。 可以通过编辑和覆盖自定义文件进行进一步自定义。 可以对 IoT Central UI 支持的任何语言重复该过程。

以下示例显示了当你以英文查看应用程序时如何将单词 Device 更改为 Asset：

1. 选择“添加应用程序文本”并在下拉列表中选择英语。

2. 下载默认文本文件。 该文件包含可以更改的文本字符串的 JSON 定义。

3. 在文本编辑器中打开该文件，然后编辑右侧字符串以将单词 device 替换为 asset，如以下示例所示：

   {
     "Device": {
       "AllEntities": "All assets",
       "Approve": {
         "Confirmation": "Are you sure you want to approve this asset?",
         "Confirmation_plural": "Are you sure you want to approve these assets?"
       },
       "Block": {
         "Confirmation": "Are you sure you want to block this asset?",
         "Confirmation_plural": "Are you sure you want to block these assets?"
       },
       "ConnectionStatus": {
         "Connected": "Connected",
         "ConnectedAt": "Connected {{lastReportedTime}}",
         "Disconnected": "Disconnected",
         "DisconnectedAt": "Disconnected {{lastReportedTime}}"
       },
       "Create": {
         "Description": "Create a new asset with the given settings",
         "ID_HelpText": "Enter a unique identifier this asset will use to connect.",
         "Instructions": "To create a new asset, select an asset template, a name, and a unique ID. <1>Learn more <1></1></1>",
         "Name_HelpText": "Enter a user friendly name for this asset. If not specified, this will be the same as the asset ID.",
         "Simulated_Label": "Simulate this asset?",
         "Simulated_HelpText": "A simulated asset generates telemetry that enables you to test the behavior of your application before you connect a real asset.",
         "Title": "Create a new asset",
         "Unassigned_HelpText": "Choosing this will not assign the new asset to any asset template.",
         "HardwareId_Label": "Hardware type",
         "HardwareId_HelpText": "Optionally specify the manufacturer of the asset",
         "MiddlewareId_Label": "Connectivity solution",
         "MiddlewareId_HelpText": "Optionally choose what type of connectivity solution is installed on the asset"
       },
       "Delete": {
         "Confirmation": "Are you sure you want to delete this asset?",
         "Confirmation_plural": "Are you sure you want to delete these assets?",
         "Title": "Delete asset permanently?",
         "Title_plural": "Delete assets permanently?"
       },
       "Entity": "Asset",
       "Entity_plural": "Assets",
       "Import": {
         "Title": "Import assets from a file",
         "HelpText": "Choose the organization that can access the assets you’re importing, and then choose the file you’ll use to import. <1>Learn more <1></1></1>",
         "Action": "Import assets with an org assignment from a chosen file.",
         "Upload_Action": "Upload a .csv file",
         "Browse_HelpText": "You’ll use a CSV file to import assets. Click “Learn more” for samples and formatting guidelines."
       },
       "JoinToGateway": "Attach to gateway",
       "List": {
         "Description": "Grid displaying list of assets",
         "Empty": {
         "Text": "Assets will send data to IoT Central for you to monitor, store, and analyze. <1>Learn more <1></1></1>",
         "Title": "Create an Asset"
         }
       },
       "Migrate": {
         "Confirmation": "Migrating selected asset to another template. Select migration target.",
         "Confirmation_plural": "Migrating selected assets to another template. Select migration target."
       },
       "Properties": {
         "Definition": "Asset template",
         "DefinitionId": "Asset template ID",
         "Id": "Asset ID",
         "Name": "Asset name",
         "Scope": "Organization",
         "Simulated": "Simulated",
         "Status": "Asset status"
       },
       "Rename": "Rename asset",
       "Status": {
         "Blocked": "Blocked",
         "Provisioned": "Provisioned",
         "Registered": "Registered",
         "Unassociated": "Unassociated",
         "WaitingForApproval": "Waiting for approval"
       },
       "SystemAreas": {
         "Downstreamassets": "Downstream assets",
         "Module_plural": "Modules",
         "Properties": "Properties",
         "RawData": "Raw data"
       },
       "TemplateList": {
         "Empty": "No definitions found.",
         "FilterInstructions": "Filter templates"
       },
       "Unassigned": "Unassigned",
       "Unblock": {
         "Confirmation": "Are you sure you want to unblock this asset?",
         "Confirmation_plural": "Are you sure you want to unblock these assets?"
       }
     }
   }
   

4. 上传你编辑的自定义文件并选择“保存”以在应用程序中查看你的新文本：

   

   UI 现在将使用新的文本值：

   

可通过从“自定义”页面的“文本”部分的列表中选择相关语言，重新上传包含更多更改的自定义文件。

后续步骤

了解如何在 Azure IoT Central 应用程序中自定义 UI 后，建议接下来学习：

• 管理应用程序
• 向仪表板添加磁贴