Dostosowywanie interfejsu użytkownika usługi Azure IoT Central

Artykuł
10/23/2024

W tym artykule opisano sposób dostosowywania interfejsu użytkownika aplikacji przez zastosowanie motywów niestandardowych, zmianę tekstu i zmodyfikowanie linków pomocy w celu wskazania własnych niestandardowych zasobów pomocy.

Poniższy zrzut ekranu przedstawia stronę używającą motywu standardowego:

Poniższy zrzut ekranu przedstawia stronę przy użyciu niestandardowego zrzutu ekranu z wyróżnionymi dostosowanymi elementami interfejsu użytkownika:

Napiwek

Możesz również dostosować obraz wyświetlany na pasku adresu przeglądarki i na liście ulubionych.

Tworzenie motywu

Aby utworzyć motyw niestandardowy, przejdź do sekcji Wygląd na stronie Dostosowywanie .

Na tej stronie można dostosować następujące aspekty aplikacji:

Logo aplikacji

Obraz PNG, nie większy niż 1 MB, z przezroczystym tłem. To logo jest wyświetlane na pasku tytułu aplikacji usługi IoT Central.

Jeśli obraz logo zawiera nazwę aplikacji, możesz ukryć tekst nazwy aplikacji. Aby uzyskać więcej informacji, zobacz Zarządzanie aplikacją.

Ikona przeglądarki (favicon)

Obraz PNG, nie większy niż 32 x 32 piksele, z przezroczystym tłem. Przeglądarka internetowa może używać tego obrazu na pasku adresu, historii, zakładkach i karcie przeglądarki.

Kolory przeglądarki

Możesz zmienić kolor nagłówka strony i kolor używany do wyróżniania przycisków i innych wyróżnień. Użyj sześcioznakowej wartości koloru szesnastkowego w formacie ##ff6347. Aby uzyskać więcej informacji na temat notacji koloru wartości HEX, zobacz Kolory HTML.

Uwaga

Zawsze możesz wrócić do opcji domyślnych w sekcji Wygląd .

Zmiany dla operatorów

Jeśli administrator utworzy motyw niestandardowy, operatory i inni użytkownicy aplikacji nie mogą już wybrać motywu w obszarze Wygląd.

Zamienianie linków pomocy

Aby udostępnić niestandardowe informacje pomocy operatorom i innym użytkownikom, możesz zmodyfikować linki w menu Pomoc aplikacji.

Aby zmodyfikować linki pomocy, przejdź do sekcji Linki pomocy na stronie Dostosowywanie .

Możesz również dodać nowe wpisy do menu Pomocy i usunąć wpisy domyślne:

Uwaga

Zawsze możesz wrócić do domyślnych linków pomocy na stronie Dostosowywanie .

Zmienianie tekstu aplikacji

Aby zmienić etykiety tekstowe w aplikacji, przejdź do sekcji Tekst na stronie Dostosowywanie .

Na tej stronie możesz dostosować tekst aplikacji dla wszystkich obsługiwanych języków. Po przekazaniu niestandardowego pliku tekstowego tekst aplikacji zostanie automatycznie wyświetlony ze zaktualizowanym tekstem. Dalsze dostosowania można wprowadzić, edytując i zastępując plik dostosowywania. Proces można powtórzyć dla dowolnego języka obsługiwanego przez interfejs użytkownika usługi IoT Central.

W poniższym przykładzie pokazano, jak zmienić wyraz Device na Asset podczas wyświetlania aplikacji w języku angielskim:

Wybierz pozycję Dodaj tekst aplikacji i wybierz język angielski na liście rozwijanej.
Pobierz domyślny plik tekstowy. Plik zawiera definicję JSON ciągów tekstowych, które można zmienić.

Aby zastąpić wyraz device ciągiem asset, otwórz plik w edytorze tekstów i edytuj ciągi wartości, jak pokazano w poniższym przykładzie:

{
  "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?"
    }
  }
}

Przekaż edytowany plik dostosowywania i wybierz pozycję Zapisz , aby wyświetlić nowy tekst w aplikacji:

Interfejs użytkownika używa teraz nowych wartości tekstowych:

Możesz ponownie załadować plik dostosowywania z dalszymi zmianami, wybierając odpowiedni język z listy w sekcji Tekst na stronie Dostosowywanie .

Następne kroki

Teraz, gdy wiesz już, jak dostosować interfejs użytkownika w aplikacji usługi IoT Central, poniżej przedstawiono kilka sugerowanych następnych kroków:

Udostępnij za pośrednictwem