Dela via

Anpassa användargränssnittet för Azure IoT Central

  • Artikel

Den här artikeln beskriver hur du kan anpassa användargränssnittet för ditt program genom att använda anpassade teman, ändra texten och ändra hjälplänkarna så att de pekar på dina egna anpassade hjälpresurser.

Följande skärmbild visar en sida med standardtemat:

Skärmbild som visar standardtemat för användargränssnittet.

Följande skärmbild visar en sida med en anpassad skärmbild med de anpassade gränssnittselementen markerade:

Skärmbild som visar ett anpassat gränssnittstema.

Tips

Du kan också anpassa bilden som visas i webbläsarens adressfält och lista över favoriter.

Skapa tema

Om du vill skapa ett anpassat tema går du till avsnittet Utseende på sidan Anpassning .

Skärmbild som visar sidan för anpassning av utseende.

På den här sidan kan du anpassa följande aspekter av ditt program:

En PNG-avbildning, inte större än 1 MB, med transparent bakgrund. Den här logotypen visas till vänster i IoT Central-programrubrikfältet.

Om logotypbilden innehåller namnet på ditt program kan du dölja programnamnstexten. Mer information finns i Hantera ditt program.

Webbläsarikon (favicon)

En PNG-bild, inte större än 32 x 32 bildpunkter, med en transparent bakgrund. En webbläsare kan använda den här bilden i adressfältet, historiken, bokmärkena och webbläsarfliken.

Webbläsarfärger

Du kan ändra färgen på sidhuvudet och den färg som används för att framhäva knappar och andra markeringar. Använd ett hexfärgvärde på sex tecken i formatet ##ff6347. Mer information om HEX-värdefärgnotation finns i HTML-färger.

Anteckning

Du kan alltid återgå till standardalternativen i avsnittet Utseende .

Ändringar för operatorer

Om en administratör skapar ett anpassat tema kan operatorer och andra användare av programmet inte längre välja ett tema i Utseende.

Om du vill ge anpassad hjälpinformation till dina operatörer och andra användare kan du ändra länkarna på programhjälpmenyn .

Om du vill ändra hjälplänkarna går du till avsnittet Hjälplänkar på sidan Anpassning .

Skärmbild som visar hur du anpassar hjälplänkarna.

Du kan också lägga till nya poster i hjälpmenyn och ta bort standardposter:

Skärmbild som visar listan över hjälplänkar.

Anteckning

Du kan alltid återgå till standardhjälplänkarna på sidan Anpassning .

Ändra programtext

Om du vill ändra textetiketter i programmet går du till avsnittet Text på sidan Anpassning .

På den här sidan kan du anpassa texten i ditt program för alla språk som stöds. När du har laddat upp den anpassade textfilen visas programtexten automatiskt med den uppdaterade texten. Du kan göra ytterligare anpassningar genom att redigera och skriva över anpassningsfilen. Du kan upprepa processen för alla språk som IoT Central-användargränssnittet stöder.

Följande exempel visar hur du ändrar ordet Device till Asset när du visar programmet på engelska:

  1. Välj Lägg till programtext och välj det engelska språket i listrutan.

  2. Ladda ned standardtextfilen. Filen innehåller en JSON-definition av de textsträngar som du kan ändra.

  3. Öppna filen i en textredigerare och redigera strängarna på höger sida för att ersätta ordet device med asset enligt följande exempel:

    {
  "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. Ladda upp den redigerade anpassningsfilen och välj Spara för att se din nya text i programmet:

    Skärmbild som visar hur du laddar upp en anpassad textfil.

    Användargränssnittet använder nu de nya textvärdena:

    Skärmbild som visar uppdaterad text i användargränssnittet.

Du kan läsa in anpassningsfilen igen med ytterligare ändringar genom att välja relevant språk i listan i avsnittet Text på sidan Anpassning .

Nästa steg

Nu när du har lärt dig hur du anpassar användargränssnittet i ditt IoT Central-program föreslår vi följande steg: