Mengkustomisasi UI Azure IoT Central

Artikel
10/22/2024

Artikel ini menjelaskan bagaimana Anda dapat menyesuaikan UI aplikasi Anda dengan menerapkan tema kustom, mengubah teks, dan memodifikasi tautan bantuan untuk menunjuk ke sumber daya bantuan kustom Anda sendiri.

Cuplikan layar berikut ini memperlihatkan halaman menggunakan tema standar:

Cuplikan layar berikut ini memperlihatkan halaman menggunakan tangkapan layar kustom dengan elemen UI yang dikustomisasi disorot:

Tip

Anda juga dapat menyesuaikan gambar yang ditampilkan di bilah alamat browser dan daftar favorit.

Membuat tema

Untuk membuat tema kustom, navigasikan ke bagian Tampilan di halaman Kustomisasi .

Di halaman ini, Anda dapat mengkustomisasi aspek aplikasi berikut:

Logo Aplikasi

Gambar PNG, tidak lebih besar dari 1 MB, dengan latar belakang transparan. Logo ini ditampilkan pada bilah judul aplikasi IoT Central.

Jika gambar logo Anda menyertakan nama aplikasi, Anda dapat menyembunyikan teks nama aplikasi. Untuk informasi selengkapnya, lihat Mengelola aplikasi Anda.

Ikon Browser (favicon)

Gambar PNG, tidak lebih besar dari 32 x 32 piksel, dengan latar belakang transparan. Browser web dapat menggunakan gambar ini di bilah alamat, riwayat, marka buku, dan tab browser.

Warna browser

Anda bisa mengubah warna header halaman dan warna yang digunakan untuk tombol aksen dan sorotan lainnya. Gunakan nilai warna heksa enam karakter dalam format ##ff6347. Untuk informasi selengkapnya tentang notasi warna HEX Value, lihat Warna HTML.

Catatan

Anda selalu dapat kembali ke opsi default di bagian Tampilan .

Perubahan untuk operator

Jika administrator membuat tema kustom, operator dan pengguna lain aplikasi Anda tidak dapat lagi memilih tema di Tampilan.

Ganti tautan bantuan

Untuk memberikan informasi bantuan kustom kepada operator dan pengguna lain, Anda dapat mengubah tautan pada menu Bantuan aplikasi.

Untuk mengubah tautan bantuan, navigasikan ke bagian Tautan bantuan di halaman Kustomisasi.

Anda juga bisa menambahkan entri baru ke menu bantuan dan menghapus entri default:

Catatan

Anda selalu dapat kembali ke tautan bantuan default di halaman Kustomisasi .

Mengubah teks aplikasi

Untuk mengubah label teks dalam aplikasi, navigasikan ke bagian Teks di halaman Kustomisasi .

Pada halaman ini, Anda dapat menyesuaikan teks aplikasi Anda untuk semua bahasa yang didukung. Setelah Anda mengunggah file teks kustom, teks aplikasi secara otomatis muncul dengan teks yang diperbarui. Anda dapat melakukan penyesuaian lebih lanjut dengan mengedit dan menimpa file kustomisasi. Anda dapat mengulangi proses untuk bahasa apa pun yang didukung UI IoT Central.

Contoh berikut menunjukkan cara mengubah kata Device menjadi Asset saat Anda melihat aplikasi dalam bahasa Inggris:

Pilih Tambahkan teks aplikasi dan pilih bahasa Inggris di menu dropdown.
Unduh file teks default. File berisi definisi JSON dari string teks yang dapat Anda ubah.

Untuk mengganti kata device dengan asset, buka file di editor teks dan edit string nilai seperti yang ditunjukkan dalam contoh berikut:

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

Unggah file kustomisasi yang diedit dan pilih Simpan untuk melihat teks baru Anda di aplikasi:

UI sekarang menggunakan nilai teks baru:

Anda dapat memuat ulang file kustomisasi dengan perubahan lebih lanjut dengan memilih bahasa yang relevan dari daftar di bagian Teks di halaman Kustomisasi .

Langkah berikutnya

Sekarang setelah Anda mempelajari cara menyesuaikan UI di aplikasi IoT Central Anda, berikut adalah beberapa langkah berikutnya yang disarankan:

Bagikan melalui