Personalizar a IU do Azure IoT Central

  • Artigo

Este artigo descreve como pode personalizar a IU da sua aplicação ao aplicar temas personalizados, alterar o texto e modificar as ligações de ajuda para apontar para os seus próprios recursos de ajuda personalizados.

A seguinte captura de ecrã mostra uma página com o tema padrão:

Captura de ecrã que mostra o tema de IU predefinido.

A captura de ecrã seguinte mostra uma página com uma captura de ecrã personalizada com os elementos de IU personalizados realçados:

Captura de ecrã a mostrar um tema de IU personalizado.

Dica

Também pode personalizar a imagem apresentada na barra de endereço do browser e na lista de favoritos.

Criar tema

Para criar um tema personalizado, navegue para a secção Aspeto na página Personalização .

Captura de ecrã que mostra a página de personalização do aspeto.

Nesta página, pode personalizar os seguintes aspetos da sua aplicação:

Uma imagem PNG, não superior a 1 MB, com um fundo transparente. Este logótipo é apresentado à esquerda na barra de título da aplicação IoT Central.

Se a imagem do logótipo incluir o nome da sua aplicação, pode ocultar o texto do nome da aplicação. Para obter mais informações, veja Gerir a sua aplicação.

Ícone do browser (favicon)

Uma imagem PNG, não superior a 32 x 32 píxeis, com um fundo transparente. Um browser pode utilizar esta imagem na barra de endereço, histórico, marcadores e separador do browser.

Cores do browser

Pode alterar a cor do cabeçalho da página e a cor utilizada para acentuar botões e outros destaques. Utilize um valor de cor hexadecim de seis carateres no formato ##ff6347. Para obter mais informações sobre a notação de cores de Valor HEX , veja Cores HTML.

Nota

Pode sempre reverter para as opções predefinidas na secção Aspeto .

Alterações para operadores

Se um administrador criar um tema personalizado, os operadores e outros utilizadores da sua aplicação deixarão de poder escolher um tema no Aspeto.

Para fornecer informações de ajuda personalizadas aos seus operadores e outros utilizadores, pode modificar as ligações no menu Ajuda da aplicação.

Para modificar as ligações de ajuda, navegue para a secção Ligações de ajuda na página Personalização .

Captura de ecrã que mostra como personalizar as ligações de ajuda.

Também pode adicionar novas entradas ao menu de ajuda e remover entradas predefinidas:

Captura de ecrã que mostra a lista de ligações de ajuda.

Nota

Pode sempre reverter para as ligações de ajuda predefinidas na página Personalização .

Alterar texto da aplicação

Para alterar as etiquetas de texto na aplicação, navegue para a secção Texto na página Personalização .

Nesta página, pode personalizar o texto da sua aplicação para todos os idiomas suportados. Depois de carregar o ficheiro de texto personalizado, o texto da aplicação é apresentado automaticamente com o texto atualizado. Pode fazer mais personalizações ao editar e substituir o ficheiro de personalização. Pode repetir o processo para qualquer idioma suportado pela IU do IoT Central.

O exemplo seguinte mostra como alterar a palavra Device para Asset quando vê a aplicação em inglês:

  1. Selecione Adicionar texto da aplicação e selecione o idioma inglês na lista pendente.

  2. Transfira o ficheiro de texto predefinido. O ficheiro contém uma definição JSON das cadeias de texto que pode alterar.

  3. Abra o ficheiro num editor de texto e edite as cadeias do lado direito para substituir a palavra device por asset , conforme mostrado no exemplo seguinte:

    {
  "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. Carregue o ficheiro de personalização editado e selecione Guardar para ver o seu novo texto na aplicação:

    Captura de ecrã a mostrar como carregar um ficheiro de texto personalizado.

    A IU utiliza agora os novos valores de texto:

    Captura de ecrã que mostra o texto atualizado na IU.

Pode recarregar o ficheiro de personalização com mais alterações ao selecionar o idioma relevante na lista na secção Texto na página Personalização .

Passos seguintes

Agora que aprendeu a personalizar a IU na sua aplicação do IoT Central, eis alguns passos seguintes sugeridos: