自定義 Azure IoT Central UI

文章
10/23/2024

本文說明如何套用自定義主題、變更文字，以及修改說明連結以指向您自己的自定義說明資源，以自定義應用程式的UI。

下列螢幕快照顯示使用標準主題的頁面：

下列螢幕快照顯示使用自定義螢幕快照的頁面，並醒目提示自定義UI元素：

提示

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

建立主題

若要建立自定義主題，請流覽至 [自定義] 頁面中的 [外觀] 區段。

在此頁面上，您可以自訂應用程式的下列層面：

應用程式標誌

PNG 影像，不大於 1 MB，具有透明背景。此標誌會顯示在IoT Central 應用程式標題列上。

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

瀏覽器圖示（favicon）

PNG 影像，不大於 32 x 32 圖元，具有透明背景。網頁瀏覽器可以在網址列、歷程記錄、書籤和瀏覽器索引標籤中使用此影像。

瀏覽器色彩

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

注意

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

運算子的變更

如果系統管理員建立自定義主題，則應用程式的操作員和其他使用者就無法再在 [外觀] 中選擇主題。

取代說明連結

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

若要修改說明連結，請流覽至 [自定義] 頁面中的 [說明連結] 區段。

您也可以將新專案新增至說明選單，並移除預設專案：

注意

您一律可以還原回 [自定義] 頁面上的預設說明連結。

變更應用程式文字

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

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

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

選取 [新增應用程式文字 ]，然後選取下拉式清單中的英文。
下載預設文字檔。檔案包含您可以變更之文字字串的 JSON 定義。

若要將文字 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?"
    }
  }
}

上傳編輯的自定義檔案，然後選取 [ 儲存 ] 以查看應用程式中的新文字：

UI 現在會使用新的文字值：

您可以從 [自定義] 頁面中的 [文字] 區段上選取相關語言，以進一步變更重新載入自定義檔案。

下一步

既然您已瞭解如何在IoT Central 應用程式中自定義UI，以下是一些建議的後續步驟：

分享方式：

自定義 Azure IoT Central UI