Personalización de la interfaz de usuario de Azure IoT Central

Artigo
05/24/2023

En este artículo se describe cómo puede personalizar la interfaz de usuario de la aplicación mediante la aplicación de temas personalizados, cambiar el texto y la modificación de los vínculos de ayuda para que apunten a sus propios recursos de ayuda personalizados.

La captura de pantalla siguiente muestra una página con el tema estándar:

La captura de pantalla siguiente muestra una página con una captura de pantalla personalizada con los elementos de la interfaz de usuario personalizados resaltados:

Sugerencia

También puede personalizar la imagen que se muestra en la barra de direcciones del explorador y la lista de favoritos.

Creación de un tema

Para crear un tema personalizado, vaya hasta la página Apariencia en la sección Personalización.

En esta página, puede personalizar los siguientes aspectos de la aplicación:

Logotipo de la aplicación

Una imagen PNG, no mayor de 1 MB, con un fondo transparente. Este logotipo se muestra a la izquierda en la barra de título de la aplicación de IoT Central.

Si la imagen del logotipo incluye el nombre de la aplicación, puede ocultar el texto. Para más información, consulte Administración de la aplicación.

Icono del explorador (favicon)

Una imagen PNG, no mayor de 32 x 32 píxeles, con un fondo transparente. Un explorador web puede usar esta imagen en la barra de direcciones, el historial, los marcadores y la pestaña del explorador.

Colores del explorador

Puede cambiar el color del encabezado de página y el color usado para resaltar los botones y otros elementos destacados. Utilice un valor de color hexadecimal de seis caracteres con el formato ##ff6347. Para más información acerca de la notación de colores Valor HEXADECIMAL, consulte Colores HTML.

Nota

Siempre puede revertir a las opciones predeterminadas en la sección Apariencia.

Cambios para operadores

Si un administrador crea un tema personalizado, los operadores y otros usuarios de la aplicación ya no pueden elegir un tema en Apariencia.

Reemplazo de los vínculos de ayuda

Para proporcionar información de ayuda personalizada a los operadores y a otros usuarios, puede modificar los vínculos en el menú Ayuda de la aplicación.

Para modificar los vínculos de ayuda, vaya a la página Vínculos de ayuda en la página Personalización.

También puede agregar nuevas entradas al menú de ayuda y quitar las entradas predeterminadas:

Nota

Siempre puede revertir a los vínculos de ayuda predeterminados en la página Personalizar.

Cambiar texto de la aplicación

Para cambiar las etiquetas de texto en la aplicación, vaya a la sección Texto de la página Personalización.

En esta página, puede personalizar el texto de la aplicación para todos los idiomas admitidos. Después de cargar el archivo de texto personalizado, el texto de la aplicación aparece automáticamente con el texto actualizado. Puede realizar personalizaciones adicionales editando y sobrescribiendo el archivo de personalización. Puede repetir el proceso para cualquier lenguaje que admita IoT Central interfaz de usuario.

En el ejemplo siguiente se muestra cómo cambiar la palabra Device a Asset al ver la aplicación en inglés:

Seleccione Agregar texto de aplicación y seleccione el idioma inglés en la lista desplegable.
Descargue el archivo de texto predeterminado. El archivo contiene una definición JSON de las cadenas de texto que puede cambiar.

Abra el archivo en un editor de texto y edite las cadenas del lado derecho para reemplazar la palabra device por asset, como se muestra en el ejemplo siguiente:

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

Cargue el archivo de personalización editado y seleccione Guardar para ver el nuevo texto en la aplicación:

Ahora la interfaz de usuario usará los nuevos valores de texto:

Para volver a cargar el archivo de personalización con más cambios, seleccione el idioma correspondiente en la lista de la sección Texto de la página Personalización.

Pasos siguientes

Ahora que ha aprendido a personalizar la interfaz de usuario en la aplicación de Azure IoT Central, le sugerimos los pasos siguientes:

Share via