Personalizzare l'interfaccia utente di Azure IoT Central

  • Articolo

Questo articolo descrive come personalizzare l'interfaccia utente dell'applicazione applicando temi personalizzati, modificando il testo e modificando i collegamenti della Guida in modo da puntare alle risorse della Guida personalizzate.

Lo screenshot seguente mostra una pagina che usa il tema standard:

Screenshot che mostra il tema predefinito dell'interfaccia utente.

Lo screenshot seguente mostra una pagina che usa uno screenshot personalizzato con gli elementi dell'interfaccia utente personalizzati evidenziati:

Screenshot che mostra un tema dell'interfaccia utente personalizzato.

Suggerimento

È anche possibile personalizzare l'immagine visualizzata nella barra degli indirizzi del browser e nell'elenco dei preferiti.

Crea tema

Per creare un tema personalizzato, passare alla sezione Aspetto nella pagina Personalizzazione .

Screenshot che mostra la pagina di personalizzazione dell'aspetto.

In questa pagina è possibile personalizzare gli aspetti seguenti dell'applicazione:

Immagine PNG, non superiore a 1 MB, con sfondo trasparente. Questo logo viene visualizzato a sinistra sulla barra del titolo dell'applicazione IoT Central.

Se l'immagine del logo include il nome dell'applicazione, è possibile nascondere il testo del nome dell'applicazione. Per altre informazioni, vedere Gestire l'applicazione.

Icona del browser (favicon)

Immagine PNG, non superiore a 32 x 32 pixel, con sfondo trasparente. Un Web browser può usare questa immagine nella barra degli indirizzi, nella cronologia, nei segnalibri e nella scheda del browser.

Colori del browser

È possibile modificare il colore dell'intestazione di pagina e il colore utilizzato per i pulsanti accenti e altre evidenziazioni. Usare un valore di colore esadecimale di sei caratteri nel formato ##ff6347. Per altre informazioni sulla notazione dei colori dei valori HEX , vedere Colori HTML.

Nota

È sempre possibile ripristinare le opzioni predefinite nella sezione Aspetto .

Modifiche per gli operatori

Se un amministratore crea un tema personalizzato, gli operatori e altri utenti dell'applicazione non possono più scegliere un tema in Aspetto.

Per fornire informazioni della Guida personalizzate agli operatori e ad altri utenti, è possibile modificare i collegamenti nel menu Della Guida dell'applicazione.

Per modificare i collegamenti alla Guida, passare alla sezione Collegamenti alla Guida nella pagina Personalizzazione .

Screenshot che mostra come personalizzare i collegamenti della Guida.

È anche possibile aggiungere nuove voci al menu della Guida e rimuovere le voci predefinite:

Screenshot che mostra l'elenco dei collegamenti della Guida.

Nota

È sempre possibile ripristinare i collegamenti della Guida predefiniti nella pagina Personalizzazione .

Modificare il testo dell'applicazione

Per modificare le etichette di testo nell'applicazione, passare alla sezione Testo nella pagina Personalizzazione .

In questa pagina è possibile personalizzare il testo dell'applicazione per tutte le lingue supportate. Dopo aver caricato il file di testo personalizzato, il testo dell'applicazione viene visualizzato automaticamente con il testo aggiornato. È possibile apportare ulteriori personalizzazioni modificando e sovrascrivendo il file di personalizzazione. È possibile ripetere il processo per qualsiasi linguaggio supportato dall'interfaccia utente di IoT Central.

Nell'esempio seguente viene illustrato come modificare la parola DeviceAsset in quando si visualizza l'applicazione in inglese:

  1. Selezionare Aggiungi testo dell'applicazione e selezionare la lingua inglese nell'elenco a discesa.

  2. Scaricare il file di testo predefinito. Il file contiene una definizione JSON delle stringhe di testo che è possibile modificare.

  3. Aprire il file in un editor di testo e modificare le stringhe sul lato destro per sostituire la parola device con come asset illustrato nell'esempio seguente:

    {
  "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. Caricare il file di personalizzazione modificato e selezionare Salva per visualizzare il nuovo testo nell'applicazione:

    Screenshot che mostra come caricare un file di testo personalizzato.

    L'interfaccia utente usa ora i nuovi valori di testo:

    Screenshot che mostra il testo aggiornato nell'interfaccia utente.

È possibile ricaricare il file di personalizzazione con ulteriori modifiche selezionando la lingua pertinente dall'elenco nella sezione Testo della pagina Personalizzazione .

Passaggi successivi

Dopo aver appreso come personalizzare l'interfaccia utente nell'applicazione IoT Central, ecco alcuni passaggi successivi consigliati: