自訂 Azure IoT Central UI
本文說明您可以如何套用自訂主題、變更文字並修改說明連結來指向您自己的自訂說明資源,藉此自訂應用程式的 UI。
下列螢幕擷取畫面顯示使用標準主題的頁面:
下列螢幕擷取畫面顯示使用自訂螢幕擷取畫面的頁面,其中已醒目提示自訂 UI 元素:
提示
您也可以自訂瀏覽器網址列和我的最愛清單中顯示的影像。
建立主題
若要建立自訂主題,請瀏覽至 [自訂] 頁面中的 [外觀] 區段。
在這個頁面上,您可以自訂下列應用程式的層面:
應用程式標誌
具有透明背景的 PNG 影像,大小不超過 1 MB。 這個標誌會顯示在 IoT Central 應用程式標題列左側。
如果您的標誌影像包含應用程式的名稱,您可以隱藏應用程式名稱文字。 如需詳細資訊,請參閱管理應用程式。
瀏覽器圖示 (最愛圖示)
具有透明背景的 PNG 影像,長寬不超過 32 x 32 像素。 網頁瀏覽器可以在網址列、歷程記錄、書籤和瀏覽器索引標籤中使用這個影像。
瀏覽器色彩
您可以變更頁首的色彩,以及用於強調按鈕和其他醒目提示的色彩。 使用格式為 ##ff6347
的六個字元十六進位色彩值。 如需十六進位值色彩標記法的詳細資訊,請參閱 HTML 色彩。
注意
您可以一律還原回 [外觀] 區段上的預設選項。
操作員的變更
如果管理員建立自訂主題,則您應用程式的操作員和其他使用者將再也無法於 [外觀] 中選擇主題。
取代說明連結
若要為操作員和其他使用者提供自訂說明資訊,您可以修改應用程式 [說明] 功能表上的連結。
若要修改說明連結,請瀏覽至 [自訂] 頁面中的 [說明連結] 區段。
您也可以新增項目至說明功能表,並移除預設項目:
注意
您可以隨時還原回 [自訂] 頁面上的預設說明連結。
變更應用程式文字
若要變更應用程式中的文字標籤,請瀏覽至 [自訂] 頁面中的 [文字] 區段。
在這個頁面上,您可以為所有支援的語言自訂應用程式文字。 上傳自訂文字檔之後,應用程式文字會自動以更新的文字顯示。 您可以編輯和覆寫自訂檔案,進一步自訂。 您可以針對 IoT Central UI 支援的任何語言重複這個流程。
下列範例示範如何在以英文檢視應用程式時,將字組從 Device
變更為 Asset
:
選取 [新增應用程式文字],然後在下拉式清單中選取 [英文]。
下載預設文字檔。 該檔案包含可供變更的文字字串的 JSON 定義。
在文字編輯器中開啟檔案並編輯右側字串,以
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?" } } }
上傳編輯過的自訂檔案,然後選取 [儲存],查看應用程式中的新文字:
UI 現在會使用新的文字值:
您可以從 [自訂] 頁面的 [文字] 區段清單中選取相關語言,重新上傳進一步變更的自訂檔案。
下一步
既然已了解如何在 IoT Central 應用程式中自訂 UI,以下是一些建議的後續步驟: