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

Una página de contenido es una página web que se representa en el Teams cliente. Estos son parte de:

  • Pestaña personalizada de ámbito personal: en este caso, la página de contenido es la primera página que encuentra el usuario.
  • Pestaña personalizada de canal o grupo: la página de contenido se muestra después de que el usuario anclar y configure la pestaña en el contexto adecuado.
  • Un módulo detareas: puede crear una página de contenido e insertarla como vista web dentro de un módulo de tareas. La página se representa dentro de la ventana emergente modal.

Este artículo es específico para usar 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.

Directrices de diseño y contenido de tabulación

El objetivo general de la pestaña es proporcionar acceso al contenido significativo y atractivo que tiene un valor práctico y un propósito evidente. Debes centrarte en hacer que el diseño de la pestaña sea limpio, la navegación intuitiva y el contenido envolvente.

Para obtener más información, vea directrices de diseño de pestañas y Microsoft Teams directrices de validación del almacén.

Integre el código con Teams

Para que la página se muestre en Teams, debe incluir el SDK de cliente Microsoft Teams JavaScript e incluir una llamada después de microsoftTeams.initialize() que se cargue la página.

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

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

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

Acceso a contenido adicional

Puede obtener acceso a contenido adicional mediante el SDK para interactuar con Teams, crear vínculos profundos, usar módulos de tareas y comprobar si los dominios de dirección URL se incluyen en la validDomains matriz.

Use el SDK para interactuar con Teams

El SDK Teams cliente de JavaScript proporciona muchas funciones adicionales que puede encontrar útiles al desarrollar la página de contenido.

Puede crear vínculos profundos a entidades en Teams. Se usan para crear vínculos que naveguen al contenido y a la información de la pestaña. Para obtener más información, vea crear vínculos profundos al contenido y las características en Teams.

Módulos de tareas

Un módulo de tareas es una experiencia emergente modal que puede desencadenar desde la pestaña. En una página de contenido, puede usar módulos de tareas para presentar formularios para recopilar información adicional, mostrar los detalles de un elemento en una lista o presentar al usuario información adicional. Los módulos de tareas pueden ser páginas de contenido adicionales o crearse completamente con tarjetas adaptables. Para obtener más información, vea using task modules in tabs.

Dominios válidos

Asegúrese de que todos los dominios url usados en las pestañas se incluyan en la validDomains matriz del manifiesto. Para obtener más información, vea validDomains en la referencia del esquema de manifiesto.

Nota

La funcionalidad principal de la pestaña existe en Teams y no fuera de Teams.

Mostrar un indicador de carga nativo

A partir del esquema de manifiesto v1.7,puede proporcionar un indicador de carga nativo. Por ejemplo, página de contenido de tabulación,página de configuración, página deeliminación y módulos de tareas en pestañas.

Nota

  • El comportamiento de los clientes móviles no se puede configurar a través de la propiedad del indicador de carga nativo. Los clientes móviles muestran este indicador de forma predeterminada en las páginas de contenido y los módulos de tareas basados en iframe. Este indicador en el móvil se muestra cuando se realiza una solicitud para capturar contenido y se descarta en cuanto se completa la solicitud.

Si indicas en el manifiesto de la aplicación, toda la configuración de pestañas, el contenido, las páginas de eliminación y todos los módulos de tareas basados en showLoadingIndicator : true iframe deben seguir estos pasos:

Para mostrar el indicador de carga

  1. Agregue "showLoadingIndicator": true al manifiesto.

  2. Llamar a microsoftTeams.initialize();.

  3. Como paso obligatorio, llama para microsoftTeams.appInitialization.notifySuccess() notificar a Teams que la aplicación se ha cargado correctamente. Teams oculta el indicador de carga, si procede. Si notifySuccess no se llama en 30 segundos, se supone que la aplicación ha pasado el tiempo de espera y aparece una pantalla de error con una opción de reintento.

  4. Opcionalmente, 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 microsoftTeams.appInitialization.notifyAppLoaded(); .

  5. Si la aplicación no se carga, puede llamar para Teams microsoftTeams.appInitialization.notifyFailure(reason); que se produjo un error. Se muestra una pantalla de error al usuario. El código siguiente proporciona un ejemplo de motivos de error de la aplicación:

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

Paso siguiente

Consulte también