Diseñe la aplicación personal para Microsoft Teams

  • Artículo

Una aplicación personal puede ser un bot, un área de trabajo privada o ambas. A veces funciona como un lugar para crear o ver contenido. Otras veces, ofrece al usuario una vista general de todo lo que es suyo cuando la aplicación se ha configurado como una pestaña en varios canales.

A modo de guía en el diseño de su aplicación, a continuación se describe e ilustra cómo pueden los usuarios agregar, usar y administrar bots en Teams.

Kit de UI de Microsoft Teams

En el kit de interfaz de usuario de Microsoft Teams, encontrará instrucciones completas de diseño de pestaña, que incluyen elementos que puede usar y modificar como quiera. El kit de interfaz de usuario también tiene temas esenciales, como la accesibilidad y el tamaño dinámico que no se tratan aquí.

Obtener el kit de interfaz de usuario de Microsoft Teams (Figma)

Agregar una aplicación personal

Los usuarios pueden agregar una aplicación personal desde la Tienda Microsoft Teams o el control flotante de la aplicación seleccionando el icono Más en el lado izquierdo de Teams (se muestra en el ejemplo siguiente).

En el ejemplo se muestra cómo agregar una aplicación personal desde el control flotante de la aplicación.

Uso de una aplicación personal (área de trabajo privada)

Con un área de trabajo privada, los usuarios pueden ver el contenido de la aplicación que es importante para ellos en una ubicación central sin salir de Teams.

(Nota de implementación: el área de trabajo privada se basa en la funcionalidad de pestaña personal).

Anatomía: Aplicación personal (área de trabajo privada)

Móvil

En el ejemplo se muestra la anatomía del componente de la pestaña personal.

Contador Descripción
A Atribución de la aplicación: nombre de la aplicación.
N Pestañas: navegación en la aplicación personal.
C Más menú: incluye otras opciones e información de la aplicación.
D Navegación principal: proporciona navegación a otras características principales de la aplicación de Teams.

Configuración y adición de varias acciones en NavBar

Puede agregar varias acciones a la barra de navegación superior derecha y crear un menú de desbordamiento para acciones adicionales en una aplicación. Se pueden agregar un máximo de cinco acciones en la barra de navegación, incluido el menú de desbordamiento.

La captura de pantalla es un ejemplo que describe el menú NavBar y Overflow.

Contador Descripción
1 NavBar
2 Menú Desbordamiento

Para configurar y agregar varias acciones en NavBar, llame a setNavBarMenu API y agregue la displayMode enum propiedad a MenuItem. displayMode enum define cómo aparece un menú en la barra de navegación. El valor predeterminado de displayMode enum se establece en ifRoom.

En función de los requisitos y el espacio disponible en la barra de navegación, establezca displayMode enum teniendo en cuenta uno de los siguientes.

  • Si hay espacio, establezca ifRoom = 0 para colocar un elemento en la barra de navegación.
  • Si no hay espacio, establezca overflowOnly = 1, para que ese elemento siempre se coloque en el menú de desbordamiento de la barra de navegación, pero no en la barra de navegación.

A continuación se muestra un ejemplo de configuración de la barra de navegación con un menú de desbordamiento para varias acciones:

const menuItems = [item1, item2, item3, item4, item5]
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
  output(`Clicked ${id}`)
  return true;
})

Nota:

La setNavBarMenu API no controla el botón Actualizar . Aparece de forma predeterminada.

La captura de pantalla es un ejemplo que muestra la barra de navegación y varias acciones en un menú de desbordamiento.

En el ejemplo se muestra la anatomía estructural de la pestaña personal.

Contador Descripción
A Pestañas: navegación en la aplicación personal.
1 Vista web: muestra el contenido de la aplicación.

Escritorio

En este ejemplo se muestra la anatomía del componente de la pestaña personal.

Contador Descripción
A Atribución de aplicaciones: el logotipo y el nombre de la aplicación.
N Pestañas: navegación en la aplicación personal.
C Vista emergente: inserta el contenido de la aplicación desde una ventana primaria en una ventana secundaria independiente.
D Más menú: incluye otras opciones e información de la aplicación. (También puede convertir Configuración en una pestaña).

En este ejemplo se muestra la anatomía estructural de la pestaña personal.

Contador Descripción
A Pestañas: navegación en la aplicación personal.
1 iframe: muestra el contenido de la aplicación.

Diseñar una pestaña con plantillas de interfaz de usuario y componentes avanzados

Use una de las siguientes plantillas y componentes de Teams para ayudar a diseñar la experiencia de la pestaña:

  • Lista: Las listas pueden mostrar elementos relacionados en un formato digitalizado y permitir a los usuarios realizar acciones en una lista completa o en elementos individuales.
  • Panel de tareas: un panel de tareas, a veces denominado panel kanban o carril, es una colección de tarjetas que se usan a menudo para realizar un seguimiento del estado de los elementos de trabajo o los vales.
  • Panel: un panel es un lienzo que contiene varias tarjetas que proporcionan información general sobre los datos o el contenido.
  • Formulario: Los formularios son para recopilar, validar y enviar el input del usuario de forma estructurada.
  • Estado vacío: La plantilla de estado vacío se puede usar para muchos escenarios, incluidos el inicio de sesión, las experiencias de primera ejecución, los mensajes de error y mucho más.
  • Navegación izquierda: el componente de navegación izquierda puede ayudar si la pestaña requiere algo de navegación. En general, debe usar lo mínimo posible la navegación por pestañas.

Uso de una aplicación personal (bot)

Las aplicaciones personales pueden incluir un bot para conversaciones individuales y notificaciones privadas (por ejemplo, cuando un compañero publica un comentario en la mesa de trabajo). Los usuarios interactúan con el bot en la pestaña que especifique.

Anatomía: Aplicación personal (bot)

Móvil

En el ejemplo se muestra la anatomía del componente de bot personal.

Contador Descripción
A Punto de entrada del bot: punto de entrada para que los usuarios accedan a la característica de bot en la aplicación personal.
N Botón Atrás: devuelve a los usuarios al área de trabajo privada.
C Mensaje del bot: los bots suelen enviar mensajes y notificaciones en forma de tarjeta (por ejemplo, una tarjeta adaptable).
D Cuadro Redactar: campo de entrada para enviar mensajes al bot.

Botón Configurar atrás

Al seleccionar el botón Atrás en una aplicación de Teams, volverá a la plataforma de Teams sin navegar dentro de la aplicación.

Para navegar dentro de la aplicación, configure el botón Atrás para que, al seleccionar el botón Atrás, pueda volver a los pasos anteriores y navegar dentro de la aplicación.

Para configurar el botón Atrás, llame a registerBackButtonHandler API, que controla la funcionalidad del botón Atrás en función de una de las condiciones siguientes:

  • Cuando registerBackButtonHandler se establece en false, TeamsJS llama a la navigateBack API y la plataforma teams controla el botón Atrás.
  • Cuando registerBackButtonHandler se establece en true, la aplicación controla la funcionalidad del botón Atrás (puede volver a los pasos anteriores y navegar dentro de la aplicación) y la plataforma Teams no realiza ninguna acción adicional.

A continuación se muestra un ejemplo de configuración del botón Atrás:

microsoftTeams.registerBackButtonHandler(() => {
  const selectOption = registerBackReturn.options[registerBackReturn.selectedIndex].value
  var isHandled = false
  if (selectOption == 'true') 
    isHandled = true;
  output(`onBack isHandled ${isHandled}`)
  return isHandled;
})

Escritorio

En el ejemplo se muestra la anatomía del componente de bot personal.

Contador Descripción
A Pestaña Bot: por ejemplo, incluya una pestaña Chat para acceder a las conversaciones y notificaciones del bot.
N Mensaje del bot: los bots suelen enviar mensajes y notificaciones en forma de tarjeta (por ejemplo, una tarjeta adaptable).
C Cuadro Redactar: campo de entrada para enviar mensajes al bot.

Administrar una pestaña personal

En el lado izquierdo de Teams, los usuarios pueden hacer clic con el botón derecho en la aplicación personal para anclar, quitar y configurar otras opciones de aplicación.

En el ejemplo se muestran las opciones para administrar una aplicación personal.

Procedimientos recomendados

Use estas recomendaciones para crear una experiencia de aplicación de calidad.

Escritorio

Prioridad de pestaña

Qué sí hacer: mostrar el contenido más relevante en la primera pestaña

Con el tamaño dinámico, las pestañas de la derecha pueden truncarse u ocultarse.

En el ejemplo se muestra una aplicación personal que muestra el contenido más relevante de la primera pestaña.

Qué no hacer: comenzar con contenido o metadatos secundarios

Al igual que una aplicación web estándar, la navegación por pestañas debe progresar en un orden que ayude a dar sentido a las características principales de la aplicación.

En el ejemplo se muestra una aplicación personal a la izquierda con contenido secundario o metadatos.

Jerarquía de pestañas

Qué sí hacer: las pestañas deben ser de la misma jerarquía y representar las páginas clave de la aplicación

Las pestañas deben clasificar las características principales y el contenido de la aplicación. Con el tamaño dinámico, el contenido de la derecha pueden truncarse u ocultarse.

En el ejemplo se muestra una aplicación personal con pestañas de la misma jerarquía.

Qué no hacer: incluir distintos niveles de jerarquía

El contenido debe progresar en un orden lógico que ayude a los usuarios a entenderlo. Si tiene dos pestañas estrechamente relacionadas, considere la posibilidad de combinarlas en una sola pestaña.

En el ejemplo se muestra una aplicación personal con distintos niveles de jerarquía.

Experiencia de primera ejecución

Qué sí hacer: incluir una experiencia de primera ejecución

Debería haber al menos una pantalla de bienvenida la primera vez que use una aplicación personal. En el caso de los bots, describa lo que el bot puede hacer y proporcione acciones rápidas, como un inicio de sesión.

En el ejemplo se muestra qué hacer durante una experiencia de primera ejecución de una aplicación personal.

Otro ejemplo muestra qué hacer durante una experiencia de primera ejecución de una aplicación personal.

Qué no hacer: comenzar con la pantalla en blanco

Es posible que los usuarios se confundan si no se muestra nada la primera vez que ejecutan la aplicación.

En el ejemplo se muestra lo que no se debe hacer durante una experiencia de primera ejecución de una aplicación personal.

Contenido personalizado

Qué sí hacer: agregar contenido de la aplicación relevante para un usuario

Tanto si se trata de una pestaña personal como de un bot, muestre contenido relacionado solo con la actividad de un usuario en la aplicación.

Ejemplo que muestra qué hacer con una aplicación personal y contenido personalizado.

Otro ejemplo que muestra qué hacer con una aplicación personal y contenido personalizado.

Qué no hacer: mostrar contenido no relacionado o demasiado amplio

En contextos personales, no muestre contenido para los equipos de los que un usuario no forma parte. El contenido del bot personal debe centrarse en la persona, no en un grupo.

En el ejemplo se muestra lo que no se debe hacer con una aplicación personal y contenido personalizado.

Otro ejemplo que muestra qué no hacer con una aplicación personal y contenido personalizado.

Características complejas de la aplicación

Qué sí hacer: permitir que los usuarios accedan a características complejas en un explorador

La aplicación debe centrarse en las tareas principales de Teams, pero puede ver la aplicación completa e independiente en un explorador.

En el ejemplo se muestra cómo controlar características de aplicaciones complejas con una aplicación personal.

Qué no hacer: incluir toda la aplicación

A menos que haya creado la aplicación específicamente para Teams, probablemente tenga características que no tienen sentido en una herramienta de colaboración.

En el ejemplo se muestra cómo no controlar características de aplicaciones complejas con una aplicación personal.

Móvil

En el ejemplo se muestran los procedimientos recomendados para una aplicación personal en dispositivos móviles.

Ejemplo de código

Ejemplo de nombre Descripción TypeScript
Aplicación Meeting Ejemplo para mostrar el menú de la barra de navegación en la aplicación de pestaña personal. Ver

Consulte también

Estas otras directrices de diseño pueden ayudar en función del ámbito de la aplicación personal: