Crear una página de contenido para la pestaña

Una página de contenido es una página web que se representa dentro del cliente de Teams. Normalmente son parte de:

  • Una ficha personalizada con ámbito personal en esta instancia la página de contenido es la primera página que encuentra el usuario.
  • Una pestaña personalizada de canal o Grupo: después de que el usuario PIN y configure la pestaña en el contexto adecuado, se muestra la página de contenido.
  • Un módulo de tareas : puede crear una página de contenido e incrustarla como WebView dentro de un módulo de tareas. La página se representará dentro del elemento emergente modal.

Este artículo es específico para usar páginas de contenido como fichas; sin embargo, la mayoría de las instrucciones aquí aplicadas se aplican independientemente de cómo se presente la página de contenido al usuario final.

Contenido de la pestaña y directrices de estilo

El objetivo general de su pestaña debe ser proporcionar acceso a contenido significativo y atractivo que tenga un valor práctico y un propósito claro. Esto no significa que deba prepararse con un estilo agradable, pero debe centrarse en minimizar la confusión haciendo que el diseño de pestaña sea limpio, navegación intuitiva y contenido envolvente. Ver contenido y conversaciones, todos a la vez mediante pestañas y Guía del proceso de aprobación de aplicaciones de Microsoft Teams

Integrar el código con Microsoft Teams

Para que la página se muestre en Microsoft Teams, debe incluir el [SDK del cliente de JavaScript para Microsoft Teams](/javascript/api/overview/msteams-client?view=msteams-client-js-latestadd &preserve-view=true) e incluir una llamada a microsoftTeams.initialize() después de que se cargue la página. Así es como se comunican la página y el cliente de Microsoft Teams:

<!DOCTYPE html>
<html>
<head>
...
    <script src= 'https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js'></script>
...
</head>

<body>
...
    <script>
    microsoftTeams.initialize();
    </script>
...
</body>

Obtener acceso a contenido adicional

Uso del SDK para interactuar con Microsoft Teams

El SDK de JavaScript del cliente de Microsoft Teams proporciona muchas funciones adicionales que pueden resultarle útiles al desarrollar su página de contenido.

Puede crear vínculos profundos a entidades en Microsoft Teams. Normalmente, estos se usan para crear vínculos que naveguen a contenido e información dentro de la pestaña. Consulte crear vínculos detallados para el contenido y las características de Microsoft Teams.

Módulos de tareas

Un módulo de tareas es una experiencia modal de tipo popup que se puede desencadenar desde la ficha. Por lo general, en una página de contenido no desea desplazarse al usuario a través de varias páginas. En su lugar, usará módulos de tareas para presentar formularios para recopilar información adicional, mostrar los detalles de un elemento en una lista o cualquier otro momento en que necesite presentar al usuario información adicional. Los propios módulos de tareas pueden ser páginas de contenido adicionales o crearse completamente mediante tarjetas adaptables. Consulte uso de módulos de tareas en pestañas para obtener información completa.

Dominios válidos

Asegúrese de que todos los dominios de dirección URL usados en las pestañas se incluyen en la validDomains matriz del manifiesto. Para obtener más información, vea validDomains en la referencia del esquema del manifiesto. Sin embargo, tenga en cuenta que la funcionalidad principal de su pestaña existe en Microsoft Teams y no fuera de Microsoft Teams.

Mostrar un indicador de carga nativo

Comenzando con el esquema de manifiesto v 1.7, puede proporcionar un indicador de carga nativo siempre que el contenido web se cargue en Microsoft Teams, por ejemplo, Página de contenidode la ficha, página de configuración, Página de eliminación y módulos de tareas en las pestañas.

Nota

  1. El indicador de carga nativa todavía no se admite en dispositivos móviles.
  2. Si indica "showLoadingIndicator : true en el manifiesto de la aplicación, todas las páginas de configuración, contenido y eliminación de la ficha y todos los módulos de tareas basados en iframe deben seguir el protocolo obligatorio, a continuación:
  1. Para mostrar el indicador de carga, agregue "showLoadingIndicator": true al manifiesto.
  2. Recuerde que debe llamar a microsoftTeams.initialize(); .
  3. Opcional. Si está listo para imprimir en la pantalla y desea cargar perezosos el resto del contenido de la aplicación, puede ocultar manualmente el indicador de carga mediante una llamada a microsoftTeams.appInitialization.notifyAppLoaded();
  4. Obligatorio. Por último, llame microsoftTeams.appInitialization.notifySuccess() a para notificar a los equipos que la aplicación se ha cargado correctamente. Teams ocultará el indicador de carga si procede. Si notifySuccess no se llama a en el plazo de 30 segundos, se asumirá que la aplicación ha agotado el tiempo de espera y aparecerá una pantalla de error con una opción de reintento.
  5. Si la aplicación no se puede cargar, puede llamar microsoftTeams.appInitialization.notifyFailure(reason); para informar a Microsoft Teams de que se ha producido un error. A continuación, se mostrará una pantalla de error al usuario:
``
/* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}