Creación de una página de contenido

  • Artículo

La página de contenido es la página web de nivel base que se representa en el cliente de Microsoft Teams, donde un desarrollador puede agregar el contenido de una pestaña. Permite integrar sin problemas el contenido web en el cliente de Teams, creando un entorno más envolvente y atractivo para los usuarios. Por ejemplo, puede usar páginas de contenido para mostrar datos personalizados, integrar servicios de terceros o crear una experiencia de usuario más personalizada. Una página de contenido es necesaria para crear cualquiera de las pestañas siguientes:

  • Una pestaña personalizada de ámbito personal: en este caso, la página de contenido es la primera página que se encuentra el usuario.
  • Una pestaña personalizada de canal o grupo: la página de contenido se muestra después de que el usuario ancle y configure la pestaña en el contexto adecuado.
  • Un cuadro de diálogo: puede crear una página de contenido e insertarla como una vista web dentro de un cuadro de diálogo (denominado módulo de tareas en TeamsJS v1.x). La página se representa dentro del elemento emergente modal.

Si necesita agregar la pestaña dentro de un canal o grupo, o un ámbito personal, presente una página de contenido HTML en la pestaña. En el caso de las pestañas estáticas, la dirección URL de contenido se establece directamente en el manifiesto de la aplicación.

Este artículo es específico del uso de páginas de contenido como pestañas; sin embargo, la mayoría de las instrucciones aquí se aplican independientemente de cómo se presente la página de contenido al usuario.

Nota:

En este tema se refleja la versión 2.0.x de la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS). Si usa una versión anterior, consulte la introducción a la biblioteca TeamsJS para obtener instrucciones sobre las diferencias entre la versión más reciente de TeamsJS y las versiones anteriores.

Instrucciones de diseño y contenido de pestañas

El objetivo general de la pestaña es proporcionar acceso a contenido significativo y atractivo que tenga un valor práctico y un propósito claro.

Debe centrarse en hacer que el diseño de la pestaña sea limpio, intuitivo de navegación y envolvente de contenido. Para obtener más información, vea Directrices de diseño de pestañas y Directrices de validación de la Tienda Microsoft Teams.

Integrar el código con Teams

Para mostrar la página en Teams, deberá incluir la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS) en el código y llamar a app.initialize() después de que se cargue la página.

Nota:

Los cambios de contenido o interfaz de usuario tardan entre 24 y 48 horas en reflejarse en la aplicación de pestaña debido a la caché.

El código siguiente es un ejemplo de cómo se comunican la página y el cliente de Teams:

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    await microsoftTeams.app.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

Para obtener más información sobre cómo crear y agregar una página de contenido a una pestaña personal, vea Agregar una página de contenido a la pestaña Personal.

Las imágenes siguientes muestran la configuración de una página de contenido HTML y la salida de la página de contenido en la pestaña :

Configuración de página de contenido

Captura de pantalla que muestra la página de contenido html en Visual Studio.

Salida en la web

Captura de pantalla que muestra la salida de la página de contenido en la web.

Salida en la pestaña

Captura de pantalla que muestra la salida de la página de contenido en la pestaña Teams.

Acceso a contenido adicional

Puede acceder a contenido adicional mediante TeamsJS para interactuar con Teams, crear vínculos profundos, usar cuadros de diálogo y comprobar si los dominios de dirección URL están incluidos en la validDomains matriz.

  • Usar TeamsJS para interactuar con Teams: la biblioteca cliente JavaScript de Microsoft Teams proporciona muchas más funciones que puede encontrar útiles al desarrollar la página de contenido.

  • Vínculos profundos: puede crear vínculos profundos a entidades en Teams. Se usan para crear vínculos que naveguen hasta el contenido y la información de la pestaña. Para obtener más información, consulte Creación de vínculos profundos al contenido y las características en Teams.

  • Diálogos: un cuadro de diálogo es una experiencia emergente modal que puede desencadenar desde la pestaña. Use diálogos en una página de contenido para presentar formularios para recopilar información adicional, mostrar los detalles de un elemento de una lista o presentar al usuario información adicional. Los propios diálogos pueden ser páginas de contenido adicionales o crearse completamente mediante tarjetas adaptables. Para obtener más información, consulte Uso de cuadros de diálogo en pestañas.

  • Dominios válidos: asegúrese de que todos los dominios de dirección URL usados en las pestañas están incluidos en la validDomains matriz del manifiesto de la aplicación. Para obtener más información, vea validDomains.

Nota:

La funcionalidad principal de la pestaña se da dentro de Teams y no fuera.

Mostrar un indicador de carga nativo

Puede configurar y mostrar un indicador de carga nativo en una pestaña. Puede proporcionar un indicador de carga nativo a partir del esquema de manifiesto v1.7. Por ejemplo, página de contenido de pestaña, página de configuración, página de eliminación y cuadros de diálogo en pestañas.

Nota:

El comportamiento en los clientes móviles no se puede configurar mediante la propiedad de indicador de carga nativa. Los clientes móviles muestran este indicador de forma predeterminada entre las páginas de contenido y los diálogos basados en iframe. Este indicador en dispositivos móviles aparece cuando se realiza una solicitud para capturar contenido y se descarta en cuanto se completa la solicitud.

Si indica showLoadingIndicator : true en el manifiesto de la aplicación, todos los diálogos basados en iframe, contenido, páginas de eliminación y configuración de pestañas deben seguir estos pasos:

Siga estos pasos para mostrar el indicador de carga nativo:

  1. Agregue "showLoadingIndicator": true al manifiesto de la aplicación.

  2. Llamar a app.initialize();.

  3. Llame a app.notifySuccess() todos los contenidos basados en iframe para notificar a Teams que la aplicación se ha cargado correctamente. Si procede, Teams oculta el indicador de carga. Si notifySuccess no se llama en un plazo de 30 segundos, Teams asume que la aplicación ha agotado el tiempo de espera y muestra una pantalla de error con una opción de reintento. En el caso de las actualizaciones de aplicaciones, este paso es aplicable a las pestañas ya configuradas. Si no realiza este paso, se muestra una pantalla de error para los usuarios existentes. [Obligatorio]

  4. Si está listo para imprimir en la pantalla y desea cargar de forma diferida el resto del contenido de la aplicación, puede ocultar manualmente el indicador de carga llamando a app.notifyAppLoaded();. [Opcional]

  5. Si la aplicación no se carga, puede llamar app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"}); a para informar a Teams sobre el error. La message propiedad no se usa actualmente, por lo que el mensaje de error no aparece en la interfaz de usuario y aparece una pantalla de error genérica para el usuario. En el código siguiente se muestra la enumeración que define las posibles razones que puede indicar para que la aplicación no se cargue:

    /* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}

Paso siguiente

Creación de una página de configuración

Consulte también