Mengkustomisasi UI Azure IoT Central

  • Artikel

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 yang memperlihatkan tema UI default.

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

Cuplikan layar yang memperlihatkan tema UI kustom.

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 .

Cuplikan layar yang memperlihatkan halaman kustomisasi tampilan.

Di halaman ini, Anda dapat mengkustomisasi aspek aplikasi berikut:

Gambar PNG, tidak lebih besar dari 1 MB, dengan latar belakang transparan. Logo ini ditampilkan di sebelah kiri 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 pada bagian Tampilan .

Perubahan untuk operator

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

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 .

Cuplikan layar yang memperlihatkan cara mengkustomisasi tautan bantuan.

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

Cuplikan layar yang memperlihatkan daftar tautan bantuan.

Catatan

Anda selalu bisa 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:

  1. Pilih Tambahkan teks aplikasi dan pilih bahasa Inggris di menu dropdown.

  2. Unduh file teks default. File berisi definisi JSON dari string teks yang dapat Anda ubah.

  3. Buka file di editor teks dan edit string sisi kanan untuk mengganti kata device dengan asset 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?"
    }
  }
}

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

    Cuplikan layar memperlihatkan cara mengunggah file teks kustom.

    UI sekarang menggunakan nilai teks baru:

    Cuplikan layar yang memperlihatkan teks yang diperbarui di UI.

Anda dapat memuat ulang file kustomisasi dengan perubahan lebih lanjut dengan memilih bahasa yang relevan dari daftar pada 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: