共用方式為


自訂 Azure IoT Central UI

本文說明您可以如何套用自訂主題、變更文字並修改說明連結來指向您自己的自訂說明資源,藉此自訂應用程式的 UI。

下列螢幕擷取畫面顯示使用標準主題的頁面:

這個螢幕擷取畫面顯示預設 UI 主題。

下列螢幕擷取畫面顯示使用自訂螢幕擷取畫面的頁面,其中已醒目提示自訂 UI 元素:

這個螢幕擷取畫面顯示自訂 UI 主題。

提示

您也可以自訂瀏覽器網址列和我的最愛清單中顯示的影像。

建立主題

若要建立自訂主題,請瀏覽至 [自訂] 頁面中的 [外觀] 區段。

這個螢幕擷取畫面顯示外觀自訂頁面。

在這個頁面上,您可以自訂下列應用程式的層面:

具有透明背景的 PNG 影像,大小不超過 1 MB。 這個標誌會顯示在 IoT Central 應用程式標題列左側。

如果您的標誌影像包含應用程式的名稱,您可以隱藏應用程式名稱文字。 如需詳細資訊,請參閱管理應用程式

瀏覽器圖示 (最愛圖示)

具有透明背景的 PNG 影像,長寬不超過 32 x 32 像素。 網頁瀏覽器可以在網址列、歷程記錄、書籤和瀏覽器索引標籤中使用這個影像。

瀏覽器色彩

您可以變更頁首的色彩,以及用於強調按鈕和其他醒目提示的色彩。 使用格式為 ##ff6347 的六個字元十六進位色彩值。 如需十六進位值色彩標記法的詳細資訊,請參閱 HTML 色彩

注意

您可以一律還原回 [外觀] 區段上的預設選項。

操作員的變更

如果管理員建立自訂主題,則您應用程式的操作員和其他使用者將再也無法於 [外觀] 中選擇主題。

若要為操作員和其他使用者提供自訂說明資訊,您可以修改應用程式 [說明] 功能表上的連結。

若要修改說明連結,請瀏覽至 [自訂] 頁面中的 [說明連結] 區段。

這個螢幕擷取畫面顯示如何自訂說明連結。

您也可以新增項目至說明功能表,並移除預設項目:

這個螢幕擷取畫面顯示說明連結清單。

注意

您可以隨時還原回 [自訂] 頁面上的預設說明連結。

變更應用程式文字

若要變更應用程式中的文字標籤,請瀏覽至 [自訂] 頁面中的 [文字] 區段。

在這個頁面上,您可以為所有支援的語言自訂應用程式文字。 上傳自訂文字檔之後,應用程式文字會自動以更新的文字顯示。 您可以編輯和覆寫自訂檔案,進一步自訂。 您可以針對 IoT Central UI 支援的任何語言重複這個流程。

下列範例示範如何在以英文檢視應用程式時,將字組從 Device 變更為 Asset

  1. 選取 [新增應用程式文字],然後在下拉式清單中選取 [英文]。

  2. 下載預設文字檔。 該檔案包含可供變更的文字字串的 JSON 定義。

  3. 在文字編輯器中開啟檔案並編輯右側字串,以 asset 取代字組 device,如下列範例所示:

    {
      "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 現在會使用新的文字值:

    螢幕擷取畫面,顯示 UI 中的已更新文字。

您可以從 [自訂] 頁面的 [文字] 區段清單中選取相關語言,重新上傳進一步變更的自訂檔案。

下一步

既然已了解如何在 IoT Central 應用程式中自訂 UI,以下是一些建議的後續步驟: